javascript - 带有 Bootstrap 折叠和选项卡的幻灯片

Question

我正在尝试使用 Bootstrap 的 JavaScript 折叠和选项卡制作幻灯片。这个想法是有一个缩略图列表，可以单击这些缩略图来显示折叠中图片的放大图。

我希望能够单击第一个缩略图来打开折叠，其中第一个缩略图放大图片。单击第二个缩略图时，第一个放大的图片应替换为第二个图片。

我现在遇到的问题是放大的图像显示在列表中，而不是相互替换。

这是当前问题的一个 fiddle :http://jsfiddle.net/g7nrt9b4/

fiddle 代码:

<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. 向您的 img 标记添加一些类(下例中的 show-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