ファンシーボックス画像ギャラリーとHTMLリスト

Question

私は学校のプロジェクトに取り掛かりました。私はギャラリーを作成するためにファンシーボックスを使用しようとしました。 私の問題は：ギャラリーが作成され、サイドリストメニューのギャラリーのすべての画像を見ることができ、モーダルウィンドウでギャラリーを最初にクリックしたりブラウジングしても、セットの最初のイメージのみが表示され、他のすべてのイメージは表示されません。

私は間違っている可能性がありますので、ここに私のコードです。私はこれらの画像の周りのすべてのリンクを修正するためにJavaScriptを使用

ヘッドスクリプト

​​

一覧ここ

<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> 

されています：ここで

は私のHTML（唯一の重要な部品）です

$(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/

（NB：それはすべてのフィドルでうまくいくようですが、私は同じ変更を加えました（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が行儀方法に大きな影響を与えました。

したがって、ファンシーボックスには影響しない要素を選択するようにルールを更新しました。何 `$のa.attr（「データ・fancybox」、「ギャラリー」）だ

私はCSSを使用するサードパーティ製のプラグインを使用する場合、私はグローバルCSS改造の私の使い方を再考するよ...

Answer 2

data-fancybox属性を同じ値でリンクに追加してギャラリーを作成します。