Bootstrap Image Gallery

Bootstrap Image Gallery è un'estensione per Bootstrap di blueimp Gallery.

Per installare Bootstrap Image Gallery è necessario incorporare nella pagina:

I CSS: blueimp-gallery.css e bootstrap-image-gallery.css dopo il CSS principale di Bootstrap
I Javascript: jquery.blueimp-gallery.js e bootstrap-image-gallery.js dopo il JS di Bootstrap


//nella head
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.image-gallery/3.1.0/css/bootstrap-image-gallery.min.css">
...
//dopo il footer
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.image-gallery/3.1.0/js/bootstrap-image-gallery.min.js"></script>

Occorre quindi aggiungere il codice della finestra modale che conterrà la foto, meglio se dopo il footer

Tip: posso disattivare la finestra modale in stile Bootstrap e attivare la visualizzazione di default di blueimp settando l'attributo data-use-bootstrap-modal="false".


<div id="blueimp-gallery" class="blueimp-gallery"  data-use-bootstrap-modal="false">
	...
</div>

Sarà possibile creare una galleria con immagini e collegamenti. Nei link l'attributo data-gallery attiverà lo script.


<div id="links">
    <a href="img/example.jpg" title="Field" data-gallery>
        <img src="img/example.jpg" class="img-thumbnail" alt="Field">
    </a>
    <a href="img/example2.jpg" title="Tulips" data-gallery>
        <img src="img/example2.jpg" class="img-rounded" alt="Tulips">
    </a>
</div>

‹ › ×