featherlight.jsギャラリーにサムネイル

Question

サムネイルベースのメディアビューアを作成するには、丸で囲んでいます（私の例ではイメージを使用していますが、ビデオは元の場所に置くことができます）。メイン画像へのサムネイルは正常に機能しますが、「メイン画像をクリックして大きな画像を見る」を追加したかったのです。これは機能します。しかし、理想的にはサムネイルから大きなサイズの画像を切り抜くための前/次のボタンが必要です。私は、サムネイルをクリックすると、フェザリングオーバーレイをトリガーしたくありません。ここで

は私jsfiddleである：ここで参考のためhttps://jsfiddle.net/2oux4tcw/4/

は私のJSで、HTMLとCSS

HTML

 <div class="largeone" id="bigpic"> 
     <p class="info">Click a thumbnail</p> 
    </div> 
    <div class="thumbscon"> 
     <ul> 
      <li><img id="img1" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/238943/fff.png&text=Green+Thumbnail" data-largeone="https://dummyimage.com/600x600/238943/fff.png&text=Green+Largeg" alt="Green" title="Green Image"></li> 
      <li><img id="img2" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/992323/fff.png&text=Red+Thumbnail" data-largeone="https://dummyimage.com/600x600/992323/ffffff.png&text=Red" alt="Red" title="Red Image"></li> 
      <li><img id="img3" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/232399/fff.png&text=Blue+Thumbnail" data-largeone="https://dummyimage.com/600x600/232399/ffffff.png&text=Blue" alt="Blue" title="Blue Image"></li> 
     </ul> 
    </div> 

CSS

.largeone{background: #dedede; border: 1px solid #555; margin-bottom: 12px; height: 600px; width: 600px;} 
.thumbscon ul{text-align: center; width: 600px;} 
.thumbscon li{display: inline-block; margin-right: 6px; } 
p.info{margin: 40% 35%; display: inline-block; width: 30%; text-align: center;} 

JS

var showLargeImage = function(elementId){  
    var el = jQuery("#"+elementId); 
    var newMedia = ""; 
    if(el){  
     var imgsrc  = el.attr("data-largeone"); //large image source 
     var imgtitle = el.attr("title"); 
     var imgalt  = el.attr("alt"); 
     newMedia = jQuery("<img>",{src: imgsrc,title:imgtitle,alt:imgalt,id:"bigimage",class:"galleryitem"}) 
     newMedia.attr("data-featherlight",imgsrc); 
     newMedia.attr("data-featherlight-gallery",imgsrc); 
    } 

    if(newMedia.length >0){ 
     jQuery("#bigpic").html(newMedia); 
    } 
} 

jQuery(document).ready(function(){ 

     jQuery(document).on("click","img.thumb",function(e){ 
      e.preventDefault(); 
      showLargeImage(jQuery(this).attr("id")); 
     }); 

     jQuery(".galleryitem").featherlightGallery(); 

    }); 

本体のみの画像からギャラリーアクションをトリガーするが、サムネイルからデータ-largeone画像を表示する方法についての任意のポインタ？

Answer 1

あなたが正確に何を望んでいるのかわかりませんが、隠されたフェザーライトギャラリーを作成して、メイン画像のクリックを適切な隠しサムネイルにリダイレクトできませんでしたか？