SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 233 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 !

    • 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

  • bigfoot

    16 juin 2015 – 55 commentaires

    Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript. Le constat de l’auteur du script : Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de (...)

  • Escal-V3

    16 février 2012 – 272 commentaires

    Un jeu de squelettes proposant un affichage en 2 ou 3 colonnes avec un large choix de noisettes à insérer ou pas, fortement paramétrable depuis l’espace privé . Présentation A l’instar de sa petite soeur plugin Escal-V2 dont elle reprend toutes (...)

  • Calendrier Mini 2.0

    19 mai 2012 – 234 commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • Agenda 2.0

    3 novembre 2008 – 1075 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. Pour une documentation concernant l’utilisation d’Agenda 3 pour SPIP 3, veuillez pour l’instant vous référer à SPIP 3, Agenda (...)

  • ScolaSPIP 4

    19 janvier 2016 – 162 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)