Un diaporama avec effet lightbox dans un article d’un site sous Thélia

Accueil > Articles > Un diaporama avec effet lightbox dans un article d’un site sous Thélia

L’un des avantages de Thélia par rapport à d’autres systèmes de gestion de site de commerce électronique est la facilité avec laquelle on peut publier du contenu, le présenter, le mettre en forme, etc. Parfois, en terme de référencement, mes articles sur un produit sortent mieux dans les résultats des moteurs de recherche que les fiches produit. D’où l’intérêt de soigner ces pages de contenu, sans parler de ce qu’elles peuvent apporter en elles-mêmes au visiteur.

C’est pourquoi j’ai voulu créer des pages avec des diaporamas d’images réalisés à partir des illustrations de certains de mes livres : une façon simple de parler du livre, d’en montrer une partie du contenu, et de créer du trafic.

Il existe des plugins

Il existe des plugins qui réalisent ces diaporama :

Thélia effet Zoombox
Thélia plugin Galerie

Mais je n’ai pas réussi à les faire fonctionner. Comme très souvent la documentation est plus que succincte, je me suis dit qu’il valait peut-être mieux se passer du plugin qui fait tout mais qui ne marche pas, et utiliser l’effet Lightbox par Jquery.

Mise en place par Jquery

Une discussion sur le forum Thélia à propos d’un effet LightBox m’a aidé.

Téléchargez le script LightBox Jquery

Dans votre entête, ajouter les lignes suivantes :

<script src="template/lightbox/js/lightbox.min.js"></script>
<link href="template/css/lightbox.css" rel="stylesheet" type="text/css">

Adaptez les chemins en fonction de votre architecture.

Dans votre page de contenu, ajouter les lignes suivantes :

<T_photos>
	<h3>Galerie d'images</h3>
	<p>Cliquez sur les images pour afficher un diaporama</p>
      <div id="galerie">
        <THELIA_photos type="IMAGE" contenu="#ID" deb="2">
			<div class="vignette_galerie">
            <a href="#FICHIER" rel="lightbox[produit]" id="image#ID" title="#TITRE">
				<img src="#FICHIER" alt="#TITRE" /></a>
				<div class="lightboxDesc image#ID">#TITRE</div>
			</div>
        </THELIA_photos>
		<div style="clear:both; "></div>
      </div>
	</T_photos>
	<//T_photos>


      
      <script type="text/javascript">
			window.addEvent('domready',function(){
				Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
			});
      </script>

Explication de la boucle

1. Tout d’abord une boucle conditionnelle <T_photos> : on ne va afficher "Galerie d’images" et "Cliquez sur les images pour afficher un diaporama" que si effectivement il y a des images dans la boucle. Sinon, on n’affiche rien.

2. On utilise la fonctionnalité du système de gestion pour charger des images. Je dois préciser que la boucle est adaptée à mon cas : la première image est mon logo d’article, les autres images sont utilisées dans le diaporama.

3. C’est pourquoi j’ajoute deb="2" : pour que la boucle n’affiche pas le logo.

4. J’ajoute tittle="#TITRE" pour que le titre de l’image s’affiche lorsque l’effet LightBox sera affiché. J’ai trouvé cette indication sur le Forum d’Alsacréation : Ajouter une légende à un effet Lightbox.

5. Taille des vignettes : contrairement à l’exemple donné dans le forum Thélia, je ne règle pas la taille des vignettes dans la boucle mais dans la feuille de style associée :

.vignette_galerie img {height:100px !important;}

J’ai donc des vignettes qui font 100 px de haut ; J’ajoute !important pour forcer la taille, compte-tenu de mes styles précédents.

6. Dans votre feuille de style Lightbox, vous devez régler les chemins vers les images fonctionnelles que l’effet affiche : la flèche droite, la flèche gauche, la croix, etc.

7. Enfin, dans le plugin Jquery lui-même, corrigez le texte "image ... on... ", pour l’avoir en français. Trouvez dans le pluging lightbox.min.js l’expression :
{return"Image "+a+" sur un total de "+b} et modifiez-là à votre convenance.

8. La taille des images "grandes" qui s’affichent n’est pas réglé. Ou plutôt, elle correspond à la taille des images chargées. A vous de préparer vos images pour qu’elles aient la taille souhaitée (pour ma part, je prépare des images qui font 80 px de large, globalement)

Exemple

Voilà un exemple d’un diaporama d’image dans un article dans un site sous Thélia.