SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 328 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Divers > Un diaporama en un clin d’œil

Un diaporama en un clin d’œil

17 août 2008 – par Corrobori – 10 commentaires

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

5 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 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.

Voir en ligne : La Gerbelette

Notes

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

Dernière modification de cette page le 9 mars 2014

Retour en haut de la page

Vos commentaires

  • Le 9 novembre 2010 à 17:02, par FAT78 En réponse à : Un diaporama en un clin d’œil

    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 !

    PNG - 333.5 ko
    • Le 10 novembre 2010 à 16:03, par FAT78 En réponse à : Un diaporama en un clin d’œil

      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.

    • Le 10 novembre 2010 à 16:21, par Corrobori En réponse à : Un diaporama en un clin d’œil

      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

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

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

      1. <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.

    • Le 10 novembre 2010 à 20:08, par FAT78 En réponse à : Un diaporama en un clin d’œil

      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

  • Le 11 mars 2010 à 01:01, par Béat En réponse à : Un diaporama en un clin d’œil

    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

  • Le 8 avril 2009 à 15:22, par jaeda En réponse à : Un diaporama en un clin d’œil

    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

  • Le 29 décembre 2008 à 23:45, par JB En réponse à : temporisé

    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.

    • Le 31 décembre 2008 à 17:19, par Corrobori En réponse à : temporisé

      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

  • Le 15 septembre 2008 à 14:14, par val En réponse à : Un diaporama en un clin d’œil

    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

    • Le 15 septembre 2008 à 20:21, par ? En réponse à : Un diaporama en un clin d’œil

      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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là