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
  • Pingback: Lightbox+ 1.0 « Wordpress Updates()

  • Pierre

    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.

  • http://www.john-noone.com Xavier

    Exact ! Je corrige cette étourderie.

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

  • http://millesabords.net MilleSabords

    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.

  • http://www.john-noone.com Xavier

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

    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 :)

  • http://www.john-noone.com Xavier

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

  • http://millesabords.net MilleSabords

    Tu as bien répondu. Merci beaucoup.

  • http://blog.das-art.com/ Das

    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 !

  • http://www.john-noone.com Xavier

    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.

  • http://www.verredelait.info Anne

    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…
    : )

  • http://blog.das-art.com/ Das

    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 » 😀 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… »

  • LK

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

  • http://www.troisiemeoeil.org sylvainman

    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.

  • http://www.john-noone.com Xavier

    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.

  • http://www.troisiemeoeil.org sylvainman

    Merci beaucoup.

  • http://vengeurmasquepetosse/wpbeto Denis

    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

  • denis

    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

  • http://www.john-noone.com Xavier

    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.

  • denis

    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.

  • http://www.john-noone.com Xavier

    Là je sèche :(

  • Jean-Marc

    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 ?

  • denis

    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 !!!

  • http://www.john-noone.com Xavier

    Denis : merci 😀

    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

  • Jean-Marc

    Merci beaucoup Xavier pour cette réponse très complète. J’adore le design de ton blog : « Classieux ! » comme dirait Serge 😉

  • http://www.john-noone.com Xavier

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

  • http://cine-polar.com rusty

    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.

  • http://cine-polar.com rusty

    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…

  • http://www.john-noone.com Xavier

    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; }

  • http://cine-polar.com rusty

    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 !

  • http://flooliv.laboureau.free.fr oliv

    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

  • http://www.fearless-future.com/ Jonathan Silberman

    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.

  • http://www.john-noone.com Xavier

    I’m working on it.

  • Pingback: Plugins Wordpress: les “thumbnail viewers” at Fran6art, le blog()

  • http://www.john-noone.com Xavier

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

  • Pingback: » Wrac 2.0 : Yahoo Pipes ouvre aux flux externes ! - Malaiac attack()

  • Pingback: Panorama des diaporama en Flash pour WordPress()

  • Pingback: WP Plugins DB » Blog Archive » Lightbox+()

  • http://www.tooooooe.org alcorsica

    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 !

  • chris

    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???

  • Pingback: Wapnet Blog » Blog Archive » WordPress Plugins for Images, Photographs, and Graphics()

  • Zibouille

    Bonjour, j’ai suivi vos conseils pour changer la couleur de la bordure de la miniature… Le problème, c’est que les caractéristiques données s’appliquent à toutes les images de ma page… Je n’y connait vraiment pas grand chose en css, mais ça à l’air vraiment pratique quand on maîtrise!

  • http://tonprenom.com/pierre Pierre

    vous mériteriez plus de comentaires 😉

  • Pingback: PROMUNOTY » Blog Archive » WordPress Plugins for Images, Photographs, and Graphics()

  • Pingback: WordPress Plugins for Images, Photographs, and Graphics « Lorelle on WordPress()

  • http://www.superiorpapers.com/ Research Papers

    Thank you for explaining the lightbox, I think it is really a cool feature especially on photo presentation.

  • http://www.flashpapers.com Term Papers

    Hi, I have just visited your site and the info you have covered has been of great interest to me. Some of the suggestions you have given have enabled me to apply my own thought process to afford a greater understanding of the issue. Some info that is provided on the Web is not very useful but yours has been worthwhile. Some of the points you have raised will assist me greatly. Incidentally, I like the way you have structured your site, it is super and very easy to follow. I have bookmarked you and will be back regularly. Thank you

  • http://profiles.yahoo.com/u/XJJYP2GDRZ5EVK3ILRZVMJUPGQ Adrian

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

  • http://profiles.yahoo.com/u/XJJYP2GDRZ5EVK3ILRZVMJUPGQ Adrian

    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 ». acne scar cream

  • http://www.biaggicucina.com/ italian kitchen cabinets

    Thank you for explaining the lightbox, I think it is really a cool feature especially on photo presentation.

  • http://www.floristinboston.com/ boston flowers

    Lightbox feature is really helpful and an eye catcher also.