Gallery + FancyBox not Working (Opening File Path Only)

eyeconictv · January 2015

I'm having issues sitewide with the Gallery FancyBox.

I imported a demo to go off of that had the pre-existing shortcode necessary to implement the gallery, however (even with all plugins disabled) the fancybox does not work in the gallery shortcode. I've searched this forum already for a previous discussion on the topic and haven't quite found this exact issue so I'm posting my problem.

An applicable url: http://www.c-store.tv/c-stores/ (About halfway down the page there is a 4 column gallery)

I've even tried adding the class to the shortcode itself, adding the class to the section, along with various other implementations. I've disabled & re-enabled the FancyBox option. There are not Javascript Errors in my console on page load.

However, when I log the console I receive this:

jquery.plugins.js?ver=6.1:48 Uncaught TypeError: Cannot read property 'indexOf' of undefinedjquery.plugins.js?ver=6.1:48 (anonymous function)jquery.js?ver=1.11.1:2 m.extend.mapjquery.plugins.js?ver=6.1:48 e.prettyPhoto.initializejquery.js?ver=1.11.1:3 m.event.dispatchjquery.js?ver=1.11.1:3 r.handle

Resource interpreted as Document but transferred with MIME type image/png: "http://www.c-store.tv/wp-content/uploads/2015/01/vlcsnap-2015-01-13-19h49m19s64.png".

Is this maybe a .htdocs or server side configuration error? Please help.

Albert · January 2015

Hi,

you have this problem because you got class="prettyphoto" instead of rel="prettyphoto". Please replace it in your column item and all will be fine.

eyeconictv · January 2015

The problem existed BEFORE I added class... I tried to add class to fix it.

eyeconictv · January 2015

I just swapped out class for rel and it still exists.

The problem existed even from the DIRECTLY imported demo that was provided from your importer. I used the same code, changed out the id's on the gallery images and later realized that the links went straight to the files.

eyeconictv · January 2015

Console Log:

Uncaught TypeError: Cannot read property 'indexOf' of undefined -> jquery.plugins.js?ver=6.1:48

(anonymous function) -> jquery.js?ver=1.11.1:2

m.extend.map -> jquery.plugins.js?ver=6.1:48
e.prettyPhoto.initialize -> jquery.js?ver=1.11.1:3

m.event.dispatch -> jquery.js?ver=1.11.1:3

r.handle -> Resource interpreted as Document but transferred with MIME type image/jpeg: "http://www.c-store.tv/wp-content/uploads/2015/01/Box-Dinners.flv_snapshot_00.06_2015.01.15_20.37.33.jpg".

Albert · January 2015

Did you switched class="prettyphoto" to rel="prettyphoto" for the popup video which is above gallery? Because we are talking about this section, not gallery. As we see in the code, you did not switched and we are not able to have a look on it.

eyeconictv · January 2015

It works.... Videos work.

The image gallery does not. File extensions .jpg are not being recognized. Please look at my console log above to see the error.

It doesn't matter if I add the extra class on the video or not because it is working.

I just installed an external plugin "Easy Fancybox" and disabled the built in plugin and everything is working now. If you would actually like to troubleshoot the problem I could switch it back. Please be aware that the class="prettyphoto" or rel="prettyphoto" regardless of which is used does NOT fix the problem.

eyeconictv · January 2015

I believe it is either a jQuery compatibility issue or a MIME type error...

eyeconictv · January 2015

To fix the problem I added the following to my .htaccess file:

AddType application/x-javascript .js

Albert · January 2015

If above trick in .htaccess file helped, then it means that settings on server side are not complete.

Anyway thanks for explanation! We're glad to hear that you solved it.

eyeconictv · March 2015

Unfortunately, I was mistaken in thinking this fixed the problem...

It re-appeared.

Strangely, it is working on this page:

http://www.c-store.tv/c-stores/

But it is not working on this page:

http://www.c-store.tv/

Albert · March 2015

Call to action item have 3 classes added as we see in the code. Please remove them and leave just prettyphoto class and everything will be fine.

eyeconictv · March 2015

Thank you!

eyeconictv · March 2015

Previously it was NOT centering, so I tried to add the class to fix it and must have forgotten about it.

Albert · March 2015

You're welcome

Gallery + FancyBox not Working (Opening File Path Only)

Comments