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>
[html]<script type= »text/javascript » src= »/include/js/splash.image/splash.image.js »></script>[/html]
- Ensuite le fichier de styles qui va bien
[html]<link type= »text/css » rel= »stylesheet » href= »/include/js/splash.image/splash.image.css » />[/html]
Sur le lien de chaque image, ajouter l’attribut rel et donner lui la valeur « splash.image ».
[html]<a href= »/ressources/javascript/splash.image/images/pretty_china_01.jpg » title= »Voir cette image en plein écran » rel= »splash.image »>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_01.jpg » />
</a>[/html]
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.
[html]<a href= »/ressources/javascript/splash.image/images/pretty_china_01.jpg » title= »Voici la description de cette photo, un superbe paysage de Chine 🙂 » rel= »splash.image|title »>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_01.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/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= »/ressources/javascript/splash.image/images/thumbz/pretty_china_02.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_05.jpg » title= »Une dernière pour la route ^^ » rel= »splash.image|title »>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_05.jpg » />
</a>[/html]
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 ».
[html]<a href= »/ressources/javascript/splash.image/images/pretty_china_01.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_01.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_02.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_02.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_06.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_06.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_06.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_06.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_07.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_07.jpg » />
</a>
<a href= »/ressources/javascript/splash.image/images/pretty_china_11.jpg » title= »Voir cette image en plein écran » rel= »splash.image|groupe1″>
<img src= »/ressources/javascript/splash.image/images/thumbz/pretty_china_11.jpg » />
</a>[/html]
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
- Télécharger l’archive Splash v1.9
- Télécharger l’archive Splash v1.81
- Télécharger l’archive Splash v1.8
- Télécharger l’archive Splash v1.7
Précisions
- Les superbes gifs inclus dans cette archive ont été généré sur Ajaxload.
- Ce script est sous licence Creative Commons Attribution-Share Alike 3.0 License.
Des réclamations
Vous pouvez vous rendre sur le billet dédié à ce script ou m’envoyer un mail à xuxu.fr[at]gmail.com.
Salut,
Très bon à mon goût et simple à implémenter.
Petit bémol pour moi: j’aurais voulu que ça redimensionne les images lorsqu’on les visualisent pour pas avoir à dérouler si elles sont d’importante définition.
J’ai donc rapidement fait ces deux modifications, si ça peut donner des idées pour de prochaines évolutions:
Dans le JS, dans la fonction image_display():
//Resize du container de l’image
if ((img.width > 800) || (img.height > 600))
{
if ((img.width – 800) > (img.height – 600))
{
img.height = ((img.height * ((800 / img.width) * 100)) / 100);
img.width = 800;
}
else
{
img.width = ((img.width * ((600 / img.height) * 100)) / 100);
img.height = 600;
}
}
obj_content.style.width = img.width+’px’;
obj_content.style.height = img.height+’px’;
Puis dancs le CSS, dans l’id #image_content img, juste ajouter:
max-width: 800px;
max-height: 600px;
Merci encore pour ce beau script, il m’a sauver la mise.
Je comprend pas trop la mention en bas de la première image « Voir cette image en plein écran » ce n’est pas cliquable le navigateur passe-t-il en plein écran ?
La proposition de Omnislash me paraît sympa aussi cela pourrait être mis en paramètre en début de déclaration non ?
Bonjour,
je trouve ce script super, mais je n’arrive pas à le mettre en place.
Quand je le test sur frontpage, ça fonctionne, mais que je le charge il m’affiche la photo dans une nouvelle page web au lieu de le mettre en popup.
Auriez-vous une explication ?
Merci.
Bonjour,
Je vous remercie pour ce script, il est extra.
Néanmoins j’ai rencontré des difficultés sous IE8 pour que le cadre s’adapte à la taille de la photo.
Ne connaissant pas trop le JS et le CSS, j’ai dû classer les photos par taille pour contourner le pb.
Explications:
D’abord les plus hautes (de la moins large à la plus large), puis les plus larges (de la plus haute à la moins haute). Un vrai casse tête quand toutes les photos font pas la même taille.
Exemples:
450*800 (où 800 est la hauteur)
533*800
600*800
600*650
800*600
600*600
800*500
Voila pour ceux qui ont eu des difficultés sous IE ce qu’on peut leur proposer !!!
Merci !
Bonjour,
J’utilise votre diaporama SPLASH
GENIAL …
Pour une utilisation ponctuelle est il possible de lancer un diaporama SPLASH (d’une seule photo) de manière automatique à l’ouverture d’une page sans avoir à cliquer sur un lien.
Avez-vous la commande correspondant à ce besoin
Merci d’avance
Et encore MERCI pour ce que vous faites
Bonjour,
Cela fait longtemps que je n’ai pas maintenu ce script (d’autres solutions ont émérgé (lightbox, fancybox etc …)).
Mais sinon, dans le fichier splash.image.js, mettez la variable « splash_auto_start » à « true ». Je crois que ça répondrait à votre question.
@++
Merci pour cette réponse mais elle ne résout pas mon problème.
Cela lance le diaporama en automatique mais il faut cliquer sur le lien. Je voudrai ce clic en automatique.
Merci quand même