SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

111 visiteurs en ce moment

fontsizeup fontsizedown
Accueil du site > Contribs > Images, Galeries > Galeries, Diaporamas > Divers > Un diaporama en un clin d’œil
[5 commentaires]

Un diaporama en un clin d’œil

dimanche 17 août 2008, par Corrobori

Toutes les versions de cet article : [English] [français]

2 votes

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">
 #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.

Voir en ligne : La Gerbelette

Notes

[1] Il est important de noter que la pagination doit s’inscrire dans une div.

Retour en haut de la page

5 Messages de forum

Voir toute la discussion

  • Répondre à ce message

    8 avril 15:22 , par jaeda

    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

    31 décembre 2008 17:19 , par Corrobori

    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

    29 décembre 2008 23:45 , par JB

    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.

  • Répondre à ce message

    15 septembre 2008 20:21

    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

    15 septembre 2008 14:14 , par val

    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

Répondre à cet article

Retour en haut de la page

Ça discute par ici