your pal Kaive

Fancybox conflict in WordPress

February 28, 2012 in Website

or help! fancybox stalls when loading my images

Sorry for the weird topic. I just want people desperately seeking help to find it.

How I fixed a strange issue with the game’s image gallery…

So I spent a good chunk of time working on the back-end of the site and everything was looking good enough to begin posting the site’s address around, until the crew and I noticed that when clicking the screenshot images and going through the gallery, we’d get stuck on seemingly random images that would never load even though they were there!

Refreshing the browser or going to the image-in-question’s url would fix the problem, but that’s really no excuse. It’s hard enough trying to promote and sell ourselves with only one game under our belt, and it’s mess ups like this that can ruin whatever chance we did have.

After searching all night like a madman on the topic, what I was able to piece together was if you check the generated html source of your page, and for whatever reason wordpress or someone else is putting in a script call loading jquery or fancybox, leaving you with two different ones loaded in the head section, it will cause conflict and undesired results.

So! The solution was as easy as this:

I noticed wordpress was loading jquery version 1.7 before I was loading a 1.4 version, so I removed mine.

Additionally, I make several uses of the fancybox effect, for images and movies to the adult warning screen. If you’ve followed any of the tutorials online, you’ll probably have seen code that starts like this:

$(document).ready(function(){

The dollar sign is shorthand. I’m still new at this, but to me it just makes sense to change it to this for each declaration:

jQuery(document).ready(function(){

And change each dollar sign to ‘jQuery’ within the function too. Just so there’s no confusion or conflict.

I hope that helps someone!