jQuery Instagram Photos Slider Plugin - InstaSlider
File Size: | 44.7KB |
---|---|
Views Total: | 8443 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.