Un diaporama en un clin d’œil

Une façon très simple de réaliser un diaporama très simple.

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.

Notes

[1Il est important de noter que la pagination doit s’inscrire dans une div. classée en « ajax »

Discussion

5 discussions

  • 3

    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 » :

    [(#REM) album]
    <B_diapo>
    <div align="center">
    #ANCRE_PAGINATION
        <BOUCLE_diapo(DOCUMENTS){id_article=#ID}{extension==jpg|png}{pagination 1}>
            <div>
    <b>[(#TITRE)]</b><i>[(#DESCRIPTIF)]</i>
    <a href="#URL_DOCUMENT">[(#EMBED_DOCUMENT)]</a>
            </div>
        </BOUCLE_diapo>
    [<p class="pagination">(#PAGINATION{page_precedent_suivant})</p>]
    </div>
    </B_diapo>

    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

      <albumxx|doc IN a,b,d,z>

      Voire aussi de passer en critères optionnels le titre et le descriptif.

      <albumxxx|titre|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 :

    <div id="fade">
    <div id="diapo">
    <INCLURE{fond=inc-diaporama}{doublons}{env}{ajax}>
    </div><!--#diapo-->
    </div><!--#fade-->
    <B_diapo>
    #ANCRE_PAGINATION
    <ul>
    <BOUCLE_diapo(DOCUMENTS){id_article}{mode=image}{doublons}{pagination 1}>
                                                   
    [<li>(#FICHIER|image_reduire{700, 500})</li>]
                                                   
    </BOUCLE_diapo>
    
    </ul>
    <p class="pagination"><span id="photo_nav">#PAGINATION{diaporama}</span></p>
    </B_diapo>

    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

  • 1

    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

  • 1

    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

    <div id="content">
      <BOUCLE_article(ARTICLES){id_article}>
      <BOUCLE_diapo(DOCUMENTS){id_article}{pagination 1}>
            #PS
      </BOUCLE_diapo>
    
    
         #TITRE
         #TEXTE
            <br/>
            #ANCRE_PAGINATION
            (#PAGINATION{precedent_suivant})
     
    </div>

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom