Qu’est-ce la Lightbox JS v2.0
C’est une galerie photo en Javascript, qui permet de créer des diaporamas
Exemple disponible sur mon site perso Ouba’Web
Mise en oeuvre
– Fichiers à modifier :
- inclusions/header.html
- article.html
Modifications du fichier inclusions/header.html
Avec SPIP en version 1.9, il faut ajouter ces 4 lignes de codes :
<script type="text/javascript" src="#CHEMIN{prototype.js}"></script>
<script type="text/javascript" src="#CHEMIN{scriptaculous.js}?load=effects"></script>
<script type="text/javascript" src="#CHEMIN{lightbox.js}"></script>
<link type="text/css" rel="stylesheet" href="#CHEMIN{lightbox.css}" media="screen" />Avec une version précédente, il faut utiliser le code suivant :
<script type="text/javascript" src="../squelettes/prototype.js"></script>
<script type="text/javascript" src="../squelettes/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="../squelettes/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="../squelettes/lightbox.css" media="screen" />Modifications du fichier article.html
Dans article.html, chercher :
<B_images_article>
<div id="img_article" class="en-tete"><:img_article:> :</div>
<div class="images">
<BOUCLE_images_article(DOCUMENTS){id_article}{extension == jpg|png|gif}{mode=document}{doublons}>
<div class="vignette">
<a href=#URL_DOCUMENT target="_blank" class="info"> #LOGO_DOCUMENT [<span>(#DESCRIPTIF)</span>]</a>
<ul> [<li><:img_titre:> : (#TITRE)</li>] <li><:img_taille:> : #LARGEUR par #HAUTEUR</li>
<li><:img_poids:> : [(#TAILLE|taille_en_octets)]</li>
<li><:img_format:> : #TYPE_DOCUMENT</li>
</ul>
</div>
</BOUCLE_images_article>
</div>
<div class="clear"><span></span></div>
</B_images_article>puis le remplacer par le code suivant (SPIP 1.9) :
<B_images_article>
<div id="img_article" class="en-tete"><:img_article:> :</div>
<div class="images">
<BOUCLE_images_article(DOCUMENTS) {id_article} {mode=document}{extension==(png|jpg|gif)$}{doublons} >
<a rel="lightbox[]" href="#URL_DOCUMENT" title="[<h3>(#TITRE|texte_backend)</h3>][(#DESCRIPTIF|texte_backend)]">[(#FICHIER|image_masque{mon-masque.png}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})]</a>
</BOUCLE_images_article>
</div>
</B_images_article>Le code précédent ne fonctionne que avec SPIP 1.9, car il utilise les fonctions de retouche automatique des images de SPIP 1.9, pour créer des miniatures toutes de la même taille.
Si vous possédez une version antérieure à la 1.9, il faut utiliser le code suivant :
<B_images_article>
<div id="img_article" class="en-tete"><:img_article:> :</div>
<div class="images">
<BOUCLE_images_article(DOCUMENTS){id_article}{extension == jpg|png|gif}{mode=document}{doublons}>
<div class="vignette">
<a rel="lightbox[]" href=#URL_DOCUMENT title="[<h3>(#TITRE|texte_backend)</h3>][(#DESCRIPTIF|texte_backend)]"> #LOGO_DOCUMENT</a>
</div>
</BOUCLE_images_article>
</div>
</B_images_article>Rassurez-vous, c’est presque fini... :-)
Il faut juste décompresser le fichier fourni avec cet article (en bas de la page) puis de transférer son contenu dans le dossier squelettes de votre SPIP.
Il faudra ensuite activer la bibliothèque GD2, et dire à SPIP de l’utiliser. Pour cela, vous devez être administrateur du site. Il faut cliquez sur l’icône configuration, puis ensuite sur fonctions avancées. Puis dans la rubrique "Méthode de fabrication des vignettes", il vous faut choisir GD2. Si ce choix n’apparaît pas, ce que vous ne pouvez pas l’utiliser ^^.
Commentaires Forum fermé