A force de chercher le plugin SPIP idéal pour faire un diaporama qui tourne sur la page d’accueil, j’en suis arrivé à chercher ailleurs et j’ai trouvé un petit tuto très simple avec du jQuery comme on aime.
L’idée c’est de réaliser un petit diaporama qui tourne en boucle sur les pages du site avec un lien sur les images pour y rajouter ensuite un effet lightbox.
En allant sur le tuto d’un diaporama avec Cycle, j’ai réaliser rapidement une galerie adapter à SPIP.
J’ai créé un article, l’article on va dire 33, mais vous pouvez le faire autrement sur une rubrique, des mots clés ou tous les documents « image » du site. Dans cet article il y a une série de photographie que je souhaite donc afficher en boucle sur ma page.
Pour que cela fonctionne il faut d’abord appelé le fichier .js du jQuery Cycle en le mettant par exemple dans le inc-head.html, sinon ça ne marchera pas (suivre l’exemple du tuto cité ci-dessus pour les détails et les différents modes de transitions entre les images – ici j’ai choisi le plus simple « fade » mais il y en a une dizaine).
<div id= »content_diaporama » style= »height:200px; »>
<BOUCLE_diapo(DOCUMENTS){id_article=33}{extension==jpg|png|gif}{mode=document}>
[<a href= »#URL_DOCUMENT » alt= »#TITRE »>(#FICHIER|image_reduire{200,150}) </a>]
</BOUCLE_diapo>
</div>
<script type= »text/javascript »>
$(document).ready( function () {
$(‘#content_diaporama’).cycle({
fx: ‘fade’,
timeout: 3000
});
});
</script>
On pourra ajouter un attribut class dans la balise <a> pour la cibler avec la lightbox. Ce code mis dans un include pourra s’afficher sur vos squelettes. On peut imaginer aussi en ajoutant {id_article} à l’include dans le squelette de l’article <INCLURE{fond=inc-diaporama}‘id_article}> puis enlever la référence à l’article 33 et donc ne garder que {id_article} dans la boucle DOCUMENTS <BOUCLE_diapo(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}>, pour voir s’afficher sur chaque article uniquement les images liées à cet article.
Voilà ça roule.