
A responsive, highly-customizable Instagram Photo Gallery plugin that adds Instagram photos from any user to your website without the need of the Instagram access token.
1. Create a container element to display the Instagram photos.
<div id="instagram-feed-demo" class="instagram_feed"></div>
2. Download and include the jQuery instagramFeed
script after loading jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="jquery.instagramFeed.js"></script>
3. Call the function on the container element and specify the username whose photos you want to fetch.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo" }); });
4. Decide wherther to display the user's profile and biography.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'display_profile': true, 'display_biography': true }); });
5. Set the maximum number of photos to display.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'items': 8 }); });
6. Set the maximum number of photos per row.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'items_per_row': 4 }); });
7. Set the space between photos.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'margin': 0.5 }); });
8. If you want to override the default CSS styles.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'styling': false }); });
.instagram_profile { /* CSS styles here */ } .instagram_profile_image { /* CSS styles here */ } .instagram_username { /* CSS styles here */ } .instagram_biography { /* CSS styles here */ } .instagram_gallery { /* CSS styles here */ }
9. Decide whether to display Instagram photos as a gallery.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo", 'display_gallery': true }); });
10. To customizie the template for the Instagram gallery.
$(window).on('load', function(){ $.instagramFeed({ 'username': 'instagram', 'container': "#instagram-feed-demo&, 'get_raw_json': true, 'callback': myTemplate }); });
This awesome jQuery plugin is developed by BanNsS1. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 26.04.2018
- Source