Manuel Roccon

ICT & Cyber Security Specialist

Bootstrap 4 – lightbox 2 e thumbnails in carousel

Carousel è il componente per permettere lo slideshow delle immagini. Il componente non è però fornito la funzione di anteprima delle immagini e senza anteprima di navigazione.

https://getbootstrap.com/docs/4.0/components/carousel/

Lightbox 2

Un componente che ho usato molto per questo scopo è LIGHTBOX 2.

https://lokeshdhakar.com/projects/lightbox2/#getting-started

Il componente prevede di inserire un tag <a> tra l’immagine in cui si desidera l’anteprima, purtroppo eseguendo questo il componente smette di funzionare.

Per risolvere la cosa è molto semplice, è necessario sostituire il <div> che racchiude l’immagine con un tag <a> mantenendo tutte le classi. A questo punto i componenti riprenderanno a funzionare entrambi.

Qui sotto il codice originale:

<!--Carousel Wrapper-->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    
    <!--Slides-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="carousel-img-container d-flex justify-content-center">
                <img class="d-block w-100" src="path_to_file" alt="First slide">
             </div>
         </div>
         <div class="carousel-item">
             <div class="carousel-img-container d-flex justify-content-center">
                 <img class="d-block w-100" src="path_to_file" alt="Second slide">
             </div>
         </div>
     </div>
    <!--/.Slides-->
    
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->

</div>

Questo è il codice con integrato lightbox:

<!--Carousel Wrapper-->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    
    <!--Slides-->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <a href="path_to_file" data-lightbox="roadtrip" class="carousel-img-container d-flex justify-content-center">
                <img class="d-block w-100" src="path_to_file" alt="First slide">
            </a>
        </div>
        <div class="carousel-item">
            <a href="path_to_file" data-lightbox="roadtrip" class="carousel-img-container d-flex justify-content-center">
                <img class="d-block w-100" src="path_to_file" alt="Second slide">
             </a>
         </div>
    </div>
    <!--/.Slides-->
    
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->

</div>

A questo punto i 2 componenti funzioneranno perfettamente assieme.

Thumbnail

A questo punto avevo necessità di integrare anche delle anteprime cliccabili.

Qui sotto una variante del componente originale con aggiunta le anteprime navigabili:

HTML

<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
    <!--Slides-->
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-77.jfif" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-74.jfif" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-78.jfif" alt="Third slide">
        </div>
    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->
    <ol class="carousel-indicators">
        <li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-77.jfif" class="img-fluid"></li>
        <li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-74.jfif" class="img-fluid"></li>
        <li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252820/1320x580-78.jfif" class="img-fluid"></li>
    </ol>
</div>
<!--/.Carousel Wrapper-->

CSS

.carousel-thumbnails .carousel-indicators img {
    max-width: 100px;
    height: 50px;
    overflow: hidden;
    display: block;
}


.carousel-thumbnails .carousel-indicators li {
    height: auto;
    max-width: 100px;
    width: 100px;
    border: none;
	box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
	
	&.active {
		border-bottom: 4px solid #fff;
	}
}

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.