Gallery + FancyBox not Working (Opening File Path Only)

eyeconictv

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

eyeconictv

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

eyeconictv

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

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

eyeconictv

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

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

eyeconictv

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

AddType application/x-javascript .js

Albert

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

eyeconictv

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

eyeconictv

Thank you!

eyeconictv

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

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next