Galleria – L’album photo JQuery qu’il vous faut

galleria

Un album photo sobre, léger, accessible (no flash) et sans s’embêter avec la gestion des miniatures : behold Galleria. Explications…

Pour faire simple et court, Galleria c’est un script dans votre page, une initialisation à la JQuery et un thème à brancher. Ces thème, il y en a quelques uns mais qui sont payants. Toutefois, le thème de base, « Classic », est gratuit et suffit tout à fait pour une utilisation standard. Il est téléchargeable avec le plugin ici.

Voilà en gros ce qu’on a besoin de faire :

– Inclure JQuery et Galleria :

<script src="[Chemin vers mes scripts JS]/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="[Chemin vers mon installation de Galleria]/galleria-1.2.4.min.js" type="text/javascript"></script>

– Inclure la CSS et le JS de mon thème (attention, il est judicieux de ne pas modifier l’arborescence des fichiers du thème, déjà par ce que ça n’apporte rien mais surtout par ce que si ce n’est pas fait avec beaucoup de précaution galleria peut se casser la figure) :

<link rel="stylesheet" type="text/css" media="all" href="[Chemin vers mon installation de Galleria]/themes/classic/galleria.classic.css" />
<script src="[Chemin vers mon installation de Galleria]/themes/classic/galleria.classic.min.js" type="text/javascript"></script>

– Soit vous avez déjà un .js général qui reprends vos appels les plus courant ainsi que l’initialisation habituelle $(document).ready(function() {} ), soit vous le mettez dans l’entête. Quoi qu’il en soit, il faut y mettre ceci :

Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
// Initialize Galleria
$('#galleria').galleria({
	transition: 'fade'
});

La liste des options de transition sont disponibles ici : http://galleria.aino.se/docs/1.2/options/transition/
Une documentation est fournie là : http://galleria.aino.se/docs/1.2/

Le code de votre page maintenant

Tout ce qu’on a vu plus haut Tout ça agira sur un div nommé et dont le contenu aura la structure suivante :

<div id="galleria">
	<a href="monimage.jpg">
		<img title="Titre de l'image qui s'affichera en gras dans le cadre d'info" alt="Description qui s'affichera en italique dans le cadre d'info" src="monimage.jpg" />
	</a>
	<a href="monimage2.jpg">
		<img title="Titre de l'image qui s'affichera en gras dans le cadre d'info" alt="Description qui s'affichera en italique dans le cadre d'info" src="monimage2.jpg" />
	</a>
</div>

Oui, c’est aussi simple que ça. Personnellement, pour une utilisation en PHP j’utilise la fonctionnalité décrite dans un récent billet : « Parcourir un répertoire et générer des miniatures« , comme ceci :

<div id="galleria">
	<?php
	$directory = "[Chemin de mes images]/";
	$iter = new DirectoryIterator( $directory );
	foreach($iter as $file ) {
		if ( !$file->isDot() && $file->isFile() && strcmp($file->getFilename(), "Thumbs.db") ) {
		// si le fichier existe, et s'il ne s'agit pas du Thumbs.db que windows génère et qu'on aurait rapatrié par erreur
	?>
	<a href="<?php echo $file->getPath()."/".$file->getFilename(); ?>">
		<img title="<?php echo substr($file->getFilename(), 0, -4); ?>" alt="<?php echo substr($file->getFilename(), 0, -4); ?>" src="<?php echo $file->getPath()."/".$file->getFilename(); ?>" />
	</a>
	<?php
		}
	}
	?>
</div>

On notera la façon d’insérer du code php dans du code HTML. Plutot que de faire un grand « echo » et de m’embêter avec les  » en tout genre, j’écrit le code HTML comme si de rien n’était et j’ouvre des là où j’en ai besoin pour mettre du php.

Voilà, vous pouvez voir le résultat de tout ça sur http://www.kicoe.net/#graphisme.

A bientôt !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *