Plugin Slimbox pour DotClear 1.2.x
Par Julien le jeudi 9 août 2007, 23:22 - DotClear - Lien permanent
Voici la version pour DotClear 1.2.x, mais ce plugin est aussi disponible pour DotClear 2
Slimbox est un clone ultra compact (utilisant le framework mootools) du populaire script de visualisation d'images Lightbox JS 2.0.
Pourquoi Slimbox ?
Slimbox est 100% compatible avec Lightbox2 et permet d'obtenir la même visualisation animée des images. Donc visuellement, il n'y a pas de différence entre Lightbox et Slimbox. Par contre, la page se charge beaucoup plus rapidement. Parce qu'au lieu d'avoir 103 Ko de Javascript (4 fichiers) à télécharger, il n'y a que 27 Ko avec Slimbox (2 fichiers js) !
Tout comme le plugin Lightbox JS pour DotClear, il peut s'utiliser en mode wiki (en remplacement un fichier du core) et est totalement non intrusif.
Installation pour DotClear-1.2.7
- L'installeur : plugin-slimbox-0.2.pkg.gz
- L'archive : plugin-slimbox-0.2.tar.gz
Installation pour DotClear-1.2.6 et les versions précédentes
- L'installeur : plugin-slimbox-0.1.pkg.gz
- L'archive : plugin-slimbox-0.1.tar.gz
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 sans connaître une once d'XHTML.
Démonstration
- Mon thème n'utilise plus le plugin Slimbox mais dcjQueryLightBox, et l'effet n'est pas tout à fait le même, donc la démo ci-dessous est obsolète...
Les images proviennent de Flickr’s Desktop Wallpaper Pool.
Historique des versions du plugin
- 0.2 (21/08/2007) :
- Mise en place du contrôle de sécurité introduit dans la version 1.2.7 de Dotclear.
- 0.1 (18/08/2007) :
- Création d'un bouton "Copier" au moment de l'installation permettant de copier les fichiers nécessaires (js, css et images) dans un dossier share de DotClear.
- Localisation du plugin (EN et FR).
Commentaires
Salut,

je viens de voir ton annonce dans les plugins dotclear et je m’autorise une petite remarque sur cette excellente idée de plugin : mettre des liens directs vers l’admin, apparaissant en clair dans le code de la page publique est une très mauvaise idée, en termes de sécurité (il est d’ailleurs expressément recommandé de changer le nom du dossier ecrire afin que l’administration du blog ne soit pas facile à trouver pour un mauvais plaisant).
La meilleure technique serait de copier les js, css et images dans un dossier dédié dans share, créé par un bouton, par exemple, au moment de l’installation.
Bonne suite
Ok Lomalarch, je vais essayer de faire ça !

Merci à toi du conseil
Nickel.. je cherchais quel etait ce composant qui permettait d'afficher des images en Flash avec ce bel effet du site en fond qui s'assombrit.
Merci.
très beau site.. j'aime bien le graphisme.
Pour info c'est du Javascript et non du Flash. C'est donc plus accessible et respectueux des standards
Salut!
Pour une installation manuelle, comment ça se passe? Un petit fichier d'aide dans le package ne serait pas un luxe. Impossible de faire une install automatique sur mon site donc j'ai besoin d'aide pour une install manuelle....
Après avoir dé-zippé l'archive dans ton répertoire /ecrire/tools, il faut copier le répertoire /ecrire/tools/slimbox/install/slimbox dans ton répertoire /share.
C'est ce qu'est censé faire le bouton Copier les fichiers.
Après c'est expliqué dans le plugin, il faut copier le code suivant dans le fichier template de ton thème, juste avant la balise </head> :
Qu'est ce qui t'empêche de faire une install automatique ?
J'avais déjà dézippé l'archive et copier dans share, j'ai copié les lignes dans mon template.php, mais j'ai toujours la même erreur quand je clique sur slimbox :
Fatal error: Undefined class name 'dcnonce' in .../httpdocs/ecrire/tools/slimbox/index.php on line 52
J'arrive pas à faire d'install auto, dotclear me signal une erreur lors du téléchargement, j'ai pourtant tout le bons répertoire accessible en écriture... Mais c'est mon hébergeur qui n'est pas au top, sûrement là le blème... J'essaierai en local demain.
Quelle est ta version de DotClear ?
Moi aussi je vais faire le test en local ce soir
En effet, j'ai 1.2.5, et avec l'autre version j'ai pu installer correctement, mais le plugin ne marche visiblement pas, en cliquant sur une image, ça me l'affichait simplement toute seule, avec du blanc autour, comme quand on fait clique droit "afficher l'image".
Du coup j'ai installé lightbox et ca marche, désolé.
(Je vois pas vraiment la différence entre les 2 plugins).
Merci quand-même!
Visuellement il n'y a pas de différence entre Lightbox et Slimbox. Par contre, la page se charge beaucoup plus rapidement parce que au lieu d'avoir 103 Ko de Javascript (4 fichiers) à télécharger, avec Slimbox il n'y a que 27 Ko (2 fichiers Javascript) !
Et ça, c'est pas négligeable.
Oby, je te conseille de passer à la version 1.2.7
C'est quoi ton site ?
C'est tout bon, je rechignais à passer à la 1.2.7 car des plugins ne sont encore pas parfaitement compatible. J'ai fait le saut et ça a passé.
J'ai installé ton plugin qui fonctionne. L'erreur que j'avais faite ce matin c'est que j'avais copié le contenu de "install/slimbox" dans share (comme c'est écrit durant l'install du plugin), alors qu'il fallait copier le contenu de "install" dans share...
Parfait, merci pour tout, ton plugin fonctionne. J'aime bien ton site, la partie écolo notament.
Pour le mien, ça restera encore secret ^^
Oui effectivement, j'ai mis à jour le message qui n'était pas exact, merci de ta remarque.
Salut,
Tout d'abord très beau travail, l'effet visuel est très réussi !
J'ai juste un petit souci, l'image se déploie correctement mais le fond noir autour de la photo ne fonctionne pas !
Ai-je fais une erreur ?
Merci d'avance pour vos réponses.
@ Sylvain:
C'est curieux !
C'est quoi ton site ?
Salut,
C'est un site perso.
Voici l'adresse :
www.ccvmr.com/lescontamin...
Est ce que cela peut avoir un rapport avec le fichier "/inc/classes/class.wiki2xhtml.basic.php" ?
Merci pour ton aide.
Houlà, c'est un problème avec IE
parce que c'est ok sous Firefox...
J'aurai tendance à penser que ça vient de ton entête xml avant le DOCTYPE. Et ce serait encore IE le boulet...
Puis-je intervenir dans un fichier particulier ou concrètement y'a rien à faire ?
Quand je clique sur tes photos avec IE ça fonctionne correctement !
je ne comprends pas
J'ai cherché à voir d'où ça pouvait venir, et là je ne vois pas
d'accord, merci pour ton attention.
Bonne journée
Je viens juste de l'installer (DC 1.2.6 / theme Alto). Nikel ce plugin
5mn d'install (et je ne suis un newb en php)
Pour updater mes anciens posts, j'ai juste eu à faire un "search & replace" (plugin).
Merci (vraiment!)
> Bauhaus :
(vraiment !)
Merci à toi, ça fait toujours plaisir d'avoir ce genre de retour
bonjour,
votre plugin marche a moitié de mon coté... il faut que je clic au moins 3 fois sur le lien pour avoir limage. Les boutons closes etc napparaissent pas non plus...
> Laiah : Tu utilises beaucoup de Javascripts (prototype.js, scriptaculous.js, lib.sliderMenu.js...).
Ces scripts semblent entrer en conflit avec le framework mootools utilisé par Slimbox !
oui cest bien ce que jai vu... le menu ne se deroulait plus des qu'il y avait la slimbox !
dans ce cas ce nest pas grave, je m'en passerais
merci
Bonjour.
J'ai un little soucis avec l'install, je ne suis pas sûr de comprendre la phrase: " Pour pouvoir utiliser l'effet LightBox depuis la syntaxe wiki vous devez renommer le fichier /inc/classes/class.wiki2xhtml.basic.php et copier la version modifiée suivante /ecrire/tools/slimbox/classes/class.wiki2xhtml.basic.php à sa place...." Merci d'avance
Quand je dis de renommer le fichier, c'est pour en faire une sauvegarde.
Sinon, tu écraserais l'ancien avec le nouveau. Mieux vaut se ménager la possibilité de revenir en arrière (on est jamais trop prudent...).
Bonjour
deja, bravo pour ce plugin, je l'utilise actuellement, et il marche très bien, aucun problème.
Je vais peut-être passer pour un chieur, mais une question me turlupine ^^' :
Pour l'histoire de l'allègement au chargement, je comprend bien (je cherche aussi à limiter le poid au max), mais pourquoi avoir utilisé slim box mootool plutôt que directement une adaptation jquery tel que "jquery lightbox" qui fait 12Ko (5Ko compressé) vu que jquery.js est deja installé sur dotclear
http://warren.mesozen.com/category/...
marche-t-il moins bien ? l'as-tu essayé ? ya-t-il d'autres avantages avec mootool ? (je connais trop pas )
En fait, je me pose cette question car j'ai essayé vite fait de l'installer pour voir,mais vu que je suis nul, je ne suis pas arrivé à le faire marcher ^^'
Me disais que peut-être que ton choix vers mootool était justifié par des incompatibilités avec ce plugin jquery lightbox (ou je ne sais quoi ) et que du coup, je bidouillais inutilement... lol
bref, oilàoilà
Merci d'avance pour ta réponse, et désolé de faire un peu de hors sujet ^^'.
> Manu2.07
Tu as raison, moi aussi je préfère jQuery, mais jusqu'à maintenant, avec jQuery, je n'avais identifié que le plugin ThickBox. Celui-ci était clairement moins sympa visuellement que le LightBox qu'on connaît...
Mais je n'avais pas repéré celui là. Ça me semble très intéressant ! Merci pour l'info
Je vais peut-être essayer d'en faire un autre plugin...
ouep tout à fait d'accord, j'ai testé thickbox, j'étais pas convaincu non plus. ^^'
Bon, bin c'est intéressant tout ça, j'ai du oublié quelquechose dans mes essais... :/
De rien pour l'info, content d'avoir été utile
@"Je vais peut-être essayer d'en faire un autre plugin..."
je vote pour lol.
en tous cas, je repasserai prendre des nouvelles du coup
Bonne continuation.
> Manu2.07 :
La question que je me pose pour la réalisation d'un plugin utilisant jQuery c'est : comment savoir si l'utilisateur utilise déjà jQuery dans sont thème ? Et si oui, la version utilisé est-elle compatible avec celle du plugin ?Parce que, dans ce cas là, il faudrait éviter d'importer 2 fois la même librairie...
Je ne pense pas qu'il faille prendre en compte ce que contient le thème a priori, en plus pour ce que j'ai pu observer, il n'y a pas d'autre plugins qui utilise jquery en dotclear 1.2 (en tous cas coté public) et puis l'utilisation dans les thèmes, je n'ai vu uniquement en dotclear 2 photoblog et certains thèmes de pyeb.
pour ce qui est en dotclear 1, jquery, c'est le désert, ils viennent juste d'ajouter jquery coté admin avec cette derniere version 1.2.7, donc...
Perso (chais po si j'ai raison) ^^', je préfère séparer admin/public et du coup utiliser 2 fichier jquery.js, ça bouffe pas plus de BP et 25ko en plus sur des espaces disque souvent en centaines de Mo, je trouve ça pas si grave...
de toutes façons, que ça soit pour dotclear 1 ou 2 , il faut tjrs que l'utilisateur copie la ligne de code de le header ya pas moyen d'y échapper, donc suffit qu'il verifie si il a pas deja et pi c tout lol ^^
Pour ce qui est de le compatibilité entre version de jquery avec les autres plugins, ça...
d'ailleur, je ne vois pas comment reperer ça dans le thème, il placé et nommé un peu comme on veut :/
M'enfin, je pense qu'il faut pas que tu te prennes la tête la dessus ^^'
pendant que j'y suis, j'avais quand même remarqué un truc optimisable dans ton plugin slmibox, le z-index dans les css , je ne sais plus si il était absent ou pas assez élevé, mais j'avais les étoiles du plugin starsystem et les tabs de jquery par dessus le fond noir, j'ai du ajusté ça.
ps :pour le plugin "jquery lightbox", j'ai refait un essai rapide en dehors du blog, ct une bete histoire de compression foirée à cause des commentaires du code -__-
là ça marche !... à moitié, mais ça marche.
http://www.manu-bd.info/
(cliquer sur le crane )
joie, je vais enfin pouvoir enlever les "no conflict"...
@pluche
> Manu2.07 :
C'est pas faux
Pour ce qui est de la css tu as ajouté un
z-index: 1000;
à#lbOverlay
?J'ai créer le plugin dcjQueryLightBox pour DotClear-1.2.7 pour ceux qui préfère utiliser jQuery plutôt que mootools :
> L'installeur : plugin-dcjQueryLightBox-0.2.pkg.gz> L'archive : plugin-dcjQueryLightBox-0.2.tar.gz
N'hésitez pas à me dire si ça marche chez vous
Bonjour, tout d'abord bravo pour ce plugin bien optimisé (plus rapide, ça se sent).
Par contre, j'ai un "petit" soucis. Étant passé de LightBox à jQuerySlimbox pour le passage à Dotclear 1.2.7, j'ai un nouveau phénomène que je n'avais pas avant : les images agrandies passent derrière mes textes et cadres (aussi avec le SlimBox "normal", ce qui ne se produisait pas avec LightBox).
Aurais-tu une solution ?
ps : mon site : http://www.tepeeconcept.com
Autant pour moi, cela ne marchait effectivement pas bien avec SlimBox (original), mais quand je l'ai remplacé par jQuerySlimbox, je n'avais pas vu qu'il y avait d'autres procédures après l'install.
Et avec jQuerySlimbox, l'affichage marche très bien... Merci
> tepee :
Merci pour le test et les retours
J'ai mis à jour le plugin Slimbox pour que les images agrandies soit toujours devant.
Et j'ai créer une nouvelle version du plugin dcjQueryLightBox (0.2).
bon bin oilà, je vois que je passe trop tard ^^' lol
je lis que tu as deja modifié les z-index du slimbox
en fait à partir de 200,300 on est censé être tranquille, je vois parfois des z-index=100 mais guere plus (sauf tooltips de jquery à 3000) donc faut voir...
les css du jquery lightbox sont biens faut s'en inspirées pour les autres je pense.
bonjour,
j'ai installé le plugin slimbox sur mon blog dotclear 1.2.7 je retrouve bien l'effet slimbox mais par contre j'ai un souci avec mes images qui ne sont pas assez éclairées, elles sont meme plutot sombres .. est ce que j'aurais raté un réglage ? voici un exemple :
bonjour
j'ai un petit souci avec le plugin slimbox. mes images apparaissent bien avec l'effet slimbox sauf quelles ne sont pas éclairées ...
voici mes lignes wiki
J'ai installé Slimbox sur un blog dotclear test il y a 15 jours et ça fonctionne parfaitement. Dimanche, je désintalle ligthbox de mon site (border-follie.be) pour installer slimbox et ça ne fonctionne pas, je suis sûre que tout est bon, mais quand je clique sur l'image du post, la fenêtre flash s'affiche, la photo s'ouvre mais l'ensemble reste dans le brouillard, comme avec un calque. J'ai été voir sur ton site et il y a le même problème. Peux-tu m'aider ? Un tout grand merci d'avance. Florence
Oups, c'est ma faute. Désolé
J'avais ajouté le "z-index:100" au mauvais endroit dans le fichier "slimbox.css".
J'ai mis à jour le plugin. Pour que la modif soit prise en compte, il faut supprimer les répertoires slimbox suivant :
- dotclear_rep/share/slimbox- dotclear_rep/ecrire/tools/slimbox
Il faut ensuite réinstaller le plugin.
Merci pour la réaction rapide et ce magnifique plugin qui FONCTIONNE parfaitement !
> Flo :
Merci pour ton retour
Fonctionne parfaitement sur mon blog Dotclear 1.2.7, donc juste un grand MERCI pour le superbe travail fournit
A++
Bonjour,
J'ai vu que votre site n'utilise plus Slimbox mais un autre script utilisant jQuery. Quelle est la raison de ce changement? Utilisez-vous d'autres scripts basés sur jQuery? Ou alors est-ce parce que DotClear 2 inclut jQuery en standard?
Maintenant imaginez un Slimbox basé sur jQuery, avec un effet identique à l'autre Slimbox mais un code deux fois plus compact que celui du script que vous utilisez à présent: est-ce que vous reviendriez alors vers Slimbox?
> Christophe : Tu semble attaché au nom Slimbox !? Celui-ci se justifie à partir du moment où le script sous jacent porte ce nom.
Pour le choix de la librairie c'est effectivement un souci de cohérence avec Dotclear (comme c'est rappelé dans le billet)
J'ai un problème d'installation avec Dotclear 1.2.6 qui me signale "Une erreur s'est produite lors du téléchargement du fichier"...
(http://13sportif.free.fr/blog/publi...)
C'est assez emmerdatoire!
> jp : C'est bizarre je n'ai pas de problème de téléchargement de mon coté !
Bonjour,
Slimbox 2 pour jQuery est sorti et peut désormais être téléchargé depuis son site officiel.