Diapos

Comme son nom l’indique, c’est un (petit) plugin qui rappelle un peu le fonctionnement d’un projecteur de diapositives.

Seules contraintes : il nous faut des images ayant la même largeur et il nous faut numéroter les images. Il suffit pour cela de mettre des chiffres en tant que titre de l’image, et c’est dans cet ordre que les images vont apparaître. Seules les images nommées de la sorte seront prises en charge par le plugin, les images sans titre ou avec un titre commençant avec une lettre seront ignorées. Notez qu’il ne prend en compte que les fichiers gif, jpg et png.

Le fonctionnement

Il y a deux modèles : portrait et paysage. Les dimensions par défaut sont 200px x 258px et 400px x 258 px, respectivement.

Nécessite CFG et Saisies.

Vous pouvez personnaliser la présentation via CFG.

Il suffit d’insérer un modèle avec le numéro de l’article en question, par exemple <diapospoXX> pour les portraits ou <diapospaXX> pour les paysages, où, bien entendu XX représente le numéro de l’article.

Il s’agît tout simplement d’un div au positionnement relative dont on cache les éléments qui dépassent grâce un overflow:hidden. Dans son intérieur un autre div positionné en absolute prend la largeur de la somme des largeurs de toutes les images de notre diaporama, et les repositionne à des intervalles de 7000 millisecondes (plus ou moins 7 secondes).

Un clic sur le numéro force la présentation de l’image respective et un survol sur l’image arrête le défilement. Dès que votre souris sort des limites de l’image, le défilement recommence.

Bien entendu, ça reste à améliorer ;-). Vos suggestions (ou vos critiques) seront les bienvenues.

Accéder à la page de démonstration.

Discussion

30 discussions

  • 3

    Décalage
    Le plugin fonctionne très bien. Pas de soucis ... à un détail près tout de même : de temps, de façon vraiment aléatoire, les images apparaissent « décalées ». Je veux dire par là que tout se passe comme si le glissement n’était pas égal à la largeur de l’image/de la zone visible : du coup, slide après slide, un décalage de plus en plus important apparait, laissant apparaître un petit bout de plus en plus important de l’image suivante.
    Un petit coup de <F5> ou de <Pomme +R> rétablit le bon affichage... jusqu’à la prochaine fois !
    Si c’était un problème de css, ça se produirait tout le temps, alors je me demande ce que ça peut-être... Quelqu’un a déjà rencontré cela ?

    Une url pour voir ? =>www.meubles-du-plessis.com

    • Oui, et je crois savoir d’où ça vient. Le JS calcule le total de la largeur du block images à déplacer lors de la présentation en additionnant la largeur des images. Le déplacement devrait être ce nombre divisé par le nombre d’images. C’est là où le bât blesse : de temps en temps il se goure avec le déplacement.

    • OK.... mais du coup, il faut faire quoi, docteur ?
      Au passage, une petite question : dans diapos.js, comment faut-il comprendre
      var triggerID = $active.attr("rel") - 1; //Quantite des images
      Je devine qu’il compte la présence d’éléments dotés d’un attribut rel mais, que veut dire $active.

    • Oups. Avec le temps ça me fait un peu spaghetti dans les neurones, mais en relisant le code je m’aperçois qu’il faudrait lire

      //Declencheur de la rotation (active moins une image)

      En lieu et place de

      //Quantite des images

      La quantité est déterminée par var imageSumPa. Mais je continue à croire que le problème vient du fait qu’il se goure de temps en temps avec la somme des largeurs, autrement dit ici var imageReelWidthPa = imageWidthPa * imageSumPa;, du fait que j’ai pu voir avec Firebug que de temps en temps il ajoute des pixels supplémentaires à la taille de l’image.
      Pourquoi, mystère. On dirait un bug de padding supplémentaire. Je viens de commiter des CSS sans padding, regarde si ça marche.

    Répondre à ce message

  • peut-on installer le nouveau logiciel de cooliris avec des vidéos sur spip

    Répondre à ce message

  • 6

    Prise en compte des photos « non numérotées »
    Tu précises que seules les images ayant un titre composé d’un numéro sont prises en compte... C’est assez pénalisant dans la mesure où le rédacteur doit penser à supprimer le titre existant d’une image lorsqu’il souhaite l’intégrer dans le diaporama. Et noter ce titre pour le remettre ensuite quand il décidera de retirer l’image.
    Ce serait super de lever cette limite pour pouvoir intégrer n’importe quelle image. Une idée pour y arriver ?

    • Les images n’ont pas de titre par défaut chez SPIP. L’astuce (si l’on peut l’appeler ainsi), de mettre une chiffre, c’est pour éviter que notre abruti de plugin se goinfre toutes les images de l’article. D’autre part mon plugin date et je doute qu’il mérite une réécriture, à moins que ce ne soit pour l’épitaphe. Il y a d’autres solutions plus élégantes (j’ai vu passer une adaptation d’un plugin jquery — de mémoire, pas sûr cycle plugin, tu dois pouvoir le trouver dans contrib)

      A +

    • ... Non, non, je le trouve très bien ce petit plugin ! Faut pas se démoraliser pour si peu ! Entre temps, je pense avoir trouvé une solution à mon problème :
      En modifiant dans le modèle .html
      rel="#TITRE"
      par
      rel="#COMPTEUR_BOUCLE",
      ça fonctionne parfaitement bien : les images peuvent conserver leur titre « littéraire »
      Si ça peut servir !

    • Mais il n’y pas d’exclusion et il va prendre TOUTES les images de l’article.

    • Pas vraiment d’accord avec toi : il est relativement aisé d’intervenir pour éviter que le plugin n’avale pas toutes les images.

      Dans les fichiers modèles, les boucles DOCUMENTS peuvent être personnalisées assez finement pour isoler les images que l’on souhaite retenir :
      par ex : 0,5 pour limiter le nombre
      par num titre si l’on « dote » les titres de numéros de classement
      mode=document pour ne prendre que les images du portfolio etc... .

      Je préfère nettement jouer sur ce tableau plutôt que d’avoir à modifier les titres un coup dans un sens un coup dans l’autre, non ? C’est tout de même plus conforme à l’esprit de SPIP et de ses boucles, enfin il me semble...

      Un autre truc pour aider à l’utilisation de ce plugin que je trouve vraiment très agréable, c’est que contrairement à ce que tu dis, les images n’ont pas besoin d’avoir une taille pile-poil de la même largeur : une succession des filtres image_reduire et image_recadre permettent d’utiliser des images de taille hétérogène. Ils sauront donner à manger au plugin des images devenues homogènes grace à eux. On peut penser en effet que de nombreux rédacteurs ne sont pas des stars de photoshop ou de GIMP ! Enfin, il me semble...

    • Tiens moi au courant si tes améliorations fonctionnent. De mémoire, quand on avait des tailles différentes ça ne marchait pas.

    • Si tu appliques un même filtre image-recdre, toutes les images ont bien la même taille ***APRES*** donc, ce que mange le plugin, ce sont bien des images de même taille.
      Chez moi, ça fonctionne apparement très bien

      <BOUCLE_diapos(ARTICLES){id_article=#ENV{id}}>
      <B_image>
      <div class="cadrepa">
      <div class="fenetrepa">
      <div class="cadre_imagepa">
      <BOUCLE_image(DOCUMENTS)
      {id_article}
      {extension IN png,jpg,gif}
      {par num titre}>
      <a href="#"  rel="#COMPTEUR_BOUCLE">
      [(#FICHIER|image_reduire{700,0}
      |image_recadre{700,500}
      |inserer_attribut{alt,#TITRE})]
      </a>
      </BOUCLE_image>      
      </div>
      </div>
          			
      
      
      <div class="choix_image">
      <BOUCLE_numero_image(DOCUMENTS)
      {id_article}
      {extension IN png,jpg,gif}
      {par num titre}>
      <a href="#" rel="#COMPTEUR_BOUCLE">#COMPTEUR_BOUCLE
      <span>#DESCRIPTIF*</span></a>
      </BOUCLE_numero_image>       
      </div>
      				
      </div>
      </B_image>
      </BOUCLE_diapos>

    Répondre à ce message

  • Bonjour
    je souhaite utiliser ce plugin avec spip 21 et zpip, l affichage sur ma page sommaire se déroule plutot bien pour ce qui est du texte de mon article18, mais meme avec la balise <diapospa18> en interne, le parametrage de mes images 905x370 idem àla boite ; aucune image n apparait !
    y aurait il un pb de compatibilité ? Ou suis je égaré ?
    demo

    Répondre à ce message

  • 3

    Bonjour,
    Je suis en train de mettre en place le diaporama sur un site en construction. Je l’ai personnalisé comme décrit dans mon message ci-dessous (20 mars). Il fonctionne parfaitement sous Firefox 3.6.3 et sous Safari 5.0. Cependant... (il y a toujours un cependant :-) ... sous Safari l’affichage des numéros de commande disparait lorsqu’on arrive sur la page. Pour le faire réapparaitre, il faut tantôt recharger la page, tantôt vider le cache, et cela plusieurs fois pour que finalement, de manière aléatoire les numéros finissent par revenir ! Jusqu’à la prochaine fois.

    • Je ne reproduis pas. D’abord sur Safari 4.xx, puis je me rends compte que il faut télécharger la 5. Je la télécharge et je ne reproduis toujours pas. Puis je cherche votre ancien message, où vous dites, justement, avoir changé les css des numéros. Diantre !

      Cela-dit… (il y a souvent un cela-dit ‡-) comment voulez-vous que je vous aide si vous avez personnalisé le monstre mais je ne peux pas le voir ? Par télépathie ? Divination ? Magie ? Téléportation ? Allez, jusqu’à la prochaine fois, vous aussi ‡-)

      Très cordialement ‡-)

    • Merci de votre rapide réaction.

      Dans mes modifications, je n’ai touché qu’au fichier CSS, je serais bien incapable de faire autre chose. Pour en avoir le coeur net, j’ai rechargé le fichier CSS d’origine : hélas, le phénomène est toujours là, même après avoir vidé le cache.

      Je ne peux malheureusement pas vous donner d’url pour constater de visu car je développe en interne avec MAMP. Toutefois, votre réaction est précieuse, car vous me confirmez que tout fonctionne normalement du côté de Safari. C’est toujours ça... mais je dois dire que je ne vois pas encore comment je vais résoudre ce problème...

      Cordialement

    • Jamais désespérer ;) Si vous avez remis les CSS d’origine, vidé les caches (à la poigne de préférence tmp et local), vérifié que vous avez la dernière version du plugin et le problème persiste il faut jeter l’ordinateur (c’est une blague stupide). Non. Dans l’ordre.
      D’abord voilà le problème : il y a une CSS (sûrement une ul li ou bien une du type #ID .classe. élément) qui prend la priorité parce qu’elle a plus de points en ce qui concerne sa spécificité. (voir au hasard, http://articles.nissone.com/2007/04/specificite-css/).
      Avez-vous Firefox installé avec Firebug ? Si, oui cherchez quelle CSS prend le pas, sinon courez vite chez Mozilla, téléchargez les deux et prenez le temps de comprendre Firebug (une heure à tout casser pour piger le comportement de base). Vous m’en direz.

      Forza, Béat ‡)

    Répondre à ce message

  • 7
    ECastro

    Bonjour,

    Je suis en train de concevoir un site sur SPIP et je suis en train de rencontrer quelques problèmes au niveau de votre plugin. Avant de poster ce message, j’ai bien sûr vérifié que j’ai installé et activé CFG et Saisies. Je suis en SPIP 2.1.0, mes images portent des numéros comme sur le screen en haut de cette page, elles sont de la même dimension, j’ai attribué le numéro de l’article dans la balise <Diapospa/oXX>... Bref, je ne vois pas ce qui cloche.

    Lorsque je vais sur CFG pour personnaliser la présentation, j’ai d’abord cette interface ’incomplète’au lieu de celle de vos screens. Ca, c’est le soucis numéro 1. =)
    Vient ensuite un soucis sur l’affichage de la galerie dans mon article. Au lieu de faire aussi beau que vous ou les autres, mes images s’affichent les unes à la suite des autres. Est-ce lié au premier problème ?

    Merci d’avance pour votre aide, bonne journée à vous.

    • Il y a un problème, je crois, avec votre version de CFG. En ce qui concerne la copie d’écran de la configuration de CFG, vous avez raison, j’avais oublié de la changer. Je viens de le faire et voilà ce que vous devriez avoir à l’écran.

    • ECastro

      Merci de cette réponse très rapide, ça fait plaisir. =)

      Alors, j’ai réinstallé CFG et votre plugin diapo, du coup, je n’ai plus l’interface que j’avais lorsque je souhaitais configurer les diapos. Un problème de résolu, je suis rassurée.
      Par contre, demeure le soucis des images qui ne se mettent pas en diapo, mais qui s’affichent les unes à la suite de autres , tandis que les chiffres permettant d’aller d’une image à une autre sont toujours en dessous.

    • Avez-vous vidé le cache ? Avez-vous d’autres plugins installés ? Avez-vous renseigné les dimensions des images dans la configuration ? Votre site est-il visible ?

    • ECastro

      Oui, je vide le cache régulièrement, et j’ai, effectivement, plusieurs plugins installés (CFG, le vôtre, Couteau Suisse, Menus déroulants Babbibel, Saisies et Porte plume). Pensez-vous que c’est dû à un problème d’incompatibilité ?
      J’ai renseigné les mêmes dimensions que vous (400/300 et 300/400).
      Hélas, mon site n’est pas encore visible, car je suis actuellement en train de travailler sur son contenu et son ergonomie.

    • Essayez de désactiver tous les autres plugins, videz manuellement tmp et local et voyez si ça persiste. Vous avez aussi la possibilité de créer un nom de domaine dynamique (de mémoire, no-ip.com). Ça vous permettra de visualiser votre développement en local via le Web.

    • ECastro

      Bonjour.
      J’ai fini par y arriver : le diapo s’affiche ! Merci de vos conseils.
      Cependant j’ai encore quelques soucis... Des nouveaux, en fait :
      -  Si j’ai plus de 20 diapos, le ’compteur’/nombre est caché car la fenêtre est trop petite.
      -  J’aurais voulu savoir comment faire pour gérer les images horizontales et verticales dans un même article.
      -  Quand le diaporama défile, il n’affiche pas toujours l’image entière, mais la moitié d’une et de la suivante.
      Voici un exemple de diaporama (le site est en construction) ou encore ici. (Dans le dernier lien, il n’y a que des images horizontales. Si vous allez sur le numéro 7, vous verrez que l’image est coupée en deux).

    • A) Mettez en moins de 20
      B) Pas possible de gérer H et V dans le même article
      C) J’ai regardé vos images et j’ai pris 3 au hasard
      corrida001-aac55.jpg
      corrida016-5397b.jpg
      corrida015-c4869.jpg

      Aucune n’a les mêmes dimensions.
      Aucune n’a les dimensions du cadre .fenetrepa (height:300px ; width:400px)

      Utilisez un programme comme Photoshop ou Gimp pour les rendre homogènes.

      Je veux bien vous aider si vous faites comme c’est expliqué. Si vous faites autrement je crains que je ne puisse pas faire grand chose pour vous aider.
      Par ailleurs votre site ne valide pas ni les CSS ni le HTML. Vérifiez ça avant de vous lancer dans des tests de nouveaux plugins ou autres parce que si vos fondements ne sont pas bons vos résultats ne le seront jamais. Pour ce faire utilisez Firefox et ces extensions

      http://chrispederick.com/work/web-developer/

      http://getfirebug.com/

      Cordialement

    Répondre à ce message

  • 1

    bonjour,
    j’ai crée un article et j’ai télécharger des images comme vous me l’avez dis. Pour les autres plugins j’ai jamais eu de problème car je suivais à la lettre les indications mais pour Diopos ça ne passe pas pour l’instant. Mais je suis pré à faire tout mon possible car jusqu’à maintenant j’ai pas réussi à faire des photos dans mon site à part bien sur les photos à l’intérieur des articles.
    Merci.

    • Avez vous mis <diapospaXX> (XX représentant le numéro de l’article) dans le texte de l’article ?

    Répondre à ce message

  • 1

    bonjour,
    je suis nouveau et je voudrais utiliser « DIAPOS » mais les explications sont pas trop detaillés donc je voudrais savoir la marche à suivre sur mon espace privé ! je suis très motivé pour réaliser ce diapos sur mon site. Je suis à votre écoute.
    Merci d’avance.

    • Inversons les rôles : je serai à votre écoute une fois que vous ayez rencontré un problème ;-). Installez le plugin et ajoutez quelques images avec les mêmes paramètres (taille, résolution, etc). Une fois-là, si ça ne marche pas, dites-moi quels problèmes vous rencontrez.

      Cordialement

    Répondre à ce message

  • 1
    association raconte nous

    Bonjour,

    ce diaporama génial et d’une grande simplicité (pour preuve j’ai réussi à le mettre en oeuvre sur mon site !!).
    J’ai une petite question, je souhaiterais que le diaporama soit centré sur la colonne dans laquelle il apparait. (voir www.raconte-nous.org). Etant novice sur spip je ne sais dans quel fichier intervenir (peut être le css) et quelle ligne modifier ou ajouter. Quelqu’un pourrait-il m’eclairer ?

    merci d’avance !

    • association raconte nous

      Bon finalement j’ai dû tricher en insérant mon diaporama dans un tableau que j’ai centré sur ma page avec un div align=center.
      Pas forcément « noble » mais efficace !!

    Répondre à ce message

  • 3

    Magnifique petit diaporama sans chichis. Il a l’avantage de pouvoir s’insérer facilement dans le fil d’un article. Bravo. J’ai pu facilement modifier la css pour l’adapter à mon design (j’ai sorti les numéros du cadre de la photo pour les placer dans un bandeau en-dessous).

    Suggestion pour les évolutions futures : avoir les légendes qui défilent en même temps que les images (la zone Descrition est disponible ;-)

    • Merci. Je vais voir ça.

    • charles

      Bonjour,

      tout d’abord bravo pour ce plugin et sa simplicité !!
      J’ai une question pour Béat : je suis novice sur spip et j’aimerais moi aussi placer les numéros dans un cadre sous la photo pourrais-tu m’indiquer les modifs à effectuer dans la CSS ?

    • @ Charles
      Le site pour lequel j’ai fait cette modif n’est pas en ligne, il tourne pour l’instant sur un serveur interne. Je mets une capture d’écran du résultat en fichier joint. J’ai modifié la css « diapo.css.html » il y a près d’un mois et ne suis plus en mesure de commenter ces modifs (ah, la mémoire ;-) Mais si tu compares la css originale avec la mienne tu comprendras bien où il faut agir. Voici donc ma version modifiée :

      [(#REM) <style> ]
      #CACHE{0*3600*100,cache-client}
      #HTTP_HEADER{Content-type: text/css; charset=iso-8859-15}
      #HTTP_HEADER{Vary: Accept-Encoding}
      #SET{largeur_imagespa,#CONFIG{diapos/largeur_imagespa,400px}}
      #SET{hauteur_imagespa,#CONFIG{diapos/hauteur_imagespa,258px}}
      #SET{largeur_imagespo,#CONFIG{diapos/largeur_imagespo,200px}}
      #SET{hauteur_imagespo,#CONFIG{diapos/hauteur_imagespo,258px}}
      #SET{marges_imagespa,#CONFIG{diapos/marges_imagespa,1em 1em 1em 1em}}
      #SET{marges_imagespo,#CONFIG{diapos/marges_imagespo,1em 1em 1em 1em}}
      .cadrepa {margin:[(#CONFIG{diapos/marges_imagespa}|sinon{1em 1em 1em 1em})];float:left; clear:both; position:relative; z-index:1900; background:#999; border-bottom: 3px solid #999;}
      .cadrepo {margin:[(#CONFIG{diapos/marges_imagespo}|sinon{1em 1em 1em 1em})];float:left; clear:both; position:relative; z-index:1900; background:#999; border-bottom: 3px solid #999;}
      .fenetrepa {width:[(#CONFIG{diapos/largeur_imagespa}|sinon{400px})]; height:[(#CONFIG{diapos/hauteur_imagespa}|sinon{258px})];overflow:hidden; position:relative;padding-bottom:20px;}
      .fenetrepo {width:[(#CONFIG{diapos/largeur_imagespo}|sinon{200px})]; height:[(#CONFIG{diapos/hauteur_imagespo}|sinon{258px})];overflow:hidden; position:relative;padding-bottom:20px;}
      .cadre_imagepo, .cadre_imagepa {position:absolute; top:0; left:0;}
      .cadre_imagepo img, .cadre_imagepa img {float:left;}
      .choix_image {position:absolute; bottom:-3px; right:0; height:20px; z-index:2000; text-align:center; font-size:11px; line-height:20px; background:#999; display:none;}  
      .choix_image a {display:inline-block; float:left; width:20px; height:20px; text-decoration:none; background:#999;}
      .choix_image a.active{width:20px; height:20px; font-weight:bold; background:#dedede; color:#386dab;}
      .choix_image a:hover{font-weight:bold;}
      [(#REM) </style> ]

    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