當用戶單擊fancybox IMG時，在新選項卡中打開外部網站

Question

已將Fancybox設置為首次訪問者彈出。 Fancybox包含圖像，我想在該圖像中鏈接。 因此，當用戶單擊它時，會打開一個帶有href的新選項卡。

    <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>

但是它不能與外部鏈接一起使用，只能以某種方式打開它是單擊鼠標滾動。

Answer 1

你可以做的是wrap打開的圖像wrap在一個定位外部URL的錨標記<a>中的fancybox中。

首先，您需要正確構建您的html，以便綁定fancybox，如：

<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>

...如果訪問者點擊縮略圖，fancybox將在<a>標簽的href屬性中顯示您定位的圖像（這也將由您的popit()函數觸發）。

然后，您將需要使用fancybox回調wrap打開的圖像wrap為另一個<a>標簽，該標簽將在新選項卡中打開外部URL ....因此您的代碼應如下所示：

<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>

請參閱JSFIDDLE

編輯 ：

根據@blachawk的評論，如果你有多個元素要在fancybox中顯示，並且每個元素應鏈接到不同的外部URL，你可以使用（HTML5） data-*屬性動態傳遞每個URL，如：

<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>

...然后，在同一個回調中，獲取data-url屬性的值並設置包裝<a>標簽的href ，如：

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

當然，請參閱更新的JSFIDDLE

Answer 2

更改：

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

至：

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

Answer 3

你不能用fancyBox做到這一點。 該代碼用於在您所在頁面頂部的彈出窗口中彈出圖像，而不是打開新選項卡以顯示有關剛剛打開的圖像的信息。