當用戶點擊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 fancybox中的一個打開的圖像在一個錨定標記<a>內將針對外部URL。

首先，你必須正確地構建您的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顯示你的的href屬性有針對性的圖像<a>標記（這也將由您的popit()函數觸發）。

然後，你將需要使用的fancybox回調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的commen T，如果你在的fancybox中顯示多個元素，每個元素應該鏈接到不同的外部URL，你可以動態使用（HTML5）data-*屬性一樣通過每個網址：

<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。該代碼的構建是爲了在您正在瀏覽的頁面頂部的彈出窗口中彈出一個圖像，而不是打開一個新標籤來顯示您剛剛打開的圖像的相關信息。