Fancybox links don't show in lightbox - what am i missing?

Question

Alright, I thought I implemented this correctly, but I guess I must\'ve goofed somewhere.

Here\'s my code:

Jquery here:

jQuery(document).read         


        

Answer 1

This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :

1). add the fancybox.image special class to your link like

<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>

2). add the (HTML5) data-fancybox-type attribute to your link like

<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>

3). add the type option to your fancybox script like

$(".fancybox").fancybox({
   type: "image"
});

whatever you think works better for your case.

NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x

EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.

There are two links :

• one using "fancybox.image" class : working
• other without : not working