Accueil > Le Coin d'Alconis > Lightbox JS pour DotClear

Lightbox JS pour DotClear

Ceci est mon premier plugin officiel pour DotClear. Lightbox JS est un script assez connu qui permet une visualisation animée impressionnante d’une image ou d’un album d’images.

Plugin Lightbox pour dotclear

Lightbox JS pour DotClear est l’adaptation en plugin DotClear du script de visualisation dynamique du même nom. Il permet d’ouvrir une image en plein écran avec un effet animé impressionnant. Il permet aussi d’afficher plusieurs photos en mode album photo, de se déplacer dans l’album via les touches du clavier, d’afficher une légende etc. Il s’installe très facilement (une seule modification dans le template), peut s’utiliser en mode wiki (un remplacement de fichier du core) et est totalement non intrusif. Pour plus d’informations sur l’utilisation du script, je vous recommande le site internet de l’auteur : huddletogether.com.

Installation
Utilisation
  • La démarche d’installation est explicitée dans la partie administrative du plugin. Elle consiste en un seul petit copier coller dans le fichier template de votre thème.
  • La démarche d’utilisation est elle aussi expliquée dans cette même partie. Utilisable pour toutes les images de votre blog et pas seulement celles de vos billets. L’intégration avec la syntaxe wiki permet en plus de l’utiliser dans connaître une once d’XHTML.
Démonstration
  • Utilisation avec une miniature : Cliquer sur l’image

Exemple simple du plugin Lightbox JS pour dotclear

  • Utilisation avec un texte : Cliquer sur le texte

Voir le logo

  • Utilisation avec un ensemble de photos : Cliquer sur l’une des miniatures

Versions
  • Version 0.3 : Correction d’un bug dans la gestion wiki des albums
  • Version 0.2 : Corrections des liens vers les images, Ajout de la gestion wiki
  • Version 0.1 : Adaptation du script en plugin DotClear

Pour tous commentaires ou problèmes, merci d’utiliser le formulaire ci-dessous

Related Posts with Thumbnails
  1. 14/04/2006 à 16:14 | #1

    Absolument magnifique avec Firefox !

    Par contre, avec Konqueror ce n’est hélas pas super :
    ifeelfree.info/images/kon…

    Félicitations en tout cas ;)

  2. 14/04/2006 à 16:19 | #2

    Malheureusement je ne suis pas l’auteur du script mais seulement de son intégration dans DotClear. Tu aller voir sur le site de l’auteur donné dans l’article si Konqueror est convenablement géré. Au vu du code, oui.

  3. 14/04/2006 à 16:24 | #3

    Très beau plugin super pratique ^^

    Au niveau des mignatures, est ce que DC en génère une automatiquement lorsqu’on upload une image ?

    Sinon, si j’ai un peu de temps faudrai que je vois pour me mettre à un "hack" de gallery pour utiliser lightbox, l’effet est vraiment des plus sympa !

  4. 14/04/2006 à 16:48 | #4

    Oui dotClear génére tout seul les miniatures pour les formats qu’il gère (jpg, png). Il suffit de rajouter "TN__" à la fin du nom. Exemple : image.jpg est uploadée via le gestionnaire d’images ; la miniature image.TN__.jpg est automatiquement générée dans le même répertoire.

  5. 14/04/2006 à 17:40 | #5

    Intégration avec Gallery:

    Editer functions.php correspondant à gallery, trouver:

    echo ‘<a href="’.$galleryImage->getImageURL().’">’.

    remplacer par

    echo ‘<a href="’.$galleryImage->getImageURL().’" rel="lightbox" title="’.$galleryImage->getTitle().’">’.

    A faire deux fois de suite, ligne 294 et 298 normalement.

    C’est un truc super vite fait qui ne prend pas en compte la notion d’album.

  6. 14/04/2006 à 23:55 | #6

    ClickImage 0.94

    ClickImage est un plugins pour dotclear qui permet d’ins?r facilement des « miniatures cliquables » dans un billet. De plus il peut fonctionner avec « Lightbox JS pour DotClear »

  7. 14/04/2006 à 23:59 | #7

    Super plugin ! Et parfait avec le mien ;-)

    Escuse moi pour le trackback. J’ai pensé que ca allait le mettre à jours :-/ c’est le premier que j’en fait un (deux). tu peux supprimer le permier ? merci

    Bonne continuation !

  8. Li-An
    15/04/2006 à 10:21 | #8

    Merci Lex, je tente le truc.

  9. Blowup
    15/04/2006 à 12:13 | #9

    Pour l’intégration à gallery c’est nikel, mais du coup, je serai intérressé de savoir pour le mode album…
    C’est ce nouveau mode qui rend gallery intéressant je trouve, enfin à mon goût.

    Bravo pour l’intégration de Lightbox js en tous les cas.

  10. 15/04/2006 à 18:24 | #10

    Magnifique. C’est vrai que lorsque l’image s’affiche c’est assez impressionnant. Je vais tester ca de suite.
    Bravo :-)

  11. DubWize
    15/04/2006 à 18:37 | #11

    salut…

    y’a un petit souci le div overlay ne s’etand pas sur toute la page mais uniquement sur une partie de celle ci. une piste ?

  12. 16/04/2006 à 19:43 | #12

    Excellent ! Ca jette ! Merci ! :D

    (J’ai eu un petit problème avec l’image "closelabel.gif" qui ne voulait pas s’afficher, mais ça s’est résolu en mettant l’adresse absolue)

  13. Balooners
    18/04/2006 à 21:32 | #13

    Très bonne intégration sous Safari (Mac) aucun bug ;-)

  14. Lui
    18/04/2006 à 22:38 | #14

    Superbe !! J’adore, par contre j’ai des pb à l’installation, il y aurait pas un .zip dans le coin ? Merci :)

  15. 19/04/2006 à 02:22 | #15

    Exact lui. Je rajoute un lien vers le zip dans le billet.

  16. 19/04/2006 à 14:21 | #16

    Merci :) Ça marche vraiment bien, et c’est classe. Bravo pour ce plugin.

  17. 24/04/2006 à 20:04 | #17

    Salut,
    est-ce que tu as vu la variation Lightbox gone wild particletree.com/features…
    Je vais voir si je peux pas intégrer ça pour certaines pages connexes de mon blog et du coup je me dis qu’avec un plugin… Ah ah ah, tu me vois venir avec mes gros sabots :-)

  18. alex
    26/04/2006 à 03:14 | #18

    il est vraiment super ce plugins
    mais j’ai une erreur suivante.Je l’ai installé en local , mais j’ai cette erreur en bas de la page

    Constant _BBC_PAGE_NAME already defined in d:\apache\easyphp1-8\www\combat\ecrire\tools\bbclone\functions.php on line 36

    ca fait pas tres bon sur la page .comment faire pour qu’il ne s’afiche pas ?

    merci d’avance

  19. 26/04/2006 à 08:21 | #19

    Bonjour Alex. Ainsi que l’indique ton message d’erreur (qui n’est d’ailleurs qu’un warning qui ne s’affichera pas en ligne et non une erreur), ton erreur est inhérente à ton plugin BBClone et non à LightBox. De plus, LightBox ne modifie aucun fichier php puisqu’il est fait en Javascript. Donc pour moi, si cette erreur ne s’affichait pas avant, c’est que tu as modifié quelque chose d’autre entre temps. Vois plutôt de ce côté.

  20. 28/04/2006 à 09:12 | #20

    Salut, superbe plugin qui bluffe mes voisins !
    Mais pour ma part, je n’arrive pas à obtenir ton exemple pour le mode album photos.
    Quand je recopie le texte indiqué, j’ai trois textes "image #1 image #2 image #3" qui s’affichent au lieu de miniatures. Quand je clique sur l’un d’eux, c’est bon, je peux naviguer, mais j’aurais voulu afficher des miniatures pultôt que du texteà cliquer…
    Quelle serait la solution ?
    (Pour plus de clarté, j’ai mis un exemple sur mon site.)

  21. 28/04/2006 à 10:21 | #21

    Salut Tepee.
    Le plugin LightBox ne génère pas de miniature.
    C’est à toi de combiner une image et un lien LightBox. Pour utiliser les miniatures faites automatiquement par le gestionnaire d’images de DC, vois le commentaire #4.

  22. 28/04/2006 à 13:14 | #22

    Merci pour ta réponse si rapide !
    En fait, mon soucis était que quand je mettais le chemin de la miniature à la place de "image1" (par exemple), ça m’écrivait (en texte) le chemin.
    Mais je me suis enfin aperçu qu’il fallait le mettre entre 2 parenthèse… (ah, la syntaxe!).
    En tout cas maintenant ça marche ! ! !
    Trop beau, et merci encore !

  23. 28/04/2006 à 15:38 | #23

    Lightbox JS pour DotClear – KooNDeLLiTcH

    Lightbox JS pour DotClear – KooNDeLLiTcH Lightbox JS pour DotClear est l’adaptation en plugin DotClear du script de visualisation dynamique du m? nom. Il permet d’ouvrir une image en plein ?an avec un effet anim?mpressionnant. Il permet…

  24. 29/04/2006 à 03:24 | #24

    Vraiment trés beau, je te remercie pour ce plugin! :)

  25. Nippo
    30/04/2006 à 14:27 | #25

    Je suis sans doute pas très doué mais quel est le fichier à modifier pour utiliser le plug in lightboxJS

    Merci d’avance
    Nippo

  26. 03/05/2006 à 11:53 | #26

    Voilà, j’ai installé ton plugin que je trouve vraiment SUBLIME, mais je n’ai pas le meme résultat que dans ton exemple, j’aimerais avoir le cadre blanc comme toi autour de l’image miniature, comment faire ?

  27. 03/05/2006 à 12:03 | #27

    Edit => C’est toi qui fait les thumbails ? car moi va voir ils sont tt laid j’en voudrait bien comme toi des extraits dlimage et pas des rétrecis Merci d’avance ;)

  28. 03/05/2006 à 12:30 | #28

    Salut Yulbrinner. Les thumbnails, comme indiqué dans les commentaires plus haut, sont celles générées par le gestionnaire d’images de DC. Pour ce qui est des cadres blancs autour, c’est tout simplement une règle CSS pour la balise img (une couleur de background pour les images transparente, un border avec une couleur un peu plus foncée que le back et un padding de 3px pour donner l’effet de cadre)

  29. Yulbrinner
    03/05/2006 à 13:44 | #29

    Pourrais tu m’indiquer le code en question car je suis un novice en dotclear ;) merci.

  30. 03/05/2006 à 13:46 | #30

    Dans la feuille CSS de ton thème tu ajoutes la règle pour la balise img (ce sont là les codes pour mes couleurs) :
    img{
    background: #f4f4f4;
    border: 1px solid #949494;
    padding: 3px;
    }

  31. Yulbrinner
    03/05/2006 à 14:02 | #31

    Arf, moi j’ai pas cette balise j’ai :

    img { border: none; }
    p { margin: 1.2em 0; }
    form { display: block; margin: 0; padding: 0; }
    q { font-style: italic; }
    pre {

    Désolé chui un peu chiant lol

  32. 03/05/2006 à 14:08 | #32

    Bah tu vois bien que si tu as la balise img. Donc à la place de ton img { border: none;} tu mets ce que je t’ai mis au dessus.

    C’est pas bien compliqué tout de même.

  33. Yulbrinner
    03/05/2006 à 14:30 | #33

    Lol bah tanpis, je vais laisser tomber car j’y arrive vraiment pas, j’ai tout essayé de changer mais bon … Faut pas supprimer les cookies entre temps ?

  34. 04/05/2006 à 10:56 | #34

    ton plugin dechire carrément…bien joué….

  35. 04/05/2006 à 20:05 | #35

    salut
    c’est bôôôô, mais j’aimerai savoir où on change les styles de la photo qui est cliquée ?
    j’aimerai mettre un fond de couleur à la place de ce gris foncé un peu austère et modifier le cadre qui entoure l’image agrandie.
    merci ;-)

  36. 04/05/2006 à 20:53 | #36

    brol, relis les derniers commentaires. Je me suis tué à expliquer à Yulbrinner c’est pas pour rien.

  37. 04/05/2006 à 22:29 | #37

    je ne parle pas de l’image miniature mais de la grande. et je ne veux pas toucher au style général des images .img{} mais à celui (dont je ne connais pas le nom) qui gère l’affichage des grande images.

  38. 06/05/2006 à 10:24 | #38

    Qui suis-je ?

    Pour les petit(e)s curieux(ses) qui se demandent qui se cache derri? ce pseudo, j’ai install?eux plugins pour DotClear qui va me permettre de mettre en ligne des photos.

  39. 06/05/2006 à 10:30 | #39

    Pas mal le plugin :-)
    Par contre, dans la partie administration, l’encodage est en ISO-88machin alors que tous mes autres plugins gèrent l’UTF-8 et l’ISO.
    De plus, sur l’image le bouton pour fermer n’a pas la bonne URL.
    Au lieu de http://www.wittezaele.fr/ecrire/... il cherche http://www.wittezaele.fr/index.p...
    Une idée ? Apparemment, même problème que ce commentaire : http://www.alconis.com/dotclear/... mais bon… comment changer l’URL ?
    Merci :-)

  40. 06/05/2006 à 12:47 | #40

    Est-il possible de modifier le NEXT par une flèche ou un autre mot ?
    Merci.

  41. 06/05/2006 à 12:56 | #41

    Pfiou auto réponse : j’ai trouvé la solution à mon problème (DotClear à la racine en fait) ici :http://www.dotclear.net/forum/vi... pour ceusse que ça intéresse…

  42. 07/05/2006 à 08:04 | #42

    Lut… super plug… 2 tits problemes
    1- meme probleme que Brol a savoir qu’en modifiant les bordures d’images ca en ajoute sur toutes les images du blog (miniatures, objets flashs, permalinks…) n’y a t’il pas une balise a placee sur chaque entrees du template ou je ne souhaite pas de modifs??
    2- l’image s’affiche bien avec une bonne reso mais sur une large bande blanche posee sur le background tranlucide. Comment faire pour l’enlever?
    Merci au spé.

  43. 08/05/2006 à 12:33 | #43

    Re moi

    Visiblement le probleme ne vient pas de la lightbox mais du theme que j’utilise (elle marche tres bien sur les autres). Cette bande blanche est en faite un cadre…???
    Je n’ai rien trouver de probant sur le site de l’auteur. J’aime bien ce theme moi… quelqu’un a deja vu ca et toi Alconis tu vois kelke chose?

  44. 08/05/2006 à 14:06 | #44

    Bonjour BreakMaker. Oui je pense que ca vient de ton style css et particulièrement de tes blocs /* Affichage des images et légendes */ ou /* Img Shadow */ ou encore /* lightbox */. Essaye en modifiant les propriétés css pour une image. Je ne suis pas très calé en CSS donc je ne peux te dire précisément le pb.

  45. 08/05/2006 à 22:48 | #45

    Salut Alconis. c’etait bien le theme. G fait un grand nettoyage de printemps et tout reinstallé… c’est au poil. une dernier petite chose, concernant les thumbs avec cadres, kome toi. G trouve la balise dans le css mais ca joue en faite sur toutes les images du blog. Je me demandais si il n’existait pas une contre balise a coller dans le patron a chaques entrees ke je ne veux pas modifier (un trucs genre </border: none;>).

  46. Y-Men
    11/05/2006 à 00:26 | #46

    Salut Alconis,

    Tres bon boulot !
    Pourrais tu lancer en parallele une version simulaire a ton pugin mais avec le player flash SimpleViewer v1.7.1 … un vrai bijou pour la presentation en flash de photos.
    C’est plus beau mais c du flash… donc c’estpas forcement mieux mais plutot complementaire a Lightbox JS.
    L’ideal serait de modifier ton plugin pour accepter les 2 (au choix).

    Si tu connais pas SimpleViewer tu va voir c’est tres simple a integrer.

  47. 11/05/2006 à 08:23 | #47

    Salut Y-Men. Le plugin SimpleViewer existe depuis belle-lurette pour DotClear. Va sur dotclear.net dans le wiki des plugins tu trouveras ton bonheur.

  48. 16/05/2006 à 22:08 | #48

    Salut, j’ai un petit problème,j’ai voulu renommer le fichier dotclear/inc/classes/class.wiki2xhtml.basic.php et télécharger celui de remplacement ici :
    amnesik.info/dotclear/ecr…
    mais à cette adresse il n’y a rien… Serait il possible de le recuperer ailleurs ?
    D’avance merci

  49. 16/05/2006 à 22:41 | #49

    C’est normal que tu crois qu’il n’y ait rien. C’est un fichier php. Télécharger un fichier php résulte en en télécharger son interprètation en html. N’ayant aucun "echo" (qui affiche des informations en html), la page reste blanche. Tu dois donc remplacer le fichier via FTP et non en tentant de le télécharger via WEB.

  50. 17/05/2006 à 00:49 | #50

    Le boulet que je suis, en fait je suis revenu, j’ai relu mon commentaire et là j’ai vu que le lien pointait sur mon dotclear… Donc j’ai bien regardé et maintenant ça marche. En tous cas merci Alconis, c’est vraiment bien les personnes qui developpent des plugins et qui en assurent le suivi.
    Encore un grand merci et continue à nous faire des p’tits cadeaux comme ça ;-)

Page des commentaires
1 2 3 105
  1. 22/01/2010 à 18:31 | #1