InstaHeader.js Instagram header made easy.

Demo

Description

instaheader.js is a simple jquery plugin that help you to create something looking like the Instagram Web header.

Usage

<link href="jquery.instaheader.css" rel="stylesheet">
<script src="js/jquery.instaheader.js"></script>
<div class="instaheaderbg">
  <div id="header"></div>
</div>
<script>
$(document).ready(function(){
  $('#header').instaheader();
});
</script>
<script>
$('#header').instaheader({
  auto: true,
  imgs:[],
  urls:[],
  selector:'img',
  time:3000,
  scan:false,
  animation_time:500,
  animationType:'random'
});
</script>

Options

Name Description Default
auto If set to true all the images in the page are used true
imgs You can set an array of images urls. If set the auto option is override to false []
urls You can set an array of urls. /!\ you must enter the exact same number of urls that imgs []
selector Kind of element you want to display (img / a) img
time Set the time between each change 3000
scan the identifier in wich one you want to scan the images (Ex: #header / .header) false
animation_time Execution time for the transition 500
animationType Type of the animation for the transition btw 2 images random

Images for example purpose

Images for example with link