javascript - Modal Lightbox Gallery and Carousel Slider incompatible?

It seems quite challenging to add both the Bootstrap Carousel Slider and Lightbox Gallery in a single page without significant issues.

Problem: When clicking on the lightbox image gallery it opens up the picture gallery and at the same time the Carousel slider image gets hijacked by the gallery images. The culprit seems to be either the classes: .item, img, or .inner-carousel

Is it possible to add both modal lighbox and carousel slider to a single page without any issues?

To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. /

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=";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=";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=";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="">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 12" src="">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 13" src="">
        </div>

        <!-- #image-2 -->
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 21" src="">
        </div>
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 21" src="">
        </div>
        <div class="item" id="image-2">
            <img class="thumbnail img-responsive" title="Image 23" src="">
        </div>   

        <!-- #image-3-->
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 31" src="">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 32" src="">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 33" src="">
        </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(';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(';text=Slide Two');">
                        <center>
                <div class="carousel-title">
                    <h1>Commercial Contruction</h1>
                </div>

                </center>
                    </div>
                <div class="carousel-caption">
                    <h2>Build with a pany you can trust</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url(';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"
});

It seems quite challenging to add both the Bootstrap Carousel Slider and Lightbox Gallery in a single page without significant issues.

Is it possible to add both modal lighbox and carousel slider to a single page without any issues?

To recreate the issue: Click on the image gallery, the modal will pop up, close the window, and now the carousel slider has been replaced by the gallery images. http://jsfiddle/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./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./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./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./600x350/ccc/969696">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 12" src="http://dummyimage./600x600/ccc/969696">
        </div>
        <div class="item" id="image-1">
            <img class="thumbnail img-responsive" title="Image 13" src="http://dummyimage./300x300/ccc/969696">
        </div>

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

        <!-- #image-3-->
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 31" src="http://dummyimage./600x350/449955/FFF">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 32" src="http://dummyimage./600x600/449955/FFF">
        </div>
        <div class="item" id="image-3">
            <img class="thumbnail img-responsive" title="Image 33" src="http://dummyimage./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 pany 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"
});

Share Improve this question edited Jun 13, 2016 at 21:59 asked Jun 13, 2016 at 21:31 ChosenJuan 9614 gold badges26 silver badges61 bronze badges

The interesting part of the javascript code is missing here, but can be found in the fiddle – T. Kuther Commented Jun 16, 2016 at 13:09

Add a ment |

1 Answer 1

Sorted by: Reset to default 9 +50

In the $(".row .thumbnail").click(function() you are querying $('.carousel-inner') which infact matches both carousels' .carousel-inner

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

..and then you call content.empty() and content.append(repoCopy). This does affect both carousels, too, of course.

You need to be more precise here:

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

Here's the updated fiddle: http://jsfiddle/2aasoyej/1/

Udated fiddle that properly disables the interval for the modal carousel, as noted in ments below: http://jsfiddle/2aasoyej/4/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Modal Lightbox Gallery and Carousel Slider incompatible? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)