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

A

admin

Administrator
Staff member
I am trying to make my instafeed image links open via fancybox (or any other lightbox!!). I am currently using <a href="http://wordpress.org/plugins/easy-fancybox/" rel="nofollow">Easy Fancybox plugin</a> and <a href="http://instafeedjs.com/" rel="nofollow">InstafeedJS</a>. 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

Code: 
id="instafeed"

from

Code: 
&lt;div id="instafeed"&gt;&lt;/div&gt;

My current javascript is as follows:

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

&lt;div id="instafeed"&gt;&lt;/div&gt;

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!! :)
 
You must log in or register to reply here.