javascript - Modal Lightbox Gallery and Carousel Slider incompatible? -
it seems quite challenging add both bootstrap carousel slider , lightbox gallery in single page without significant issues.
problem: when clicking on lightbox image gallery opens picture gallery , @ same time carousel slider image gets hijacked gallery images. culprit seems either classes: .item, img, or .inner-carousel
is possible add both modal lighbox , carousel slider single page without issues?
to recreate issue: click on image gallery, modal pop up, close window, , carousel slider has been replaced gallery images. 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&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&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&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 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 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 company 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 home best in 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" });
in $(".row .thumbnail").click(function() querying $('.carousel-inner') infact matches both carousels' .carousel-inner
$(".row .thumbnail").click(function(){ var content = $(".carousel-inner"); ..and call content.empty() , content.append(repocopy). affect both carousels, too, of course.
you need more precise here:
$(".row .thumbnail").click(function(){ var content = $("#modal-carousel .carousel-inner"); here's updated fiddle: http://jsfiddle.net/2aasoyej/1/
udated fiddle disables interval modal carousel, noted in comments below: http://jsfiddle.net/2aasoyej/4/
Comments
Post a Comment