Question

I am having trouble getting fancybox to display its corresponding images on a website that I’m building http://www.nomadicdrift.com/test/kaniwa#events . It’s a custom one page portfolio theme that I set up on the WordPress platform.

If you follow the link to the events section you will see 1 figure item in a gallery like position. I have this image set up to work as a fancybox gallery, but when you click on it, it opens up the fancybox interface but does not place a image in the frame, even though it should. So this is the problem…the images do not show up in fancybox and instead I see just the frame.

Here is the html that I’m displaying:

<figure>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2.jpg">
<img class="attachment-evento wp-post-image" width="231" height="191" title="NM" alt="NM" src="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/NM2-231x191.jpg">
</a>
<figcaption>
<a class="fancybox" data-fancybox-type="Fashion Show de Paris, France" href="http://www.nomadicdrift.com/test/kaniwa/wp-content/uploads/2012/07/CEDESAN.jpg">   </a>
<h4>Fashion Show de Paris, France</h4>
</figcaption>
</figure>

I’m not going to bore you with the PHP that I used to get that output because I think the problem lies elsewhere.

***I have tried to set up a simple standard fancybox gallery on the site also, but it gives me thes same problem, leading me to believe that the problem is deeper than the html markup. I have also successfully used this same markup for a one thumbnail fancybox gallery on another site.

I thought maybe it was due to some conflict in the .js files I’m using. I tried uninstalling all of my plugins/addons (which aren’t too many) one by one and still had the same result. I have all of my personal javascript in the functions.js file, which is where I call the fancybox plugin using the standard $("a.fancybox").fancybox();.

I have installed this plugin before on other sites and have searched extensively for an answer, so any help is greatly appreciated.

Thanks,
Sean

Answer 1

Well, your code may seem semantically correct for a fancybox but is not. The problem that you have is that fancybox uses the data-fancybox-type attribute to determine what type of content it should open (in your case is an image gallery) BUT “Fashion Show de Paris, France” doesn’t say anything to fancybox so the type of content is unknown or undefined hence the empty box.

The valid options for that attribute should be either image, iframe, ajax, html or inline.

Maybe you meant to use data-fancybox-group="gallery_name_here". Check https://stackoverflow.com/a/9037826/1055987 for more.

You may try to remove the data-fancybox-type attribute (reserved for fancybox) -OR- rename it in something like

data-description="Fashion Show de Paris, France"

… for your own use, so it won’t conflict with fancybox.

BTW, another issue that you have is that the z-index of you header (#header) is higher (9998) than the fancybox z-index (which is around 8010 by default) so I would recommend you to lower the z-index of your #header, otherwise the fancybox close button will be placed behind of it.

Saludos a la tierra del buen café.