Modal Lightbox Gallery 和 Carousel Slider 不兼容？

Posted 2023-03-06

【中文标题】Modal Lightbox Gallery 和 Carousel Slider 不兼容？

【英文标题】：Modal Lightbox Gallery and Carousel Slider incompatible?

【发布时间】：2016-10-14 10:42:00

【问题描述】：

同时添加 Bootstrap Carousel Slider 和 Lightbox Gallery 在没有重大问题的单个页面中。

问题：点击灯箱图片库会打开图片库，同时轮播滑块图片被劫持通过画廊图像。罪魁祸首似乎是类：.item、img 或 .inner-carousel

是否可以将模态灯箱和轮播滑块添加到单个页面而没有任何问题？

重现问题：点击图片库，会弹出模态框，关闭窗口，现在轮播滑块已被图库图片取代。 http://jsfiddle.net/2aasoyej/

HTML：

<div class="container">
  <div class="row">
    <h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
        <hr>

    <div class="row">

                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 1" href="#"> 
                        <img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&amp;text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
                    </a>
                </div>

                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 2" href="#"> 
                        <img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&amp;text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
                    </a>

                </div>
                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 3" href="#"> 
                        <img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&amp;text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
                    </a>
                </div>
    </div>

    <hr>

  </div>
</div>

    <div class="hidden" id="img-repo">

        <!-- #image-1 -->
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 11" src="http://dummyimage.com/600x350/ccc/969696">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage.com/600x600/ccc/969696">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage.com/300x300/ccc/969696">
        </div>

        <!-- #image-2 -->
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x350/2255EE/969696">
        </div>
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 21" src="http://dummyimage.com/600x600/2255EE/969696">
        </div>
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 23" src="http://dummyimage.com/300x300/2255EE/969696">
        </div>   

        <!-- #image-3-->
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage.com/600x350/449955/FFF">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage.com/600x600/449955/FFF">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage.com/300x300/449955/FFF">
        </div>        

    </div>

<div class="modal" id="modal-gallery" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <button class="close" type="button" data-dismiss="modal">×</button>
          <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
          <div id="modal-carousel" class="carousel">

            <div class="carousel-inner">           
            </div>

            <a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

          </div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>





        <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">

                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');">    
                <center>
                <div class="carousel-title">
                    <h1>Certified General Contractor</h1>
                </div>

                </center>
                </div>

                <div class="carousel-caption">

                    <h2>For all your South Florida construction needs</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');">
                        <center>
                <div class="carousel-title">
                    <h1>Commercial Contruction</h1>
                </div>

                </center>
                    </div>
                <div class="carousel-caption">
                    <h2>Build with a company you can trust</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');">

                    <center>
                <div class="carousel-title">
                    <h1>Home Renovation</h1>
                </div>

                </center>
            </div>
                <div class="carousel-caption">
                    <h2>Remodel your home with the best in the field</h2>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="icon-prev" style="font-size:70px;"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="icon-next" style="font-size:70px;"></span>
        </a>

JS：

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$('.carousel img').each(function() 
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css(
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  );
  $(this).remove();
);

$(window).on('resize', function ()
  $wHeight = $(window).height();
  $item.height($wHeight);
);

$('.carousel').carousel(
  interval: 6000,
  pause: "false"
);

【问题讨论】：

这里缺少javascript代码的有趣部分，但可以在小提琴中找到

【参考方案1】：

在 $(".row .thumbnail").click(function() 您正在查询 $('.carousel-inner') 实际上两者都匹配轮播的.carousel-inner

$(".row .thumbnail").click(function()
    var content = $(".carousel-inner");

..然后你调用 content.empty() 和 content.append(repoCopy)。当然，这也会影响两个轮播。

你需要在这里更精确：

$(".row .thumbnail").click(function()
    var content = $("#modal-carousel .carousel-inner");

这是更新后的小提琴：http://jsfiddle.net/2aasoyej/1/

正确禁用模式轮播间隔的更新小提琴，如下面的 cmets 所述：http://jsfiddle.net/2aasoyej/4/

【讨论】：

感谢您的回答，但是您刚刚创建了另一个问题。查看您提供的更新小提琴，当您单击图像时，它应该以画廊模式弹出，但它会以轮播模式弹出。图片库现在变成了幻灯片。

你原来的小提琴在这里做的完全一样，这是可以预料的，因为你只是在一个模式窗口中包装了“画廊”轮播。您希望它看起来如何？

轮播应该自动播放图片的幻灯片，但是图片库应该打开一个模态图像，您可以滚动浏览，但不会自动播放（即不是像轮播那样的幻灯片）

啊，我明白了。我更新了上面的小提琴。解决方案是对#myCarousel 轮播也使用 id 而不是 .carousel 类。

谢谢！我赞扬你的解决方案，这正是我想要完成的。 :)