La fonction de diaporama est une des plus demandée à SPIP. Une recherche de diaporama sur ce propre site retourne 45 articles ! La souplesse de SPIP 2.0, encore en version béta au moment où j’écris ces lignes, permet d’obtenir des diaporamas à partir des documents joints aux articles ou aux rubriques en un clin d’œil.
Le principe est simple, il suffit de détourner le système de pagination de son usage initial. En effet la pagination permet de digérer de grandes listes d’objets, articles principalement, en paquets de 5, 10 ... Le nombre d’éléments par paquet s’appelle le pas de la pagination.
Un diaporama, en terme d’usage, n’est rien d’autre que la pagination d’une série d’images avec un pas de 1.
La boucle qui code le diaporama n’est pas plus compliquée que ça :
[(#REM) Le diaporama nouveau est arrivé]
<B_diapo>
<div class="toto ajax">
#ANCRE_PAGINATION
<h3>Diaporama</h3>
<ul>
<BOUCLE_diapo(DOCUMENTS){id_article}{pagination 1}>
<li>
[(#EMBED_DOCUMENT)]
</li>
</BOUCLE_diapo>
</ul>
[<p class="pagination">(#PAGINATION{precedent_suivant})</p>]
</div>
</B_diapo>
Ceux qui ont accès aux squelettes choisiront :
- d’y écrire cette boucle directement,
- de passer par des inclures,
- des modèles
- ou des plugins,
il n’y a que l’embarras du choix . Cette boucle s’insère aussi bien dans un squelette d’article que de rubrique . De plus elle s’intègre facilement à la css utilisée dans le site [1] et le diaporama reste conforme à la charte graphique du site.
Pour le rédacteur, le meilleur est à venir. Il lui suffit d’uploader un zip contenant les images du diaporama et de le décompresser à l’arrivée.
C’est tout, le diaporama est disponible sur le site.
Discussions par date d’activité
5 discussions
Merci pour cette idée simple et efficace. Sous SPIP2.0.10, je l’ai légèrement adaptée et crée un modèle « album.html » :
Dans le texte d’un article il suffit d’insérer (xxx étant le n° d’article qui contient les images à afficher, qui peut être un article autre) pour afficher un album photo (diaporama c’est abusif) avec (éventuellement) Titre et Descriptif de chaque image. En + l’image est cliquable pour l’afficher en grand. Et rien n’empêche d’avoir plusieurs albums dans le même article !
Pardon .. j’ai pas bien écrit mon texte ...voici :
Dans le texte d’un article il suffit d’insérer
<albumxxx>
(xxx étant le n° d’article qui contient les images à afficher, qui peut être un article autre) pour afficher un album photo (diaporama c’est abusif) avec (éventuellement) Titre et Descriptif de chaque image. En + l’image est cliquable pour l’afficher en grand. Et rien n’empêche d’avoir plusieurs albums<albumxxx> <albumyyy>
dans le même article !PS. : avec le filtre extension==jpg|png les images avec extension différente (ex. « jpeg ») ne seront pas dans l’album photo.
Oui , j’avais vu merci. Je vais proposer une MàJ de l’article avec le code propre du modèle. Mais auparavant ce qui serait bien ce serait de pouvoir sélectionner les images d’un article,qq chose du style
Voire aussi de passer en critères optionnels le titre et le descriptif.
Par ailleurs je rajouterai un nouveau modèle de pagination qui revient au début quand on arrive à la fin.
Ouf
Le modèle est donc sur la planche.
Encore merci pour l’idée de départ !
Moi aussi je pensais à rajouter des filtres sur les titres, descriptifs, etc. mais je préfère gérer chaque album en chargeant ses images dans un article séparé qui est ensuite appelé par le modèle « albumxxx » de façon à rester libre sur l’éventuel ajout de titres et commentaires sur les images.
Un exemple d’article utilisant 4 « albums » sur mon site perso :
http://www.i-filippini.net/spip.php?article313
L’idée de reboucler la pagination me parait très intéressante ... à suivre !
Répondre à ce message
J’essaie de mettre en place cette boucle effectivement simple. Ça marche, mais je rencontre systématiquement des bizarreries avec l’avant-dernière image, et cela quel que soit le nombre d’images.
Par exemple, avec le modèle pagination_page_precedent_suivant, la flèche de navigation de droite ne s’affiche pas.
Ou bien, avec n’importe quel modèle, si j’utilise #DESCRIPTIF dans ma boucle, le descriptif de l’image s’affiche bien, sauf pour l’avant-dernière image.
Bizarre, non ?
Répondre à ce message
Bonjour !
J’ai utilisé votre boucle proposé dans un inclure ajax et le diaporama fonctionne parfaitement sous Firefox, IE6 et IE8... MAIS il rame sous IE7... Chaque photo prend plus d’1 min pour s’afficher !
Mon code :
Est-ce que quelqu’un sait pourquoi il rame dans IE7 ? Merci en avance pour tout aide ! (Et je m’excuse pour des fautes de français...)
Répondre à ce message
est-il possible d’avoir la même chose, mais que les documents changent seul au bout de 5 secondes par exemple, un défilement en somme.
Et non, c’est le revers de la médaille : la robustesse implique la rusticité. Ajouter un défilement automatique c’est réinventer la roue et ça, d’autres plugins le font très bien, mais avec un nombre de lignes de code beaucoup plus grand. Désolé.
Répondre à ce message
Bonjour,
Je suis intéressé par cet exemple de pagination d’images, mais je souhaite intégrer ce code dans un boucle ARTICLE.
Mon but est de pouvoir afficher le texte d’un article et de proposer une pagination uniquement sur les images de l’article.
Dans mon cas, les images ont été ajoutées, pour des raisons de mises en page, dans le champs post-scriptum (#PS) et le texte est lui dans #TEXTE.
Mon code est le suivant
Mais le site m’affiche l’erreur suivante : #PAGINATION sans critère pagination ou employé dans une boucle recursive, _article
Comment puis-je donc intégrer la pagination des documents dans mon article ???
Merci
Bonsoir,
placez la boucle telle qu’elle, hors de toute autre boucle, à l’endroit où vous voulez que le diaporama apparaisse , remplacez toto par une de vos div, content par ex, et ce doit être bon.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |