Accueil > Dossiers > Kryzalid-CMS > Comment créer un diaporama en lightbox manuellement ?

Comment créer un diaporama en lightbox manuellement ?

Il est parfois utile de permettre à vos visiteurs de naviguer au sein des photos d'une même page sans avoir à fermer chaque image avant d'aller en ouvrir une autre. Ce tutoriel vous explique comment faire pour, d'une part, ajouter un effet "Lightbox" à vos images, et d'autre part, permettre un défilement des images d'une même page sous forme de diaporama.

Afficher les images en miniature

Positionnez votre curseur à l'endroit où vous souhaitez insérer vos images puis insérez vos images dans le contenu de votre page.
Si vous ne savez pas comment faire pour ajouter une image, lisez ce tutoriel.

Redimensionner les images

L'un des critères pris en compte par Google pour positionner votre site est le temps de chargement de votre page. Plus votre page sera lourde et longue à charger moins vous serez positionné en tête des résultats de recherche.

Ainsi, pour augmenter la vitesse de chargement il faut que les images présentes sur votre site ne soient pas trop volumineuses. Il convient donc d'afficher des miniatures sur votre pages et d'afficher les images sources (plus grandes) uniquement au clic sur les miniatures. De cette manière Google ne chargera que vos miniatures lorsqu'il analysera votre site.

Pour redimensionner vos images sources présentes dans votre bibliothèque d'images cliquez sur la petite flèche en bas à droite de votre image puis sur "Modifier".

Modifier une image

Cliquez alors sur "Redimensionner" puis saisissez les dimensions souhaitées pour votre miniature. Vous pouvez également redimensionner manuellement votre image source en utilisant les points de redimensionnement directement sur les bords de l'image.

Cliquez ensuite sur "valider".

Redimensionner une image

Cliquez alors sur "Enregistrer", puis saisissez un nom pour votre miniature.

Vous pouvez rajouter un "-m" à la fin du nom de votre image source afin d'identifier facilement vos miniatures dans la bibliothèque d'images.

Cliquez sur "Enregistrer" à droite.

Enregistrer le redimensionnement

Vous pouvez ainsi distinguer vos miniatures et vos images sources dans votre bibliothèque d'images.

Redimensionnez ainsi toutes les autres images.

Images sources et miniatures

Si vous avez beaucoup d'images à redimensionner, vous pouvez le faire en local sur votre ordinateur à l'aide du logiciel gratuit Shrink O'Matic. Cela sera plus rapide que de redimensionner une à une manuellement les images via la bibliothèque.

Ajouter un effet "lightbox"

Une fois vos miniatures ajoutées à votre contenu, il faut désormais créer des liens sur celles-ci afin d'afficher les images sources (plus grandes) quand un utilisateur cliquera dessus.

Pour cela, sélectionnez une miniature en cliquant une fois dessus puis cliquez sur l'outil "Insérer / éditer un lien".

Insérer un lien sur une image

Dans l'onglet "Général" cliquez sur le bouton "Parcourir" à droite pour accéder à nouveau à la bibliothèque d'images.

Ajouter un lien

Sélectionnez alors l'image source correspondant à la miniature concernée.
L'image que vous choisissez maintenant s'affichera en plus grand lorsqu'un utilisateur cliquera sur sa miniature.

Sélection de l'image source pour Lightbox

A nouveau dans l'onglet "Général", sélectionnez la classe "Fancybox".

Cette classe aura pour action d'ajouter l'effet "lightbox" à votre miniature, affichant ainsi l'image source à l'utilisateur.

Vous pouvez également saisir un titre dans le champ "Titre" qui sera affiché sous votre image.

Classe Fancybox

Mettre en place un diaporama

Allez ensuite dans l'onglet "Avancé" puis sélectionnez "Lightbox" dans le champ "Relation de la page à la cible".

Cette relation aura pour effet de lier plusieurs images à un même diaporama.
Toutes les images d'une même page ayant la même "relation" seront jointes à un même diaporama.

Cliquez sur "Insérer" puis enregistrez votre page.

Relation Lightbox

Rendez-vous sur votre site internet et observez l'effet "lightbox" couplé au diaporama. Si vous avez ajouté plusieurs liens avec la même "Relation de la page à la cible" vous pourrez naviguer au travers des images concernées via les boutons de navigation à droite et à gauche de vos images.

Diaporama

Vous avez aimé cet article ?

Si vous avez aimé cet article n'hésitez pas à le partager sur les réseaux sociaux Google+, Tweeter, Facebook et LinkedIn. Cela nous permettra d'en écrire davantage et de répondre à vos questions. Pour partager l'article cliquez simplement sur les bouton ci-dessous.

Merci d'avance pour vos partages !