带护靴折叠和标签的幻灯片

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