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-typeattribute (requires HTML5DOCTYPE)jsfiddle.net/3Nf4c and notfancybox.imageclass. – JFK Jul 10 '13 at 15:56