Have you tried calling the centerImage method in the 'after' event?
$('#banner_items').cycle({
speed: 1000,
timeout: 3000,
slideResize: 0,
slideExpr: '.banner',
next: '#next',
prev: '#prev',
after: centerImage
});
On Thu, May 16, 2013 at 9:39 AM, Stephanie Meyer <
sme...@envision-creative.com> wrote:
> I have a banner area with a defined height and I want the images that
> rotate within it to vertically center (height can be greater than the
> parent banner container with the overflow hidden). The images maintain full
> width of the browser until they reach 1750px wide and stop scaling down
> when they reach the height of the banner area. I have a script that
> vertically centers the variable height images on page load and when the
> browser window scales, but when I use this together with jQuery Cycle to
> rotate through the images, the scripts do not play nice. Everything seems
> ok initially, but if you resize the browser during the rotation the image
> shifts down so that the top of the image is at the halfway point of the
> banner area. If I remove the centering script the images don't shift but
> stay anchored at the top. If I remove the Cycle script the images don't
> shift but they also don't rotate (obviously)....so the problem is
> definitely with the two working together.
>
> The site is at this address: www.envisiondemo.com/planview
> (still a work in progress)
>
> The vertical centering script looks like this:
>
> var imageHeight, overlap, container = $('.banner');
>
> function centerImage() {
> imageHeight = container.find('img').height();
> overlap = (520 - imageHeight) / 2;
> container.find('img').css('margin-top', overlap);
> }
>
> $(window).on("load resize", centerImage);
>
> Does anyone know how I might be able to make this script work with Cycle
> or is there a responsive rotator plugin/script that can vertically center
> the images within a fixed height parent container?
>
> Please help! :-) Thanks!
>
> -Steph M
>
> --
> --
> Our Web site: http://www.RefreshAustin.org/
>
> You received this message because you are subscribed to the Google Groups
> "Refresh Austin" group.
>
> [ Posting ]
> To post to this group, send email to Refresh-Austin@googlegroups.com
> Job-related postings should follow http://tr.im/refreshaustinjobspolicy
> We do not accept job posts from recruiters.
>
> [ Unsubscribe ]
> To unsubscribe from this group, send email to
> refresh-austin+unsubscr...@googlegroups.com
>
> [ More Info ]
> For more options, visit this group at
> http://groups.google.com/group/Refresh-Austin
>
> ---
> You received this message because you are subscribed to the Google Groups
> "Refresh Austin" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to refresh-austin+unsubscr...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>
--
Robert Banh | Web Developer
web: http://robertbanh.com
email: r...@robertbanh.com
phone: 512.698.6072
--
--
Our Web site: http://www.RefreshAustin.org/
You received this message because you are subscribed to the Google Groups
"Refresh Austin" group.
[ Posting ]
To post to this group, send email to Refresh-Austin@googlegroups.com
Job-related postings should follow http://tr.im/refreshaustinjobspolicy
We do not accept job posts from recruiters.
[ Unsubscribe ]
To unsubscribe from this group, send email to
refresh-austin+unsubscr...@googlegroups.com
[ More Info ]
For more options, visit this group at
http://groups.google.com/group/Refresh-Austin
---
You received this message because you are subscribed to the Google Groups
"Refresh Austin" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to refresh-austin+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
