Mosaic Gallery jQuery plugin – Generation d’une mosaique d’image

Ce plugin jQuery vous permet de transformer une liste d’image en une mosaïque d’image. Les images changent les unes après les autres selon un temps défini.

Exemple d’une mosaïque

Installation du plugin

Vous devez d’abord include le plugin et jQuery lui même.

<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery.mosaic-gallery-0.3.min.js'></script>

Le fichier css premettra de présenter les items sous forme de mosaïque.

<link rel="stylesheet" type="text/css" media="all" href="styles.css" />

Les données de votre mosaïque doivent être présentées par une liste d’item classique.

<ul id="mosaic-gallery">
  <li id="img1"><img src="images/img1.jpg" alt="" /></li>
  <li id="img2"><img src="images/img2.jpg" alt="" /></li>
  <li id="img3"><img src="images/img3.jpg" alt="" /></li>
  <li id="img4"><img src="images/img4.jpg" alt="" /></li>
  <li id="img5"><img src="images/img5.jpg" alt="" /></li>
  <li id="img6">Un peu de texte</li>
  <li id="img8"><img src="images/img7.jpg" alt="" /></li>
  <li id="img9"><img src="images/img8.jpg" alt="" /></li>
  <li id="img10"><img src="images/img9.jpg" alt="" /></li>
  <li id="img11"><img src="images/img10.jpg" alt="" /></li>
  <li id="img12"><img src="images/img11.jpg" alt="" /></li>
  <li id="img13"><img src="images/img12.jpg" alt="" /></li>
</ul>

Execution automatique

$(document).ready(function()
{
	var m = $("#mosaic-gallery").jdMosaicGallery(
	{
		autoStart : true,
		nbImagesInMosaic : 6,
		loop : false
	});
});

Execution differée

$(document).ready(function()
{
	var m = $("#mosaic-gallery").jdMosaicGallery(
	{
		autoStart : false,
		nbImagesInMosaic : 6,
		loop : false
	});
	...
	m.startShow();
});


Options d'initialisation

Paramètre Valeur par défaut Commentaire
loop true Tourne en boucle.
loopTime 2000 Temps de passage d'une vignette à la suivante.
nbImagesInMosaic 6 Nombre d'image à afficher. Ce nombre doit être au moins supérieur au nombre d'items dans votre liste plus 1, pour avoir au moins une vignette en "background" à switcher.
autoStart false Démarrer automatiquement au chargement de la page.
debug false Affiche du debug.

Versions

  • 0.3 | Corrections de bug Renomage du plugin Ajout d'un mode debug   » Télécharger
  • 0.2 | Correction dans IE   » Télécharger
  • 0.1 | Version Initiale
  • Chuck

    le script n’est pas fonctionnel sur internet explorer pourquoi?

    • jojo

      Effectivement, il y avait un problème dans IE, ce dernier est corrigé dans la version 0.2.

  • Pingback: Nouvelle version de Mosaic Gallery | Jordi/Dosne()

  • Clément

    Bonjour, c’est possible de modifier l’ordre de changement des images ? (au lieu de gauche à droite et de haut en bas > en aléatoire ) Merci !

    • JiDaii

      Salut, je viens de vois ce message, dsl. Toujours intéréssé par cette modification ?

  • cici123

    Bonjour ! Je serais intéressée par 2 options supplémentaires : ordre aléatoire de changement mais aussi façon « cascade » genre en diagonale du haut gauche au bas droit. merci pour ce JS en tout cas :)

    • cici123

      Et aussi comment faire un effet d’opacité tout autour de la mosaïque ? Je veux utiliser comme mur d’images sur un fond de page

  • Pingback: Nouvelle version de jQuery Mosaic Gallery Plugin (0.3) | Jordi/DosneJordi/Dosne()