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
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.
Exact ! Je corrige cette étourderie.
Celle qui est présente maintenant devrait mieux fonctionner. À tester
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.
Voici le html généré par le script :
<div id="imageData">
<div id="imageDetails">
<span id="caption"></span>
<span id="numberDisplay"></span>
</div>
<div id="bottomNav">
<a href="#" id="bottomNavPrev">
»
</a>
<a href="#" id="bottomNavSlideshow">
Diaporama
</a>
<a href="#" id="bottomNavNext">
«
</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 stylecolorsur la balise qui t’intéresse. Je pense que la balise#imageDataest celle qui t’intéresse.Par exemple,
#imageData { color: purple; }affichera les textes en mauve.Pour la navigation, les balises sont
#bottomNavNext#bottomNavDiaporamaet#bottomNavPrev. Pareillement, il suffit d’appliquer les bons styles CSS, soitfontetbackground.J’espère avoir bien répondu
Pensez-vous qu’il faille ajouter une page statique de test ? Ainsi les utilisateurs pourront plus facilement bidouiller leur CSS ?
Tu as bien répondu. Merci beaucoup.
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 !
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.
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…
: )
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…”
This is great ! I dropped your update into the photo gallery plugin we are using (http://www.wildbits.de/mygallery/). What a great enhancement !
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.
En bas du fichier lightbox.js se trouve cette ligne
C’est cette ligne de code qui appelle la fonction
jumpimagetoutes les 10 secondes. Il te suffit de changer le 10 par le nombre de secondes qui t’intéresse.Merci beaucoup.
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
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
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.
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.
Là je sèche
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 ?
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 !!!
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 :
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.
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
Merci beaucoup Xavier pour cette réponse très complète. J’adore le design de ton blog : “Classieux !” comme dirait Serge
C’est complétement la classe américaine. Mozinor, quand tu nous tiens !
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.
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…
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émentstransparents 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 :
width: 49%;
height: 100%;
display: block;
}
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
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 !
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
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.
I’m working on it.
Une beta du plugin est disponible à ce lien http://www.john-noone.com/2007/03/14/le-bout-du-tunnel/
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 !
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
[...] [Download] [Plugin Page] [...]
[...] LightBox+ par John Noone, une autre adaptation de LightBox, française ce coup-ci, [...]
[...] 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, [...]
[...] Le LightBox+ de John Noone a l’air bien mais comment juger sans démonstration. [...]
[...] Visit [...]
[...] Lightbox+ [...]