No image displayed in Fancybox
Posted
by
seansean11
on Stack Overflow
See other posts from Stack Overflow
or by seansean11
Published on 2012-09-27T02:06:26Z
Indexed on
2012/09/27
3:37 UTC
Read the original article
Hit count: 185
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
© Stack Overflow or respective owner