Fancybox links don’t show in lightbox – what am i missing?

by

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

More Related Contents:

  1. Fancybox doesn’t work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property ‘msie’ ]
  2. call Fancybox in parent from iframe
  3. Delay pop-up for 10 seconds, only pop up once
  4. How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?
  5. jquery fancybox 2.0.3 – prevent close on click outside of fancybox
  6. How to create separate Fancybox galleries on the same page?
  7. HTML Attribute rel Errors using fancyBox
  8. fancy box work with iframes in beforeShow function?
  9. Fancybox stuck loading iframe in IE
  10. Unable to load google in iframe in fancybox
  11. How to create a direct link to any fancybox box
  12. How to launch jQuery Fancybox on page load?
  13. How do you resize Fancybox at runtime?
  14. Fancybox: iframe doesn’t work
  15. Fancybox2 – different content for tooltip and image title, both from title attribute?
  16. Can Fancybox be responsive only horizontally for tall content?
  17. Open YouTube video in Fancybox jQuery
  18. jQuery Adding new option to select element doesn't pick up the string [closed]
  19. How can I create a “Please Wait, Loading…” animation using jQuery?
  20. Serialize form data to JSON [duplicate]
  21. Difference between $(window).load() and $(document).ready() functions
  22. Upload fails when user drags and drops attachment from email client
  23. Where can I find a tutorial to get started learning jQuery? [closed]
  24. Google Maps v3 load partially on top left corner, resize event does not work
  25. Getting the browser cursor from “wait” to “auto” without the user moving the mouse
  26. Extension refuses to load the script due to Content Security Policy directive
  27. How to get ID of clicked element with jQuery
  28. Fading elements in and out without changing the layout of the page
  29. jQuery web page height
  30. Unselect what was selected in an input with .select()

Leave a Comment