rac rac - 6 months ago 159
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:

HTML:

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


Jquery:

<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>


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

JFK JFK
Answer

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 ($) {
    $("#hidden_link").fancybox({
        onComplete: function () {
            $("#fancybox-img").wrap($("<a />", {
                // set anchor attributes
                href: this.href, //or your target link
                target: "_blank" // optional
            }));
        }
    }).trigger("click");
});

See JSFIDDLE

NOTE: this is for fancybox v1.3.4