instaheader

Create an Instagram-style header with changing pictures. Demo.

How to Use

Download or install with bower.

bower install --save instaheader 

1. Add a container with some images. You can add new images as data-attributes or load them from web (see options).

   <div id="container" 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. Add the plugin after jQuery at the bottom of the body.

   <script src="js/jquery.instaheader.js"></script>

3. Call the plugin.

   <script>$('#container').instaheader();</script>

4. Options

   <script>     $('#container').instaheader({         selector    : 'img',                         // jQuery selector to find images that should be replaced         background  : false,                         // true, if you want to change background images         reuseImages : false,                         // true, if you are using data-attribute and want to reuse images         delay       : 3000,                          // delay (ms) before switching to next image         imageUrl    : 'http://path/to/new/image/url' // or null if you use data-attribute     }); </script>

Support:

• not really tested yet
• should work in all major browsers