Splash par xuxu

Splash est un script permettant d'afficher en plein écran une image.
Pas de fioritures dans ce dernier, il n'est pas nécessaire d'inclure les librairies prototype, et JQuery.

Comment ça marche ?

  • d'abord inclure le fichier javascript entre les balises <head> </head>
<script type="text/javascript" src="/include/js/splash.image/splash.image.js"></script>
  • Ensuite le fichier de styles qui va bien
<link type="text/css" rel="stylesheet" href="/include/js/splash.image/splash.image.css" />

Sur le lien de chaque image, ajouter l'attribut rel et donner lui la valeur "splash.image". 

<a href="images/pretty_china_01.jpg" title="Voir cette image en plein écran" rel="splash.image">
	<img src="images/thumbz/pretty_china_01.jpg" />
</a>

Voici le résultat

Description de la photo

Depuis la version 1.8, une description de l'image sera visible juste en dessous de celle-ci. Pour cela il suffit de renseigner l'attribut title. 

<a href="images/pretty_china_01.jpg" title="Voici la description de cette photo, un superbe paysage de Chine :)" rel="splash.image|title">
	<img src="images/thumbz/pretty_china_01.jpg" />
</a>
<a href="images/pretty_china_02.jpg" title="Voici une autre description d'une autre photo, c'est vraiment beau la Chine :)" rel="splash.image|title">
	<img src="images/thumbz/pretty_china_02.jpg" />
</a>
<a href="images/pretty_china_05.jpg" title="Une dernière pour la route ^^" rel="splash.image|title">
	<img src="images/thumbz/pretty_china_05.jpg" />
</a>

Voici le résultat

Regrouper les images

Vous pouvez regrouper les images en modifiant l'attribut rel.
Il suffit pour cela de lui attribuer la valeur "splash.image|nom_du_groupe".
Au survol de l'image en plein écran, vous pourrez apercevoir les flèches qui vous permettront de naviguer d'images en images.

Depuis la version 1.9, vous pouvez utiliser la valeur "splash" en lieu et place de "splash.image".
De plus, vous pouvez aussi prendre en charge les rels de valeur "lightbox". 

<a href="images/pretty_china_01.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_01.jpg" />
</a>
	<a href="images/pretty_china_02.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_02.jpg" />
</a>
<a href="images/pretty_china_06.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_06.jpg" />
</a>
<a href="images/pretty_china_06.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_06.jpg" />
</a>
<a href="images/pretty_china_07.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_07.jpg" />
</a>
<a href="images/pretty_china_11.jpg" title="Voir cette image en plein écran" rel="splash.image|groupe1">
	<img src="images/thumbz/pretty_china_11.jpg" />
</a>

Voici le résultat

Groupe d'image 1 :

Groupe d'image 2 :

Mode "slides"

En regroupant les images, vous activez aussi la fonction "slides".
En effet pour les paresseux, en plus des flèches de déplacement, vous aurez noté la présence d'une autre flèche au survol de l'image en plein écran, dans la partie basse de celle-ci. Cliquez sur cette dernière afin de lancer le slide.

Voir le slide

Raccourcis claviers

Durant l'affichage du plein écran, vous pouvez faire défiler les images, démarrer/arrêter le mode diaporama, et sortir du mode plein écran, à l'aide des touches de claviers suivantes :

  • Page up, flèche gauche, - : Image précédente.
  • Page down, flèche droite, + : Image suivante.
  • Entrée, espace, flèche bas : Démarrer/arrêter le slide.
  • Esc, Suppr, flèche haut, x : Sortir du plein écran.

Lancement automatique

Depuis la version 1.91, vous pouvez lancer automatiquement le diaporama.
Il suffit de remplir les variables suivantes :

  • splash_auto_start = true si autostart activé sinon mettre à false
  • splash_auto_start_rank = indice de l'image qui doit être lancée
  • splash_auto_start_group = par défaut est égale à 'splash' (pour les images non groupées), sinon mettre le nom du groupe de l'image

Bonus

Depuis la version 1.9, vous pouvez afficher une image en "background" à la place du fond noir.
Pour cela il suffit dans le fichier "splash.image.js" de mettre le flag "set_bg" à "true" et de mettre dans le repertoire du script l'image désirée et de la renommer en "bg.gif".

Télécharger

La version actuelle est la 1.91 (cliquez ici pour voir le change log).

Versions précédentes

Précisions

Des réclamations

Le service après vente se trouve ici, sinon vous pouvez toujours vous rendre sur le billet dédié à ce script.

Creative Commons License