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
Cet article a été écrit par Xavier, soumis le 22 octobre 2006 à 18:31, rangé dans WordPress et marqué . Marquer cette page avec son permalien. Suivre les commentaires de cet article avec leur flux RSS. Soumettre un commentaire ou laisser un rétrolien : URL de rétrolien.
  • Lightbox is awesome indeed!
  • I heard about Lightbox a lot but didn't give a thought about until i tried myself and it was amazing! I used it when I presented my shots i made when I was in Barcelona. My class loved it!
  • Lightbox feature is really helpful and an eye catcher also.
  • Thank you for explaining the lightbox, I think it is really a cool feature especially on photo presentation.
  • 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
  • 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".
  • 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
  • Guest
    Thank you for explaining the lightbox, I think it is really a cool feature especially on photo presentation.
  • vous mériteriez plus de comentaires ;)
  • 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!
  • 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???
  • 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 !
  • johnnoone
    Une beta du plugin est disponible à ce lien http://www.john-noone.com/2007/03/14/le-bout-du...
  • johnnoone
    I'm working on it.
  • 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.
  • 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
  • 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 !
  • johnnoone
    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 :
    <coolcode lang="css" linenum="false">#prevLink, #nextLink {
    width: 49%;
    height: 100%;
    display: block;
    }
    #prevLink { left: 0; float: left; }
    #nextLink { right: 0; float: right; }
    </coolcode>
  • 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...
  • 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.
  • C'est complétement la classe américaine. Mozinor, quand tu nous tiens !
  • Jean-Marc
    Merci beaucoup Xavier pour cette réponse très complète. J'adore le design de ton blog : "Classieux !" comme dirait Serge ;-)
  • 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 :

    <coolcode lang="css" linenum="false">
    a img {
    border: 1px solid black;
    padding: 2px
    }
    </coolcode>

    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.

    <coolcode lang="css" linenum="false">
    a:hover img {
    border: 2px dotted red;
    padding: 1px
    }
    </coolcode>

    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;=1...
  • 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 !!!
  • 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 ?
  • Là je sèche :(
  • 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.
  • 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
    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
  • 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
  • Merci beaucoup.
  • En bas du fichier lightbox.js se trouve cette ligne
    <coolcode lang="javascript" linenum="false">
    var pe = new PeriodicalExecuter(jumpImage, 10);
    </coolcode>

    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.
  • 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.
  • 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!
  • 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" :-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…"
  • 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...
    : )
  • 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.
  • 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 !
  • Tu as bien répondu. Merci beaucoup.
  • Pensez-vous qu'il faille ajouter une page statique de test ? Ainsi les utilisateurs pourront plus facilement bidouiller leur CSS ?
  • Voici le html généré par le script :
    <coolcode lang="html" linenum="false">
    <div id="imageDataContainer">
    </div><div id="imageData">
    </div><div id="imageDetails">


    </div>
    <div id="bottomNav">

    »


    Diaporama


    «


    Close

    </div>


    </coolcode>

    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 :)
  • 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.
  • Exact ! Je corrige cette étourderie.

    Celle qui est présente maintenant devrait mieux fonctionner. À tester :)
  • 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.
blog comments powered by Disqus