jQuery燈箱問題

Question

我在頁面上有許多圖片，有些圖片用css隱藏了額外的詳細圖片，所以它們只能在燈箱中可見。

This can be seen here.

每一組圖片是一個div內，我的問題是，當你訪問收藏夾，你可以點擊旁邊並辦理所有圖片的頁面上，我wan't用戶只能點擊next/previous來訪問該div內的圖像，而不是整個頁面，這是否可以做到？

謝謝

Answer 1

我敢肯定，如果你可以用燈箱插件做到這一點，但我使用使用Javascript圖像的fancybox插件和顯示設置。

我通過鏈接顯示它們，但您可以輕鬆修改它。

<a href="Javascript:DisplaySetOne();" title="View Images">View Images</a> 

和JavaScript

function DisplaySetOne() { 


     $.fancybox([ 
    { 'href': '../Content/A.jpg', 'title': 'A' }, 
    { 'href': '../Content/B.jpg', 'title': 'B' }, 
    { 'href': '../Content/C.jpg', 'title': 'C' } 
    ], { 
     'padding': 0, 
     'transitionIn': 'none', 
     'transitionOut': 'none', 
     'type': 'image', 
     'changeFade': 0 

    }) 
    }; 

Answer 2

我只是碰到了同樣的問題，希望爲未來的參考解決方案：

，你可以將它們組合成imagesets這樣

<div id="container1"> 
    <img rel="lightbox[container1]" src="asdf1.png" alt="asdf1_image" /> 
    <img rel="lightbox[container1]" src="asdf2.png" alt="asdf2_image" /> 
    <img rel="lightbox[container1]" src="asdf3.png" alt="asdf3_image" /> 
</div> 
<div id="container2"> 
    <img rel="lightbox[container2]" src="asdf4.png" alt="asdf4_image" /> 
    <img rel="lightbox[container2]" src="asdf5.png" alt="asdf5_image" /> 
    <img rel="lightbox[container2]" src="asdf6.png" alt="asdf6_image" /> 
</div> 

當前版本的Lightbox及其文檔使用data-lightbox屬性和d我必須在使用版本2.51的遺留應用程序中執行此操作，該版本仍依賴於rel屬性。