Feb

16th

Using jQuery Cycle in a Responsive Layout

posted on Thursday 16th February, 2012 by markj

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:


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:

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:

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)

follow me on twitter badge

rss iconWhat we're saying on the blog

New Lymington Offices

posted on Monday 16th June, 2014 by The New Forest Team

Bluebit are delighted to now have offices near to the beautiful Georgian town of Lymington, and close to The New Forest National Park. This gives us easy access for clients not only in Southampto...

more>>

New hosting plans

posted on Wednesday 12th March, 2014 by Neil Brooks

We now offer Wordpress, Drupal and Opencart plans right on top of our existing hosting packages at no extra cost, plus we're offering three months FREE hosting on all new Business and Professional ...

more>>

Opencart Stock Control extension fully installed

posted on Thursday 24th October, 2013 by Neil Brooks

We now offer a complete Opencart install which includes the installation of our great Stock Control Extension. Hide or show products based on different statuses Allow pre-ordering of these pr...

more>>

New Opencart Export customer data extension released

posted on Tuesday 7th May, 2013 by Neil Brooks

We've just released a new version of our popular Export customers to CSV extension for Opencart which now includes the order and line data export to CSV or Excel formats. Click here to buy the e...

more>>

Simple Retainer service launched

posted on Tuesday 5th March, 2013 by Neil Brooks

We've just released our Simple Retainer 20 service that provides you with 20 minutes per month for any work that you need carried out on your website. If you haven't used all of your minutes, they ...

more>>
view our recent web design work
loading icon Loading... Please wait.