Adding instagram photos to your website should be simple, whether it’s a wordpress or not. Unless you are familiar with javascript, it could be difficult to figure out how to get your instagram api feed loading in a lightbox or FancyBox. If you are using WordPress, an easy way to integrate Fancybox is via the Easy Fancybox Plugin.
Step 1: Pulling in recent instagram pictures by tag or user and loading them into a “instagram” or “instafeed” can be performed with InstaFeed.js
Step 2: Adding advanced instagram feed options and templating.
Step 3: Adding support for Fancybox via the “after” function. A common mistake is to add
|
1 |
$(".instagram a").fancybox(); |
after the initial . The reason this doesn’t work is because the Instagram thumbnails are loading onto the page at the time you run the code to set up the fancybox. The fancybox script has to run over the thumbnails once they have already been loaded into the page, meaning, the javascript initializing the fancybox must be following the line after the loop in the success function, in this script’s case, in the “after” function.
|
1 |
<div id="instafeed"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> var feed = new Instafeed({ get: 'tagged', tagName: 'awesome', after: function() {var images = $("#instafeed a").fancybox()}, clientId: 'YOUR_CLIENT_ID', template: '<a rel="group" class="fancybox" href="{{image}}"><img style="width:100%;" class="fancybox" src="{{image}}" /></a>', resolution: 'standard_resolution', }); feed.run(); </script> |