Modalna galeria Lightbox i karuzela są niekompatybilne?

Wydaje się dość trudne dodawanie Bootstrap Carousel Slider i Lightbox Gallery na jednej stronie bez znaczących problemów.Modalna galeria Lightbox i karuzela są niekompatybilne?

Problem: Po kliknięciu na schowka galerii fotograficznej otwiera galerię zdjęć i w tym samym czasie Karuzela suwak obraz zostaje porwany przez obrazy w galerii. Winowajcą wydaje się być klasy: .Item, img lub .inner-karuzela

to możliwe, aby dodać zarówno modalne lighbox i suwak karuzela na jednej stronie bez żadnych problemów ?

Aby odtworzyć ten problem: Kliknij na galerię, modalna pojawi się, zamknij okno, a teraz suwak karuzela została zastąpiona przez obrazy w galerii. 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" 
});

Źródło

2016-06-13 ChosenJuan

Nie ma tu interesującej części kodu javascript, ale można ją znaleźć w skrzypcach –

W $ ("rząd .thumbnail"). Click (function() jesteś odpytywanie . $ ('. carousel-inner'), które infact pasuje do obu karuzel. 'carousel-inner

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

..i następnie zadzwonić content.empty() i content.append (repoCopy). Oczywiście ma to również wpływ na obie karuzele.

Musisz być bardziej precyzyjny tutaj:

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

Oto zaktualizowana skrzypce: http://jsfiddle.net/2aasoyej/1/

Udated skrzypce że właściwie wyłącza interwał modalnego karuzeli, jak zauważono w komentarzach poniżej: http://jsfiddle.net/2aasoyej/4/

Źródło

2016-06-16 12:38:45

Dzięki za odpowiedź, ale właśnie stworzyłeś inny problem. Sprawdź zaktualizowane skrzypce, które podałeś, klikając obraz, który powinien pojawić się w trybie galerii, ale pojawia się w trybie karuzeli. Galeria obrazów została teraz przekształcona w pokaz slajdów. – ChosenJuan

Twoje oryginalne skrzypce robią dokładnie to samo, czego można się spodziewać, po prostu owinąć karuzelę "galerii" w modalne okno. Jak byś się spodziewał, że będzie wyglądał dokładnie? –

Karuzela powinna automatycznie odtwarzać pokaz slajdów ze zdjęciami, ale galeria obrazów powinna otwierać obraz modalny, który można przewijać, ale nie będzie odtwarzany automatycznie (tzn. Nie będzie pokazem slajdów, takim jak karuzela). – ChosenJuan

Modalna galeria Lightbox i karuzela są niekompatybilne?

Odpowiedz

Powiązane problemy