Instagram Style jQuery Image Rotator Plugin - Instaheader

Instaheader is a very lightweight jQuery for creating an Instagram App-style image rotator/slideshow with a simple image switch effect.

How to use it:

1. Wrap the images in an DIV container with data-images attribute containing an array of images you want to switch.

<div id="demo" data-images='["img/pic4.jpg", "img/pic5.jpg", "img/pic6.jpg"]'> 
<img src="img/pic1.jpg"> 
<img src="img/pic2.jpg"> 
<img src="img/pic3.jpg"> 
</div>

2. Include the latest version of jQuery library and jQuery instaheader plugin in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.instaheader.js"></script> 

3. To initialize the plugin simply call the function like this:

<script type="text/javascript">
$('#demo').instaheader();
</script>

4. Available options.

<script type="text/javascript">
$('#demo').instaheader({
selector     : 'img',   // jQuery selector to find images that should be replaced
imageUrl     : null,    // load images from this url
reuseImages  : true,    // reuse already displayed images
delay        : 2000,    // timedelay (ms) for switching next image
background   : false    // replace background image
</script>

Change log:

2014-02-21

• added background image support.

---

This awesome jQuery plugin is developed by splagemann. For more Advanced Usages, please check the demo page or visit the official website.