Fancybox圖片庫和HTML列表

Question

我正在學校項目上，我嘗試使用Fancybox創建一個畫廊。 我的問題是：畫廊已創建，您可以在側面列表菜單中看到畫廊的所有圖像，所有功能都可以正常工作，除了無論您第一次點擊什麼圖像或者甚至在模式窗口中瀏覽圖庫「只顯示該組的第一個圖像，而其他所有圖像均未顯示。

我可能會做的事情錯了，所以這裏是我的代碼。

這裏是我的HTML（僅重要部分）：

頭腳本

​​

列表

<ul id="gallerie"> 
    <li> 
     <a> 
      <img src="photoshop/test1.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test2.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test3.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test4.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test5.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test6.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test7.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test8.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test9.png" alt="img test"/> 
     </a> 
    </li> 

    <li> 
     <a> 
      <img src="photoshop/test10.png" alt="img test"/> 
     </a> 
    </li> 
</ul> 

下面是我用它來圍繞這些圖像的每個鏈接修改的javascript：

$(document).ready(updateTags); 
//Calls ↓ 


function updateTags(){ 
    var $LIs = $("#gallerie").children("li"); 

    $LIs.each(doTagUpdate); 

    setupModal(); 
} 
//Calls ↓ 


function doTagUpdate(index, elem){ 
    //caching results for performance optimization 
    var $a = $(this).children("a").eq(0); 
    var $img = $a.children("img").eq(0); 
    var $path = $img.attr("src"); 

    //get filename from img 
    var filename = getFileName($path); 

    //set attributes and properties 
    $a.attr("href", $path); 
    $a.attr("data-fancybox", "gallery"); 
// $a.attr("data-fancybox",filename); 
// $a.addClass("VNgallerie"); 
// $a.attr("rel","gallery"); 
// $a.attr("data-type","images"); 
} 
//Calls ↓ 


function getFileName(path){ 
    var beg = 0; 
    var end = 0; 
    //beg and end exist for understanding purposes only 

    var Fname = ""; 

    //get filename with extension 
    for(var i = path.length ; i >= 0 ; i-=1){ 
     if(path.charAt(i) === '/'){ 
      beg=i+1; 

      Fname = path.substring(beg); 
      break; 
     } 
    } 

    //remove extension 
    for(var i = Fname.length ; i >= 0 ; i-=1){ 
     if(Fname.charAt(i) === '.'){ 
      end=i; 

      Fname = Fname.substring(0, end); 
     } 
    } 

    return Fname; 
} 







function setupModal(){ 
    $.fancybox.defaults.speed = sidemenu_slide_duration * 0.6; 

    $(".VNgallerie").fancybox(
     { 
      'image': { 
       protect:true 
      }, 
      'type': 'image', 
      'helpers': { 
       'title': null 
      } 
     } 
    ); 
} 

這裏是一個JSfiddle：https://jsfiddle.net/Voltra/h8g2hcu7/10/

（注意：似乎一切工作正常，但我做了相同的更改（鏈接到cdn獲得完全相同的版本的jQuery等），它沒有'牛逼固定在我的問題到底出）

Answer 1

首先，感謝大家對你的答案。使用你所有的信息你無法解決我的問題：

當我編輯JSfiddle來添加更多的支持來解決我的問題，我看到它在小提琴中工作正常，所以我瀏覽了每一個樣式表我用，我發現我的錯誤：

*{ 
    padding:0; 
    margin:0; 
    box-sizing: border-box; 
    overflow-x: hidden; 



    font-family: raleway; 
} 

body *{ 
    z-index: 1; 
    float:left; 
} 

修改補白，利潤，箱尺寸和漂浮在一切對的fancybox如何表現產生巨大的影響。

所以我更新的規則，只選擇，我敢肯定，這將不會影響的fancybox的那些元素。

當我使用的是使用CSS的第三方插件，我會重新考慮我的全局CSS MODS的用途......

Answer 2

添加data-fancybox屬性具有相同價值，你的鏈接可用於創建畫廊。