This post was inspired by this thread on the jQuery forum and the solution was found within those posts. I wanted to lay the solution out in a more digestable manner, hence this post. Please note, this solution will not work in IE6 or below as the browser does not support the max-width css property.
Slideshows. Who doesn’t love a good slideshow? jQuery Cycle is a plugin that makes creating these popular site elements incredibly simple. However, you may have attempted to use Cycle in a responsive layout recently and discovered that the slideshow does not resize as your container changes size. Click here to see an example of this unwanted behaviour.
To demonstrate how to fix this issue, I’m going to run through the creation of the (broken) demo above, and then explain each step that we need to take. Initially I begun with the following HTML:
<div class="container">
<div id="ss">
<img src="slide1.jpg">
<img src="slide2.jpg">
</div>
</div>
I’ve included my stylesheet in my header (style.css), then jQuery, jQuery Cycle and my script in my footer.
Style.css contains the following CSS:
.container {
width: 90%;
margin: 20px auto;
}
img {
max-width: 100%;
height: auto;
width: auto; /* ie8 fix*/
}
Finally, my script contains the following jQuery:
$(function() {
$('#ss').cycle();
});
Personally, I expected this to be job done. However it turns out that when you call the cycle method on your slideshow’s jQuery object, your flexible images are not so flexible anymore.
What’s happening?
Cycle is adding inline styles to your images, in particular, it’s adding a width and a height. Usually, this isn’t an issue as our container never changes size. As we’re trying to create a fluid slideshow, this won’t do.
How do we fix this?
Thankfully, Cycle has a load of options that we can make use of. The one we’re interested in is slideResize. By default this is set to 1, but as we don’t want Cycle to force widths and heights on our images, we need to override this default and set it to 0.
We do this like so:
$(function () {
$('#ss').cycle({
slideResize: 0
});
});
Simple. Or so we thought. There is something else that Cycle does that still causes our lovely responsive images to be a fixed width. It sets an automatic width and height onto the slideshow container (#ss in my markup) that matches the width of your slides when the cycle method is called. Initially I thought, well I’ll just set the containerResize option to be false as it sounded sensible.
From the Cycle options documentation: containerResize: 1, // resize container to fit largest slide
Unfortunately if we stop our container being resized, because our images are absolutely positioned by Cycle, our slideshow now does not have a height and any content below will end up underneath our slideshow. At least by doing this we’ve identified the problem. We need to make sure the slideshow container keeps a width and a height, that matches the width and height of our responsive slides. If you’re following along and you’ve overridden the default containerResize option, you can remove that from your code as it is not required.
The solution
What we need to do is add a dummy image into our slideshow container like so:
<div id="ss"> <img src="dummy.gif" width="1920"> <!-- dummy.gif is a transparent gif saved at the max size of my slides --> <img src="slide1.jpg"> <img src="slide2.jpg"> </div>
I’ve given it a width that matches the maximum width of my slides, 1920 pixels. We don’t give it a height as this will be calculated by the browser as the images width changes. We’re not quite finished as by doing this we end up with an empty slide in our slideshow. We need to tell Cycle what we want to use as slides. This is done by adding a class to each of our slide items:
<div id="ss"> <img src="dummy.gif" width="1920"> <img class="slide" src="slide1.jpg"> <img class="slide" src="slide2.jpg"> </div>
We then inform Cycle of the selector we wish to use to identify slides, in our case, this is a class of ‘slide’. We do this using Cycle’s slideExpr option:
$(function () {
$('#ss').cycle({
slideExpr: '.slide',
slideResize: 0
});
});
We’re done! You can see the implementation explained above here: Using jQuery Cycle in a Responsive Layout (Basic). Alternatively, you can see a more modular implementation of this here: Using jQuery Cycle in a Responsive Layout (Modular)