I’ve used the jQuery Cycle plugin and a few projects and think it’s absolutely fantastic. I was looking at an old project that uses it and began reworking the layout so it would work as a responsive design. This involved using percentages for element widths. This is where the cycle plugin fell down for me as it uses pixels to set widths of elements.
I wrote a simple jQuery plugin to solve this. It has nowhere near the functionality of the Cycle plugin as it only fades between images, but this was the only feature I need at the moment.
How to
The plugin can be downloaded from Github. Once you have the files you need to do the following.
HTML Setup
The HTML structure needs to follow this format
<div id="myGallery"> <ul> <li><img src="image-1.jpg" width="800" height="600" /></li> <li><img src="image-2.jpg" width="800" height="600" /></li> <li><img src="image-3.jpg" width="800" height="600" /></li> </ul> </div>
Scripts
After including jQuery you then need to include the flexible fading images script
<script src=”flexibleFading.jQuery.js”></script>
Then to initialize the plugin pass the selector to it like so
<script>
$(document).ready(function(){
$('#myGallery').flexibleFading();
});
</script>
Options
There are two options that can be overridden in the plugin.
- Time between slides – this sets the time that a slide displays before beginning the transition to the next one
- Transition time – the time it takes to transition between one slide and the next
Setting options
To set the options you can call the plugin with the following
$('#myGallery').flexibleFading({timeBetweenSlide:4000, transitionTime:10000});
