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
share|improve this answer
 
Ohhhh Okay that makes sense! And what if i wanted to display html content in the pop up? Is there a specified type for that too? –  Evan Jul 9 '13 at 18:19
 
Hmm, I still can't get it to work with any of those options. i have jquery 1.8.3, is that too old for fancybox? – Evan Jul 9 '13 at 18:27
 
@Evan jQuery 1.8.3 is OK, what version of fancybox? –  JFK Jul 9 '13 at 18:59 
 
its 2.1.5 maybe I called it into the head incorrectly, let me edit my question to display what I have called into the head. –  Evan Jul 10 '13 at 14:45 
1 
@Evan : here is working with data-fancybox-type attribute (requires HTML5 DOCTYPE)jsfiddle.net/3Nf4c and not fancybox.image class. –  JFK Jul 10 '13 at 15:56 
show 3 more comments


출처 - http://stackoverflow.com/questions/17554068/fancybox-links-dont-show-in-lightbox-what-am-i-missing/17554660#17554660





Posted by linuxism
,