This href="http://placehold.it/350x125"
doesn't say to fancybox that you are opening animage
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
data-fancybox-type
attribute (requires HTML5DOCTYPE
)jsfiddle.net/3Nf4c and notfancybox.image
class. – JFK Jul 10 '13 at 15:56