Instafeedjs and Fancybox how to get lightbox to work on javascript output of instafeed

Question

I am trying to make my instafeed image links open via fancybox (or any other lightbox!!). I am currently using Easy Fancybox plugin and InstafeedJS. Simply adding the fancybox class to the image link does nothing. I think it is being overridden by my initial instafeed js?

I have searched and searched, but cannot find a solution. Fancybox is working normally on all other "regular" images throughout the site. I also tried copying the output of my instagram feed, and simply pasted the HTML in the page, fancybox worked fine on this test only when I removed

id="instafeed"

from

<div id="instafeed"></div>

My current javascript is as follows:

<script type="text/javascript">
   var feed = new Instafeed({
    get: 'tagged',
    tagName:  'mytagishere',
    limit: 14,
    links: false,
    clientId: 'myclientidishere',
    template: '<div class="col-xs-4"><a rel="group" class="fancybox" href="{{image}}"><img style="width:100%;" class="fancybox" src="{{image}}" /></a></div>',
    resolution: 'standard_resolution'
    });
feed.run();
</script>

<div id="instafeed"></div>

Clearly there is some sort of javascript tweak I need to do in order to make the fancybox/lightbox effect execute properly! I also have no errors in my console. PLEASE advise!! :)

Your images are added to the DOM dynamically by instafeed and fancybox v1.3.4 (used by EasyFancybox) doesn't support dynamically added elements. Check this http://stackoverflow.com/a/9084293/1055987 if that helps — JFK, Oct 17 '13 at 06:05

score 4 · Answer 1 · answered Jul 10 '14 at 18:38

This works for me:

var feed = new Instafeed({
              get: 'user',
              userId: 483799418,
              accessToken: '483799418.ab103e5.944a7cd8f8514fba80dd622d685e151b',
              limit: 12,
              sortBy: 'most-liked',
              after: function () {
                var images = $("#instafeed a").fancybox();
                $.each(images, function(index, image) {
                  var delay = (index * 75) + 'ms';
                  $(image).css('-webkit-animation-delay', delay);
                  $(image).css('-moz-animation-delay', delay);
                  $(image).css('-ms-animation-delay', delay);
                  $(image).css('-o-animation-delay', delay);
                  $(image).css('animation-delay', delay);
                  $(image).addClass('animated flipInX');
                })
              },
              template: '<a rel="group" class="fancybox" href="{{model.images.standard_resolution.url}}" target="_blank"><img style="width:100%;" class="fancybox" src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
            });
            feed.run();
        });

Source: https://github.com/stevenschobert/instafeed.js/issues/44

score 0 · Answer 2 · edited Sep 19 '17 at 10:51

Use Bootstrap CDN and Instafeedjs:

var feed = new Instafeed({
        get: "user",
        userId:'xxxxxxxxxxx',
        tagName: 'tagged',
        clientId: 'xxxxxxxxxxxxxxxxxxxx',
        accessToken: 'xxxxxxxxxxxxxxxxxxx',
        limit: 12,
        sortBy: 'most-liked',
        template: '<div class="col-lg-3 col-sm-3 col-xs-4"><a href="{{link}}"><img class="img-responsive" src="{{image}}" /></a></div>',
        resolution: 'standard_resolution'
    });

feed.run();

and run. This script will display 4 images in a row.

Instafeedjs and Fancybox how to get lightbox to work on javascript output of instafeed

2 Answers2