rac rac - 1 year ago 454
Javascript Question

Fancybox add link to popup image

I have a popup on page load that displays a image, when clicking somewhere it closes. I want the popup to be a link that goes to another page. Any ideas?

My current code:


<a id="hidden_link" href="image.jpg" style="visibility:hidden;"><img src="image.jpg")</a>


<script type="text/javascript">
$(document).ready(function() {

This Jquery triggers a hidden link so the fancybox shows. Is there a way to add a link to the image.jpg?

using fancybox 1.3.4

Answer Source

First, if you are hiding the element (visibility:hidden), you don't need to use a thumbnail (<img>) in your html code, otherwise you are just adding an extra overhead to your page load so this should be enough :

<a id="hidden_link" href="image.jpg" style="visibility:hidden;"></a>

Second, to add a link to the image already opened in fancybox, you can use the .wrap() method within fancybox's onComplete callback like this :

jQuery(document).ready(function ($) {
        onComplete: function () {
            $("#fancybox-img").wrap($("<a />", {
                // set anchor attributes
                href: this.href, //or your target link
                target: "_blank" // optional


NOTE: this is for fancybox v1.3.4

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download