Fancybox-如何從URL加載圖像？

Question

我不知道如何創建一個燈箱，該燈箱可以將包含鏈接網址的圖片加載到頁面中

這是我的代碼，但是不起作用：

   $("a.picture").click(function() { 
        $.fancybox({ 
           'padding'           : 0, 
           'overlayShow'   : false, 
           'transitionIn'  : 'elastic', 
           'transitionOut' : 'elastic', 
           'titlePosition' : 'over', 
           'type' : 'image', 
           'titleFormat'   : function(title, currentArray, 
currentIndex, currentOpts) { 
            return '<span id="fancybox-title-over">' + (currentIndex + 
1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + 
title : '') + '</span>'; 
           } 
        }); 
        return false; 
    }); 

和HTML代碼

<a class="picture" href="http://localhost/test/my_page.html" title="Picture Page">Link</a>

謝謝！

Answer 1

您上面的腳本還假設您具有這樣的html：

<a class="picture" href="images/picture.jpg">open image</a>

那么您還應該在腳本中添加href類的選項

$("a.picture").click(function() { 
        $.fancybox({ 
           'padding'           : 0, 
           'overlayShow'   : false, 
           'href': this.href, //<--LIKE THIS
           // etc....

該選項將提供fancybox從中加載圖像的URL。

注意 ：可以提出問題，我們很高興為您提供幫助，但是正如@ofir所評論的那樣，您應該提供反饋並接受其他人提供的正確答案，以便人們將來有動力為您提供幫助。