当用户单击fancybox IMG时，在新选项卡中打开外部网站

Question

Have setup Fancybox to popup to first time visitors. Fancybox contains a image and i want link in that image. So when user clicks it a new tab with the href opens.

    <div id="usplayers" class="fancybox" style="max-width:500px;overflow:none;display: inline- block;">
    <a href="External URL" target="_blank">
        <img src="/folder/img.gif"> </a>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox();
    });
</script>
<script type="text/javascript">
    function popit() {
        setTimeout(function () {
            $("#usplayers").trigger('click');
        }, 2000);
    }
    $(document).ready(function () {
        var visited = $.cookie('hello');
        if (visited == 'yes') {
            nothing();
        } else {
            popit();
        }
        $.cookie('hello', 'yes', {
            expires: 15
        });
    });
</script>

But it's not working with the external link, Only way to open it somehow is to click mouse scroll.

Answer 1

What you can do is to wrap the opened image in fancybox inside an anchor tag <a> that will target the external URL.

First you have to build your html properly in order to bind fancybox like :

<a class="fancybox" href="{the image that you want to open in fancybox}">
  <img src="{the thumnail that users see on your page}" alt="" />
</a>

... if the visitors click on your thumbnail, fancybox will display the image you targeted in the href attribute of the <a> tag (this will be also fired by your popit() function).

Then you will need to use a fancybox callback to wrap the opened image an another <a> tag that will open the external URL in a new tab .... so your code should look like :

<script type="text/javascript">
function popit() {
    setTimeout(function () {
        $("#usplayers").trigger('click');
    }, 2000);
}
$(document).ready(function () {
    var visited = $.cookie('hello');
    if (visited == 'yes') {
        // nothing(); // this is not defined
        return false; // use this instead
    } else {
        popit();
    }
    $.cookie('hello', 'yes', {
        expires: 15
    });
    $(".fancybox").fancybox({
        // here you wrap the opened image
        afterShow: function () {
            $(".fancybox-image").wrap("<a href='http://jsfiddle.net' target='_blank' />");
        }
    });
});
</script>

See JSFIDDLE

EDIT :

Based on @blachawk 's comment, if you have more than one element to display in fancybox and each element should link to a different external URL, you could dynamically pass each URL using a (HTML5) data-* attribute like :

<a id="usplayers" data-url="jsfiddle.net" title="fire fancybox" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

... then, within the same callback, fetch the data-url attribute's value and set the href of the wrapping <a> tag like :

$(".fancybox").fancybox({
    afterShow: function () {
        var url = "http://" + $(this.element).data("url");
        $(".fancybox-image").wrap("<a href='"+url+"' target='_blank' />");
    }
});

Of course, see updated JSFIDDLE

Answer 2

Change:

<a href="External URL" target="_blank">
<img   src="/folder/img.gif" </a>

To:

<a href="External URL" target="_blank">
    <img src="/folder/img.gif" alt="" />
</a>

Answer 3

You can't do that with fancyBox. The code was built to pop up an image in a popup window on top of the page you are on, not open a new tab to display info about the image you just opened.