如何在我的fancybox電話中使用不同的hrefs？

Question

我有以下的fancybox電話：

$(document).ready(function() { 
     $('.fancybox').fancybox({ 
      'closeClick' : false, 
      'scrolling' : 'no', 
      afterShow: function(){ 
      //do some stuff 
      } 
     }); 
    }); 

用於以下影響：

<a href="example_url" class="fancybox fancybox.iframe"><img src="example"/></a> 

什麼，我想這樣做是在href添加到的fancybox電話，這樣我可以簡單地把一個哈希標籤在html中的href中。

$(document).ready(function() { 
     $('.fancybox').fancybox({ 
      'closeClick' : false, 
      'scrolling' : 'no', 
       'href'  : 'example_url', 
      afterShow: function(){ 
      //do some stuff 
      } 
     }); 
    }); 

但是我需要更進一步。可以說我有三個不同的項目要考慮：

<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-1 
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-2 
<a href="#" class="fancybox fancybox.iframe"><img src="example"/></a> //requires url-3 

我知道我需要給每一個某種類型的唯一標識符。此外，我知道我可以只讓三個不同的fancybox呼籲每個人，但我認爲更好的方式來做到這一點會是這樣的：

$(document).ready(function() { 
     $('.fancybox').fancybox({ 
       //do some processing here to find out what triggered the fancybox, then set a variable with the proper href based on that input. Could have a switch statement etc 
      'closeClick' : false, 
      'scrolling' : 'no', 
       'href'  : //variable holding proper url 
      afterShow: function(){ 
      //do some stuff 
      } 
     }); 
    }); 

但我無法使其實際發生，我怎麼設想！

Answer 1

編輯：我應該說，我的例子是使用的fancybox 2，它可能不會在早期版本的工作

您可以鏈接攜帶數據href屬性，你可以在的fancybox通話使用像這樣（小提琴：http://jsfiddle.net/xEtZ8/）

<a class="fancybox" data-href="http://fiddle.jshell.net/YtwCt/show/" href="#">URL 1</a> 

<a class="fancybox" data-href="http://doc.jsfiddle.net/use/echo.html" href="#">URL 2</a> 

和JS

$(function() { 
    $('.fancybox').fancybox({ 
     type: 'iframe', 
     beforeLoad: function() { 
      this.href = this.element.data('href'); 
     } 
    }); 
});