Non è compatibile la Galleria di Lightbox modali e il cursore a scorrimento di carosello?

Sembra abbastanza impegnativo aggiungere sia il Bootstrap e Lightbox Gallery in una singola pagina senza problemi significativi.Non è compatibile la Galleria di Lightbox modali e il cursore a scorrimento di carosello?

Problema: Cliccando sul lightbox galleria di immagini si apre la pinacoteca e al tempo stesso l'immagine del carosello cursore ottiene dirottato dalle immagini della galleria. Il colpevole sembra essere o classi: .item, img, o .inner-carosello

è possibile aggiungere sia Lighbox modale e cursore carosello ad una singola pagina senza problemi ?

per ricreare il problema: Fare clic sulla galleria di immagini, il modal si aprirà, chiudere la finestra, e ora il dispositivo di scorrimento carosello è stato sostituito dalle immagini della galleria. 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" 
});

fonte

2016-06-13 ChosenJuan

La parte interessante del codice javascript manca qui, ma può essere trovata nel violino –

Negli $ ("fila .thumbnail.") Clicca (function() si sta eseguendo la query . $ ('. carousel-inner') che corrisponde perfettamente a entrambi i caroselli '.carousel-inner

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

..e quindi si chiama content.empty() e content.append (repoCopy). Ciò influisce anche su entrambi i caroselli, ovviamente.

Devi essere più precisi qui:

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

Ecco il violino aggiornamento: http://jsfiddle.net/2aasoyej/1/

Udated violino che disabilita correttamente l'intervallo per la giostra modali, come notato nei commenti qui sotto: http://jsfiddle.net/2aasoyej/4/

fonte

2016-06-16 12:38:45

Grazie per la risposta, tuttavia hai appena creato un altro problema. Controlla il violino aggiornato che hai fornito, quando fai clic sull'immagine dovrebbe apparire in modalità Galleria, ma appare in modalità Carousel. La galleria di immagini ora è trasformata in una presentazione. – ChosenJuan

Il tuo violino originale fa esattamente lo stesso qui, il che è normale quando avvolgi il carosello della "galleria" in una finestra modale. Come ti aspetteresti che assomigli esattamente? –

Il carosello dovrebbe riprodurre automaticamente una presentazione di immagini, ma la galleria di immagini dovrebbe aprire un'immagine modale che è possibile scorrere, ma non verrà riprodotta automaticamente (ad esempio non una presentazione come la giostra) – ChosenJuan

Non è compatibile la Galleria di Lightbox modali e il cursore a scorrimento di carosello?

risposta

Problemi correlati