帶護靴摺疊和標籤的幻燈片

Question

我想用Bootstrap的JavaScript摺疊和標籤製作幻燈片。這個想法是有一個縮略圖列表，可以點擊以顯示崩潰中的圖片。

我希望能夠點擊第一個縮略圖打開第一張縮略圖放大照片的崩潰。當第二個縮略圖被點擊時，第一張放大的圖片應該被替換爲第二張。

現在我遇到的問題是，炸燬的圖像顯示在彼此頂部的列表中，而不是相互替換。

下面是本期小提琴：http://jsfiddle.net/g7nrt9b4/

代碼爲小提琴：

<div class="panel-body"> 
    <ul class="thumb-list"> 
    <li><a href="#" data-toggle="collapse" data-target="#collapseA1" aria-expanded="false" aria-controls="collapseA1"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li> 
    <li><a href="#" data-toggle="collapse" data-target="#collapseA1" aria-expanded="false" aria-controls="collapseA1"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li> 
    </ul> 

    <div class="collapse pic-theater" id="collapseA1"> 
    <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /> 
    </div> 
    <div class="collapse pic-theater" id="collapseA2"> 
    <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /> 
    </div> 
</div> 

提前感謝！

Answer 1

在這裏你去：

1. 添加一些類（show-img在下面的例子中）到你的img標籤，這樣你就可以追加click事件給他們。

2. 添加一些圖像加載指示器，以通知用戶點擊縮略圖時發生了某些事情（例如，僅使用blockUI）。

而且我們已經準備好了：

HTML：

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title"> 
      Title. 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <ul class="thumb-list"> 
      <li><a href="#" class="show-img"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li> 
      <li><a href="#" class="show-img"><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></a></li> 
      <!-- more images ... --> 
     </ul> 

     <div id="collapse" class="collapse pic-theater"> 
      <div class="block"> 
       <img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /> 
      </div> 
     </div> 


    </div> 
</div> 
<img src="https://amitchandnz.files.wordpress.com/2010/08/please_wait.gif?w=614" id="spinner" /> 

jQuery的：

// don't want to reload current image if it has been already loaded, so make variable for that: 
var loaded = false, 
    // lastclicked is the item that was last clikced. This is just a variable now, so we do not have to repeat 'var': 
    lastClicked, 
    // set the collapse element as variable, so we have easir to call it later on: 
    collapseEl = $('#collapse'); 

// method that specify what should happen when the thumbnail is clicked: 
$('.show-img').click(function(){ 
    // class 'current' is to define if the thumbnail was clicked as last, if so, collapse the panel, if not, load image of the thumbnail that was just clicked 
    $('.thumb-img').removeClass('current'); 
    $(this).find('.thumb-img').addClass('current');   
    if(this != lastClicked){ 
     // the thumbnail wasn't clicked last time: 
     lastClicked = this; 
     loaded = false; 
    }else{ 
     // the thumbnail was clicked last time, so we want to collapse the panel instead of reloading image again: 
     collapseEl.collapse('toggle'); 
     loaded = true; 
    } 
    if(!loaded){ 
     // show the panel as there's another item loaded inside: 
     collapseEl.collapse('show'); 
     // set that this item is being loaded: 
     loaded = true; 
     // fetch the image source from the thumbnail 'href' attribute: 
     var img = $(this).find('.thumb-img').attr('src'); 
     // notify the user that something is going on while loading the image: 
     $('.block').block({ 
      message : $('#spinner'), 
      css : { 
       background : 'none', 
       border : 'none' 
      } 
     }); 
     // load the image: 
     $('.theater-img').load(function(){ 
      // set image as loaded, so the click would not repeat loading process (could be skipped if the images are cached): 
      loaded = false; 
      // remove loading indicator: 
      $('.block').unblock(); 
      // added [ '?'+ (new Date).getTime() ] - to simulate different images. So each new (except the one that has a 'current' class) thumbnail click tends like it's a new image: 
     }).attr('src', img + '?'+ (new Date).getTime()); 
    } 

}); 

// when panel is collapsed, remove class 'current' from the img, so that we know it's not displayed: 
collapseEl.on('hide.bs.collapse', function() { 
    $('.thumb-img').removeClass('current'); 
}) 

DEMO