Lightbox+

Anne se plaint de son site. Il n’est pas aussi simple que les espaces MSN. Elle aurait aimer que le script Lightbox soit encore plus coool. Soit, je vais le rendre plus cooool que Fonzy.

Le plugin que je propose créé automatiquement des groupes de diapositifs par billet, redimensionne la visionneuse à la taille de l’écran, et permet de changer d’image toutes les 10 secondes. Avec ce système souple, le blog de WordPress n’a pas de soucis à se faire. Il peut gérer ses images très simplement. Enfin, le lecteur n’a qu’à cliquer sur le petit bouton diaporama et se laisser naviguer entre les différentes photos.

Titres et descriptions

Anne aime triturer ses photos, elle passe des heures à réécrire les titres et descriptions (le plugin Tam Attachment permet de le faire très simplement). Seulement, les fonctionnements de Lightbox et de WordPress ne permettent pas de mettre à jour les billets automatiquement avec les nouvelles données éditoriales. Elle était obligée de réécrire ses textes dans ses billets.

C’est fait. J’ai écrit un petit bout de code pour que les attributs de ses liens et de ses images soient automatiquement mis à jour lors de l’affichage sur le site.

Les images sont plus grandes que l’écran

Le second défaut de Lightbox est qu’il ne redimensionne pas les images trop grandes pour les écrans. N’ayant pas de logiciels de manipulation d’image, Anne dépose directement sur son site les photographies originales de son appareil numérique.

Pour cela, j’ai complété le code du javascript pour qu’il redimensionne les images plus grandes que l’écran.

Diaporama

Dernière critique : pourquoi il n’y a pas de diaporama comme sur MSN space ? C’est vrai ça ! Pourquoi ? Bin j’ai encore adapté le code pour qu’il change automatiquement d’image toutes les 10 secondes. Maintenant il y a un petit bouton sur la visionneuse. En cliquant dessus, l’utilisateur active le diaporama.

Installation, Utilisation

Décompressez le répertoire dans votre répertoire des plugins. Puis, via l’interface d’administration, activez le plugin lightbox+. C’est tout ! Il n’y a pas d’autres boutons, d’autres paramètres, utilisez WordPress comme d’habitude. les différents scripts se chargent de formater vos images lors de l’affichage sur votre site.

Il n’y a plus d’excuse ! Testez !

Téléchargement lightbox-plus.zip

Version 0.1.2 du 25 octobre 2006

Corrections

  • 23/10/06 : Correction des urls
  • 25/10/06 : Correction du formatage des descriptions, et mise à jour de la “cartographie” sur le script

34 Commentaires

  1. Pierre
    Soumis le 23 octobre 2006 à 22:06 | Permalien

    Domage que ca ne fonctionne pas …

    la decompression donne le nom lightbox-plus, alors que les fichiers ont comme chemin wp-lightbox2

    Et puis même après modification du path ça marche toujours pas, plutôt que de vanter une install facile vous feriez mieu de l’expliquez.

  2. Soumis le 23 octobre 2006 à 22:53 | Permalien

    Exact ! Je corrige cette étourderie.

    Celle qui est présente maintenant devrait mieux fonctionner. À tester :)

  3. Soumis le 24 octobre 2006 à 0:31 | Permalien

    Le caption des photos apparait en gris clair sur blanc…donc illisible. Que modifier dans le lightbox.css pour avoir le caption en noir ?
    Comment changer la taille de la police et les couleurs des boutons diaporama/stop et >. Merci.

  4. Soumis le 24 octobre 2006 à 8:54 | Permalien

    Voici le html généré par le script :

    <div id="imageDataContainer">
     
    <div id="imageData">
        
    <div id="imageDetails">
          
    <span id="caption"></span>
          
    <span id="numberDisplay"></span>
        
    </div>
        
    <div id="bottomNav">
          
    <a href="#" id="bottomNavPrev">
            
    &raquo;
          
    </a>
          
    <a href="#" id="bottomNavSlideshow">
            Diaporama
          
    </a>
          
    <a href="#" id="bottomNavNext">
            
    &laquo;
          
    </a>
          
    <a href="#" id="bottomNavClose">
            Close
          
    </a>
        
    </div>
     
    </div>
    </div>

    Donc toutes les améliorations que tu demandes se jouent au niveau de la CSS.

    Actuellement, la CSS est paramétrée pour héritée de la couleur du body. Pour modifier la couleur par défaut, il suffit d’appliquer un style color sur la balise qui t’intéresse. Je pense que la balise #imageData est celle qui t’intéresse.
    Par exemple, #imageData { color: purple; } affichera les textes en mauve.

    Pour la navigation, les balises sont #bottomNavNext #bottomNavDiaporama et #bottomNavPrev. Pareillement, il suffit d’appliquer les bons styles CSS, soit font et background.

    J’espère avoir bien répondu :)

  5. Soumis le 24 octobre 2006 à 8:56 | Permalien

    Pensez-vous qu’il faille ajouter une page statique de test ? Ainsi les utilisateurs pourront plus facilement bidouiller leur CSS ?

  6. Soumis le 24 octobre 2006 à 16:07 | Permalien

    Tu as bien répondu. Merci beaucoup.

  7. Soumis le 24 octobre 2006 à 16:38 | Permalien

    Je laisse la technique à tes autres “commenteurs”.

    En ce qui concerne le “c’est mieux sur msn ou ailleurs”, en général, ça commence comme ça et après, elle te revient avec un : “euh, tu peux m’aider à changer la couleur de fond et puis ceci, et puis cela” et au final, c’était mieux quand c’était fait maison car on faisait ce qu’on voulait…

    Ma femme veut changer de plateforme tout les deux ou trois mois et au final, c’est pas si mal un spip bidouillé.

    Ah… les femmes de web-trifouilleurs !

  8. Soumis le 24 octobre 2006 à 23:21 | Permalien

    C’est ce que je me tue à lui répondre : on est mieux servi que par soit-même. !

    Maintenant, il faut trouver le temps de se servir.

  9. Soumis le 25 octobre 2006 à 16:36 | Permalien

    Bon. Deja, j’arrive sur la page, et je vois mon nom en gros dessus. Je passe pour une chieuse. Fair enough.
    Et puis apres je vois qu’on rajoute des commentaires en disant que je fais des comparaisons a la con et que je devrais etre raaaavie du site que m’a bidouille crouton.
    Eho les gars, on se calme ! Moi, si je fais ca, c’est juste pour vous donner de nouveaux challenges, vous apprendre a vous adapter a des clients capricieux.
    Mais vous me direz merci plus tard…
     : )

  10. Soumis le 25 octobre 2006 à 18:01 | Permalien

    Tout ce que je dis, c’est que les femmes de web-bidouilleurs voudraient souvent avoir des sites comme tout le monde mais en plus avec les bidouilles de mÔssieur…

    Total, on fini par avoir peur du “Je passerais bien mon site sur typepad, blogger ou msn” et on fait bidouilles sur bidouilles pour que vos sites soient les plus beaux…

    Maintenant, si tu veux te plaindre, adresse toi au cousin du “meet market” :-D Par contre, j’espère que ma femme ne lit pas ce blog, histoire qu’elle ne me resorte pas le “Moi, si je fais ça, c’est juste pour vous donner de nouveaux challenges, vous apprendre a vous adapter a des clients capricieux.
    Mais vous me direz merci plus tard…”

  11. LK
    Soumis le 26 octobre 2006 à 6:49 | Permalien

    This is great ! I dropped your update into the photo gallery plugin we are using (http://www.wildbits.de/mygallery/). What a great enhancement !

  12. Soumis le 19 novembre 2006 à 21:05 | Permalien

    Super ce plugin.
    Merci beaucoup.
    J’aimerais seulement changer la durée de l’apparition des photos à 3 secondes au lien de 10. Où puis-je changer cette donnée ?
    Merci.

  13. Soumis le 19 novembre 2006 à 22:11 | Permalien

    En bas du fichier lightbox.js se trouve cette ligne

    var pe = new PeriodicalExecuter(jumpImage, 10);

    C’est cette ligne de code qui appelle la fonction jumpimage toutes les 10 secondes. Il te suffit de changer le 10 par le nombre de secondes qui t’intéresse.

  14. Soumis le 20 novembre 2006 à 1:50 | Permalien

    Merci beaucoup.

  15. Soumis le 20 novembre 2006 à 20:20 | Permalien

    j’ai téléchargé le plugin, je l’ai installé et activé. Et après, je ne comprends pas comment ça marche au niveau des photos. Comment je les insère dans l’article pour que lightbox+ s’en serve ?
    merci d’avance de m’éclairer

  16. denis
    Soumis le 20 novembre 2006 à 21:03 | Permalien

    peut-on choisir la dimension des vignettes et où se trouve cette option ?
    merci d’avance pour ta réponse

    sinon ça marche quand on lit correctement !! hum hum

  17. Soumis le 20 novembre 2006 à 22:19 | Permalien

    Pour insérer des images, tout ce passe dans la page “écrire un article”.
    Sous le champ d’article, se trouve le gestionnaire de pièces-jointes.
    Il suffit de cliquer sur la pièce-jointe désirée, choisir les options “Utilise la miniature” et “Lié à l’image”, puis cliquer sur “Envoyer à l’Editeur”.
    Le plugin se chargera de transformer ces images insérer ainsi en image lightboxisées.

    Sinon, je ne comprends pas ce que tu appelles vignette dans la seconde question :
    - Si c’est les miniatures générées par WordPress, alors non, ce plugin ne permet pas de les redimensionner.
    - Si c’est les images contenues dans le diaporama, les images sont automatiquement redimensionnées pour qu’elles soient affichées entièrement dans la fenêtre du navigateur.
    Donc dans tout les cas, il n’y a pas d’option pour régler la taille des images.

  18. denis
    Soumis le 22 novembre 2006 à 19:55 | Permalien

    merci pour ta réponse rapide.
    Si j’ai bien compris, les vignettes sont générées par wordpress, il va falloir que je regarde où la grandeur des miniatures est généré.
    Si tu le sais, merci de ta réponse.

  19. Soumis le 22 novembre 2006 à 20:03 | Permalien

    Là je sèche :(

  20. Jean-Marc
    Soumis le 26 novembre 2006 à 12:04 | Permalien

    Je viens de tester ton script sur free et c’est nickel ! Par contre en local (avec easy php) quand je clique sur une photo dans naviguer, aucune miniature est barré et quand je clique dessus, j’ai le message : aucune miniature n’est associée à cette image.
    C’est grave docteur ? Merci d’avance pour ton aide.
    Ah oui, j’allais oublier pour avoir une petite bordure noire autour de la miniature dans un post il faut que j’édite les css du plugin ou du thème ?

  21. denis
    Soumis le 26 novembre 2006 à 18:01 | Permalien

    j’ai trouvé (après 2 jours de recherche …). La grandeur des vignettes est gérée dans le fichier inline-uploading.php du répetoire wp-admin.
    merci pour ce superbe plugin !!!

  22. Soumis le 26 novembre 2006 à 22:46 | Permalien

    Denis : merci :D

    Jean-Marc : Ce plugin ne permet pas d’ajouter une bordure noire autour des images, mais tu peux le faire avec un style CSS. Grosso-merdo, il te suffit d’éditer le fichier CSS ton thèmes, en ajoutant cette ligne :

    a img {
     
    border: 1px solid black;
     
    padding: 2px
    }

    Elle se traduit par : à toutes mes images (images) qui sont dans des lien (a), ajoute une bordure (border) d’un pixel d’épaisseur (1px), continue (solid), noire (black), et un espace (padding) de deux pixels.

    Maintenant que tu as mis cet effet goûtu, tu peux ajouter le caviar en montrant que cette image est cliquable. Pour cela, tu peux changer la couleur de la bordure. Pour cela, il te suffit d’ajouter un événement de survol (:hover) dans ta CSS.

    a:hover img {
     
    border: 2px dotted red;
     
    padding: 1px
    }

    Elle se traduit par : quand je survole (:hover) mes liens (a), changer le style de mes images (img) par une bordure (border) de deux pixels d’épaisseur (2px), en pointillée (dotted), rouge (red), et un espace (padding) d’un pixels.

    Pour ce qui est des images avec Easy PHP. WordPress se base sur la librairie GD2 pour manipuler les images, dont créer les vignettes. Il me semble que cette librairie n’est pas activée par défaut sur Easy PHP. Tu trouveras plus d’infos sur le forum du soft http://www.easyphp.org/forums/read.php?f=7&i=124085&t=124085

  23. Jean-Marc
    Soumis le 27 novembre 2006 à 10:18 | Permalien

    Merci beaucoup Xavier pour cette réponse très complète. J’adore le design de ton blog : “Classieux !” comme dirait Serge ;-)

  24. Soumis le 27 novembre 2006 à 22:22 | Permalien

    C’est complétement la classe américaine. Mozinor, quand tu nous tiens !

  25. Soumis le 26 décembre 2006 à 19:23 | Permalien

    Bonjour,

    Ce plugin fonctionne très bien chez moi et correspond à ce que je recherchais (les images trop grandes sont redimmentionnées à une taille résonnable) mais j’ai tout de même un problème.
    Je voulais me servir de ce plugin pour afficher des wallpaper.
    Hors une fois les images agrandies, en faisant un click droit je n’ai plus l’option “choisir comme fond d’ecran”.
    Est-ce qu’il serait possible de rectifier çà ? Ou alors carrément ajouter un petit bout de code pour avoir une commande “ajouter comme fond d’écran” dans la description de l’image ?

    => voir par ex. ici

    Woilà.

    @+

    Rusty.

  26. Soumis le 26 décembre 2006 à 19:33 | Permalien

    ah oui non mais de toute façon çà ne va pas aller puisqu’il va reprendre la taille de l’image redimentionnée par le plugin et non la taille réelle…

  27. Soumis le 26 décembre 2006 à 19:53 | Permalien

    Le plugin ne fait pas de vignette redimensionnée. Celle qui est affichée est bien l’originale.

    En fait, l’image est recouverte par 2 éléments transparents qui permettent de faire la navigation survolée.

    Ces deux éléments recouvrant l’image, le menu contextuel de l’image ne peut pas fonctionner.

    Pour cela, il va falloir que tu bidouilles la CSS de ces 2 éléments, pour qu’ils ne recouvrent pas entièrement l’image, voir les masquer définitivement. Voici le code à modifier :

    #prevLink, #nextLink {
        
    width: 49%;
        
    height: 100%;
        
    display: block;
    }
    #prevLink { left: 0; float: left; }
    #nextLink { right: 0; float: right; }
  28. Soumis le 26 décembre 2006 à 22:29 | Permalien

    Oulaaa… je crois que c’est trop compliqué pour moi, je ne vois pas bien ce qu’il faut faire, bon c’est pas très grave, je vais rester à quelque chose de plus simple en plus çà m’évitera de rajouter encore un plugin de plus !
    Merci quand même ; )

    Bye !

  29. Soumis le 12 janvier 2007 à 21:56 | Permalien

    j’ai téléchargé le plugin, je l’ai installé et activé.
    C’est SUPER !
    Seulement, le côté diaporama n’est pas très joli. Je voudrais l’enlever mais après moultes essais je ne parviens pas à faire ça correct.
    as-tu des infos à me donner ?
    merci d’avance

  30. Soumis le 23 janvier 2007 à 5:56 | Permalien

    Awesome plug-in ! I’ve been using it for awhile.
    Can you update the plug-in for Wordpress 2.1 ? It has stopped adding the rel tag automatically.

  31. Soumis le 23 janvier 2007 à 12:30 | Permalien

    I’m working on it.

  32. Soumis le 14 mars 2007 à 21:57 | Permalien

    Une beta du plugin est disponible à ce lien http://www.john-noone.com/2007/03/14/le-bout-du-tunnel/

  33. Soumis le 25 juillet 2007 à 17:11 | Permalien

    Superbe version,
    avec le slideshow qui va bien et qu’aucunes des dizaines d’autres versions testée n’a implémenté (peut-etre me tromps-je. Si oui ; let me know ;)).

    Juste un souci de mon coté…
    La fermeture sur le clique exterieur a apparament des zones non reactives (cotés lateraux de l’image). Y a-t-il un moyen d’y remedier pour que cela tourne aussi bien que la lightbox v2 ?
    Si non, sais tu comment adapter ta fonction diapo ?

    Merci pour ce super taff !

  34. chris
    Soumis le 3 mars 2008 à 14:54 | Permalien

    Bonjour,

    je voudrais utiliser la fonction diaporama dans une “page” dédiée. Or l’envoi des photos dans l’éditeur de la page se fait sans problème mais, lorsque je visualise cette page, il n’y a pas du tout de diaporama (j’ai auparavant activer le plugin).
    Aurais-je oublié une étape ???

6 Rétroliens

  1. Par Lightbox+ 1.0 « Wordpress Updates le 22 octobre 2006 à 19:09

    [...] [Download] [Plugin Page] [...]

  2. [...] LightBox+ par John Noone, une autre adaptation de LightBox, française ce coup-ci, [...]

  3. [...] Intégration vidéo / images / etc sur Wordpress avec les “boites à lumière” LightBox de John Noone (groupe d’image, redimensionnement automatique, slideshow) LightBox JS v2.0 de Lokesh Dhakar (gestion d’image seule ou par set, groupe d’image liées, effets de transition) VideoBox de Gobekdeligi (intégration video avec boite à lumière, [...]

  4. [...] Le LightBox+ de John Noone a l’air bien mais comment juger sans démonstration. [...]

  5. [...] Visit [...]

  6. [...] Lightbox+ [...]

Soumettre un commentaire

Votre adresse email n'est jamais publiée ni partagée. Les champs requis sont marqués par *

*
*