C'est une extension du plugin Modals destinée à créer de beaux effets de navigation avec des images. Au programme : Slideshow
Belles transitions Navigation à la souris Navigation au clavier
Passage en mode "plein écran"
Allez vite voir la démo
La mise en oeuvre n'est pas bien difficile, d'autant que la documentation est bien faite et respecte les principes de celle de
Bootstrap. Il faut aller chercher les fichiers sur le site.
Je vous propose un exemple, toujours avec les tigres (toujours un clic sur l'image)
Voici le code de cette page :
Code : HTML
<!DOCTYPE HTML>
<html> <head>
<meta charset="utf-8"> <title>Les Tigres</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"
type="text/css">
<!--[if lt IE 7]><link rel="stylesheet"
href="http://blueimp.github.com/cdn/css/bootstrap- ie6.min.css"><![endif]-->
<link rel="stylesheet" href="../bootstrap/css/bootstrap-image- gallery.min.css">
<style> body {
} h1 { margin:20px 0 20px 20px; text-align:center; } </style> </head> <body> <header>
<h1>Une petite démo du plugin "Bootstrap Image Gallery"</h1> </header>
<div class="container-fluid">
<div id="modal-gallery" class="modal modal-gallery hide fade">
<div class="modal-header"> <a class="close" data- dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="modal-image"></div>
</div>
<div class="modal-footer"> <a class="btn modal-download"
target="_blank"><i class="icon-download"></i> Télécharger</a>
<a class="btn btn-success modal-play modal-slideshow" data- slideshow="5000"><i class="icon-play icon-white"></i> Diaporama</a>
<a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Précédent</a>
<a class="btn btn-primary modal-next">Suivant <i class="icon- arrow-right icon-white"></i></a> </div>
</div>
<div id="gallery" data-target="#modal-gallery" data-toggle="modal- gallery">
<ul class="thumbnails">
<li class="span2"> <a rel="gallery" href="images/tg1.jpg"
title="Tigre 1"><img src="images/tg1.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg2.jpg"
title="Tigre 2"><img src="images/tg2.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg3.jpg"
title="Tigre 3"><img src="images/tg3.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg4.jpg"
title="Tigre 4"><img src="images/tg4.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg5.jpg"
title="Tigre 5"><img src="images/tg5.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg6.jpg"
title="Tigre 6"><img src="images/tg6.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg7.jpg"
title="Tigre 7"><img src="images/tg7.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg8.jpg"
title="Tigre 8"><img src="images/tg8.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg9.jpg"
title="Tigre 9"><img src="images/tg9.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg10.jpg"
title="Tigre 10"><img src="images/tg10.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg11.jpg"
title="Tigre 11"><img src="images/tg11.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg12.jpg"
title="Tigre 12"><img src="images/tg12.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg13.jpg"
title="Tigre 13"><img src="images/tg13.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg14.jpg"
title="Tigre 14"><img src="images/tg14.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg15.jpg"
title="Tigre 15"><img src="images/tg15.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg16.jpg"
title="Tigre 16"><img src="images/tg16.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg17.jpg"
title="Tigre 17"><img src="images/tg17.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg18.jpg"
title="Tigre 18"><img src="images/tg18.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg19.jpg"
<li class="span2"> <a rel="gallery" href="images/tg20.jpg"
title="Tigre 20"><img src="images/tg20.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg21.jpg"
title="Tigre 21"><img src="images/tg21.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg22.jpg"
title="Tigre 22"><img src="images/tg22.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg23.jpg"
title="Tigre 23"><img src="images/tg23.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg24.jpg"
title="Tigre 24"><img src="images/tg24.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg25.jpg"
title="Tigre 25"><img src="images/tg25.png"></a> </li>
<li class="span2"> <a rel="gallery" href="images/tg26.jpg"
title="Tigre 26"><img src="images/tg26.png"></a> </li>
</ul>
</div>
<br> </div> </div>
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="http://blueimp.github.com/JavaScript-Load-Image/load- image.min.js"></script> <script src="../bootstrap/js/bootstrap-image- gallery.min.js"></script> </body> </html>
Il faut déclarer la feuille de style du plugin :
Code : HTML
<link rel="stylesheet" href="../bootstrap/css/bootstrap-image- gallery.min.css">
Ensuite la mise en œuvre de la fenêtre modale suit exactement les principes du plugin Modals :
Code : HTML
<div id="modal-gallery" class="modal modal-gallery hide fade">
<div class="modal-header"> <a class="close" data- dismiss="modal">×</a>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="modal-image"></div>
</div>
<div class="modal-footer"> <a class="btn modal-download"
target="_blank"><i class="icon-download"></i> Télécharger</a>
<a class="btn btn-success modal-play modal-slideshow" data- slideshow="5000"><i class="icon-play icon-white"></i> Diaporama</a>
<a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Précédent</a>
<a class="btn btn-primary modal-next">Suivant <i class="icon- arrow-right icon-white"></i></a> </div>
</div>
On place les images dans des balises <a> avec la référence rel="gallery" et le lien des images (une miniature pour le lien et l'image normale en cible):
<a rel="gallery" href="images/tg1.jpg" title="Tigre 1"><img
src="images/tg1.png"></a>
Il faut aussi faire appel, en plus de jQuery et Bootstrap à deux libraires Javascript :
Code : HTML
<script src="http://blueimp.github.com/JavaScript-Load-Image/load- image.min.js"></script>
<script src="../bootstrap/js/bootstrap-image- gallery.min.js"></script>
J'ai utilisé la classe thumbnails pour bien répartir les images.