Vertically Centering Image within Semi-Responsive Image Rotator using jQuery Cycle

[Stephanie Meyer]

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

[Robert Banh]

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

});  

--
--
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...@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-Austi...@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-austi...@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

[Stephanie Meyer]

Hrmm I replied to you earlier and it seems to have not posted it.

I was looking for this very thing, but the documentation wasn't super clear that you could use that for custom functions. I should've looked harder at the example pages.

This helps but doesn't totally solve this issue. If you are resizing during the rotation it still shifts down, but it does eventually correct itself.

Thanks for the suggestion!

I'm curious if anyone might be able to explain why the image is shifting down. There doesn't seem to be styling that would do this. If you use either script independently, it doesn't shift down.

Still curious but it's better. Thanks.

-Steph

[Chris Hunter]

Stephanie.

When you define the container that you want to vertically center:

  container = $('.banner');

It's going to grab all elements with the 'banner' class, which in this case is the <li> elements within the carousel. So when your vertical centering script runs, it tries to vertically center those.

You want instead to select the element with the 'banner' id, like:

  container = $('#banner');

Which should then vertically the container around the carousel and not the carousel items.

Hope that helps,

Chris Hunter

chu...@wondertwinpowers.net

On Thu, May 16, 2013 at 9:39 AM, Stephanie Meyer <sme...@envision-creative.com> wrote:

--

[Nate from The Site Slinger]

There are some inherent issues with jQuery + responsive full width slider. There are some good examples here that address the issues:

https://github.com/viljamis/ResponsiveSlides.js -- If you remove all padding and the max-width limitations, you could use this instead.

http://css-plus.com/examples/plugins/PlusSlider/ -- Another one that might work

Example of some live code with a functioning slider like you described (I think): http://stonewebapps.com/

And some info about why jQuery breaks with responsive full width:

http://imulus.com/blog/bruce-clark/jquery-cycle-full-width-100-percent

Nate

--

Nate McGuire

na...@thesiteslinger.com

512.571.9929