基本的fancybox代碼沒有任何效果

我已經錯過了什麼，但我看不出有什麼：

HTML：

<span class="test" url="mapage.php">It's a test</span>

的Javascript：

jQuery(function() { 
    $(document).ready(function() { 

     $('.test').on('click', function() { 
      //alert($(this).attr('url')); 
      $.fancybox({ 'href': $(this).attr('url') }); 
     }); 
    }); 

});

我沒有在任何螢火錯誤。

小提琴：http://jsfiddle.net/6ZZJH/4/

來源

2013-09-27 Portekoi

你有幾個問題：首先：你應該寫代碼那樣：

$(function() { 
//your code here 
});

這將觸發你的代碼只有當jQuery是準備好了。其次，在你的情況下，你的jsfiddle，fancybox lib不加載。

你應該補充一點：

<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script> 
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script> 
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.css" /> 
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

於是最後，您的網址必須是圖片：

就像是：

<span class="test" url="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">It's a test</span>

這裏的jsfiddle：http://jsfiddle.net/5QYGe/1/

來源

2013-09-27 09:59:57 Xiaodoudou

我已經改變了jsfiddle的鏈接，這是你的...對不起。 – Xiaodoudou

沒問題，但它爲什麼必須是圖像？如果我想加載我的網頁，例如，我不能？感謝您的幫助 – Portekoi

我發現我的回覆：http://stackoverflow.com/questions/11618221/how-do-i-make-fancybox-href-dynamic謝謝！ – Portekoi

首先，你必須嵌套文件準備好功能......

嘗試

$(document).ready(function() { 

    $('.test').on('click', function() { 
     //alert($(this).attr('url')); 
     $.fancybox({ 'href': $(this).attr('url') }); 
    }); 
});

或簡寫以上。

$(function() { 

     $('.test').on('click', function() { 
      //alert($(this).attr('url')); 
      $.fancybox({ 'href': $(this).attr('url') }); 
     }); 
});

UPDATE 工作的jsfiddle：http://jsfiddle.net/kasperfish/6ZZJH/9/ 如果你想打開一個URL，你需要指定的fancybox類型 IFRAME ...

  $(document).ready(function() { 

      $('.test').click(function() { 

       btn=$(this); 

       btn.fancybox({ 
        "type": 'iframe', 
        "href": btn.attr('url') 
       }); 


      }); 
     });

來源

2013-09-27 09:47:24

沒有發生:(==> http://jsfiddle.net/6ZZJH/6/ – Portekoi

那是因爲，fancybox不是包括在jQuery中。您必須將其作爲腳本標記包含到您的html中。如果沒有，它不會被加載。看看fancybox的文檔 –

更新了我的回答 –

jQuery(function() { 
$(document).ready(function() { 

    $('.test').on('click', function() { 
     //alert($(this).attr('url')); 
     $.fancybox({ 'href': $(this).attr('url') }); 
    }); 
}); 

});

應該是

$(document).ready(function() { 
    $('.test').on('click', function() { 
     //alert($(this).attr('url')); 
     $.fancybox({ 'href': $(this).attr('url') }); 
    }); 
});

並確保您已包括jquery.fancybox.version.js和jquery.fancybox.version.css的HTML中。

來源

2013-09-27 09:48:11

基本的fancybox代碼沒有任何效果

回答

相關問題