jQuery Instagram Photos Slider Plugin - InstaSlider

InstaSlider is a simple jQuery plugin that fetches Instagram Photos from an Instagram user or a hashtag and displays these photos in a carousel slider on your website.

Important Note:

This plugin is broken since Instagram has changed its API. You can now use the Feed Instagram Graph API plugin instead.

How to use it:

1. Create an Instagram API on Instagram.com and then get a clientID for this plugin

2. Include jQuery library and jQuery InstaSlider on the web page

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

3. Create a container for the slider

<div class="myslider"></div>

4. The CSS

.myslider {
width: 500px;
height: 500px;
border: 1px solid gray;
margin: 0 auto
}
.instaslider-wrapper {
width: 500px;
height: 500px;
background: #e7e7e7;
overflow: hidden
}
.instaslider-wrapper ul {
width: 10000px;
list-style: none
}
.instaslider-wrapper ul li {
float: left
}
div.error {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
color: #fff;
font-family: arial;
text-align: center
}
div.error p {
width: 300px;
line-height: 180%;
margin: 0 auto;
padding: 167px 0 0
}
.instaslider-wrapper ul li img {
width: 500px;
height: auto
}
.instaslider-nav {
position: relative;
top: -50%;
margin: -50px 0 0
}
.instaslider-nav .prev, .instaslider-nav .next {
border: 0;
width: 100px;
height: 100px;
cursor: pointer;
background: #072835;
text-indent: -9999px
}
.instaslider-nav .prev:hover {
background-position: -2px -100px
}
.instaslider-nav .next:hover {
background-position: -98px -100px
}
.instaslider-nav .prev {
float: left;
background: #072835 url(../img/arrow_sprite.png) 0 0
}
.instaslider-nav .next {
float: right;
background: #072835 url(../img/arrow_sprite.png) -100px 0
}

5. Call the plugin with options

$('.myslider').instaSlider({
      clientID: 'xxxx', // Your client ID
      hash: '', // An Instagram hashtag for plugin to fetch content from.
      prevClass: 'prev', 
      nextClass: 'next',
      limit: 5 // The maximum numbers of the slides
});

Change Log:

v0.2.0 (2013-06-30)

• Added Auto feature, search by username and jquery boilerplate

v0.1.1 (2013-05-17)

• Minor updates

---

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