jQuery Flexible Fading Image Plugin

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.

  1. Time between slides – this sets the time that a slide displays before beginning the transition to the next one
  2. 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});

Demo

View a demonstration

Leave a Reply

Your email address will not be published. Required fields are marked *