The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

InstaSlider : Instagram Slider Plugin

Plugin rate :

InstaSlider is a lightweight (just 2kb when minified!) jQuery plugin image slider / carousel plugin that populates content from an Instagram hashtag.

Implementation: 

1. FIRST, INCLUDE JQUERY FILES

1
2
3
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="instaslider.jquery.min.js"></script>

 

2. ADD YOUR HTML

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

 

3. CUSTOMIZE INSTASLIDER WITH CSS

InstaSlider can be fully customised using CSS. The default styling is provided below.

1
2
3
4
5
6
7
8
9
10
11
12
13
.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}

 

4. NOW, CALL INSTASLIDER PLUGIN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Simple call
$('.myslider').instaSlider({
       clientID: 'your-id-here'
});
 
// Call with options
$('.myslider').instaSlider({
      clientID: null,
      hash: 'photooftheday',
      prevClass: 'prev',
      nextClass: 'next',
      limit: 5,
      duration: 1000
});
Options: 
clientID
String
Default : null - A clientID must be generated for this plugin to work. You can do this at http://instagram.com/developer/clients/register/.
hash
String
Default : photooftheday - An Instagram hashtag for plugin to fetch content from.
prevClass
String
Default : prev - css class for 'previous' nav button.
nextClass
String
Default : next - css class for 'next' nav button.
limit
Integer
Default : 5 - Allows for limiting the number of slides.
duration
Integer
Default : 400 - Determines the duration of the slide animation.
Screenshots

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
1.01
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]