Un loup blessé

jeudi 8 mai 2008

Clearbox et Shadowbox en remplacement de Lightbox2

Source originale : Un loup blessé par 1loup

Cela fait plusieurs semaines que je travaille sur ce billet, testant beaucoup de chose afin d'essayer de faire quelque chose d'exhaustif. Attention, ce billet est très long, très lourd, limite insipide par endroit. Aussi, un petit sommaire ne fera pas de mal :

01 Pourquoi abandonner Lightbox2, la référence ?

02 Quels sont les autres possibilités ?

03 Pourquoi avoir choisi Clearbox et Shadowbox ?

04 Tests de ClearBox et ShadowBox

05 Résultats des tests

06 Conclusions ?

07 Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

08 Remplacement du plugin LightBox pour DotClear 1

09 Utilisation de ClearBox et ShadowBox

10 Et vous...

Cela vous permettra de lire ce billet en plusieurs fois si vous en avez envie, chaque numéro de "chapitre" est cliquable.

Pourquoi abandonner Lightbox2, la référence ?

Parce qu'il est un peu lourd par rapport à ce qu'il fait (Plus de 200Ko tous javascripts confondus). Il est vraiment très bien puisqu'il passe partout (tous les navigateurs de tous les OS) mais ne faire QUE les images, c'est maintenant insuffisant !

Quels sont les autres possibilités ?

Il y en a une quantité phénoménale. Après pas mal d'heures à les tester, j'ai retenu Shadowbox et Clearbox. Petit tour rapide sur l'exclusion des autres :

(Cliquez ici si vous n'êtes pas intéressé par cette liste et passer à la suite.)

Lightbox Slideshow : Dérivé de Lightbox, ajout de la fonction slideshow. Toujours avec Prototype, ne fait que les photos.

LightBox 2 de DrMickey utilisant LightBox2 et LightView donne un sildeshow aux coins arrondis, très joli mais toujours sous Prototype.

Un LightBox personnalisé : Avec Moo.Fx mais ne faisant que les photos.

Videobox : Un lightbox pour les vidéos mais sous Mac OS X dans Firefox, aucune vidéo de visible (celle de Google) alors qu'elle est bien visionable si je l'ouvre dans un nouvel onglet.

Lightview : Découvert pour MarcelDugomier sous WordPress, qui n'arrivait pas à installer "simplement" LightBox, le plugin pour WordPress est facile d'utilisation mais depuis, après quelques essais, il s'avère décevant ! En faisant un test sur une vidéo mov en H264, celle-ci est toute aplatie malgré les tailles transmises. De plus, la licence "sans modification possible du script" est gênante. Le summum de l'impossible pour moi : le CSS est INVALIDE et l'auteur ne comprend pas ce que cela veux dire

Lightwindows : L'un des plus intéressant sur le plan des fonctionnalité mais sous prototype et pas de slideshow. Hihihi, les mov ne fonctionnent pas sous Internet Explorer 6 !

Moodalbox : Contenu mixte, avec Mootools, pas de slideshow

Slightbox : Ne fait apparemment que les photos et pas de slideshow. (Au moment où j'écris, le serveur ne répond plus, je ne peux pas mettre d'extrait mais je laisse une place en espérant que le site réponde à nouveau)

mooSlideBox 3 : Pas convaincu du tout par l'aspect, utilise mootools. L'animation qui surgit par le bas, c'est une bonne idée mais j'ai comme l'impression que mon écran n'est pas utilisé au maximum de ses capacités (et devoir cliquer sur le "close" )

Slimbox : Clone de Lightbox mais avec Mootools donc plus léger mais ne fait que les images.

Multibox : Multiformats. Utilise Mootools. Gèle la fenêtre de Firefox sous Mac OS X.

Multifaceted Lightbox : Ne fais pas que les photos mais pas très "multi" non plus. Bouton close obligatoire. Bof !

Leightbox : Lien close obligatoire. Assez moche selon mes gouts.

Glassbox : Trop compliqué à utiliser à mon gout.

SqueezeBox : Si j'ai bien compris, c'est encore en béta, il n'y a pas assez d'explications sur le site pour que je juge le truc. Fonctionne avec Mootools.

MediaBox : Utilise Mootools, multiformat, ne fait pas les images mais possibilité de le coupler avec Slimbox.

LITbox : L'utilisation ne me convient pas.

LighboxXL : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Lighbox++ : Multiformat. Comme Lightbox, fonctionne avec Prototype.

PrettyPhoto : N'est pas très beau selon mes gouts et ne fait que les photos. Par contre, jQuery ET le javascript est très petit.

iBox : Multiformat. Pas de galerie ni de slideshow.

SmoothBox : Comme Thickbox mais avec Mootools. Multiformat.

jQuery Lightbox : Lightbox en jQuery mais ne fait que les photos, pas de slideshow.

HighSlide JS : Très joli mais me parait beaucoup trop compliqué à utiliser ! Multiformat. Bouton close obligatoire.

FrogJS Javascript Gallery : Fonctionne avec Prototype. Uniquement les photos.

GreyBox : Ne me convient pas du tout, j'ai trouvé cela vraiment moche, les boutons de navigation tout en haut ne me plaisent pas non plus. (multiformat)

GreyBox Redux : Pas très intéressant en dehors de la taille réduite par rapport à l'original.

Suckerfish Hoverlightbox et Suckerfish Hoverlightbox Redux : Ne me plaisent pas visuellement.

FrontBox : Ne me plait pas du tout visuellement. (multiformat)

Slightly ThickerBox : Evolution de ThickBox, sous jQuery. Je trouve cela moche.

Lytebox : Multiformat. J'ai longtemps testé car le slideshow est vraiment très bien mais les lyteframes posent vraiment trop de problèmes suivant les navigateurs utilisés.

GmapsOverlay : Un lightbox pour les Google Maps, utilisant Mootools.

SlimBox Extended version : Bof, encore avec Mootools. (multiformat)

Bumpbox : Encore avec Mootools, me semblait bien sympa avec l'animation qui "tombe" mais ni le flash ni les pdf ne fonctionne sur ma config !

PopBox : Je n'ai pas franchement approfondi le sujet.

FancyBox : Seulement images, en jQuery, pas de Slideshow.

FancyZoom : Kif Kif et en plus je n'aime pas trop.

nyroModal : Très sobre, je n'ai pas vu s'il était possible de faire des slideshows et j'avoue ne pas avoir tout compris. (Utilise jQuery) A étudier ?

Control.Modal : Pas tout compris non plus. Utilise Prototype.

TinyBox : Utilise prototype. Ne semble faire que les photos. Bouton close obligatoire.

Milkbox : Utilise Mootools, seulement photos, pas de slideshow.

RoeBox : Combinaison de LightBox et SlimBox, seulement les photos, pas de slideshow.

Awesome Box : Ne fait que les photos, pas de slideshow.

Splash : Je n'aime pas trop les couleurs utilisées pour les boutons mais je note qu'il y a un slideshow. Dommage que les grandes images ne soient pas redimensionnées à la taille de l'écran.

Thickbox : Contenu mixte, avec jQuery donc plus léger mais ne fait pas de slideshow. Visuellement, je n'aime pas.

Facebox : Utilise jQuery mais ne me plait pas visuellement. Possède un slideshow.

Pourquoi avoir choisi Clearbox et Shadowbox ?

Shadowbox est compatible avec Lightbox et je n'ai donc pas besoin de changer les codes de mes très nombreuses images, il prend le relai. On peut l'utiliser avec le couple Prototype-Scriptaculous, avec jQuery, avec Mootools... j'ai choisi jQuery car mes essais avec Mootools n'ont pas été satisfaisants et jQuery est plus léger que Prototype-Scriptaculous.

J'ai même essayé avec le Protoculous effect packer gzippé disponible dans le Protopack (28Ko seulement), tout est Ok sur un hébergement 1and1 mais ne marche pas avec un hébergement Free par exemple, donc jQuery est plus à même de convenir à plus de monde.

Clearbox fait de très jolis slideshow et permet d'ouvrir des frames simplement au survol de la souris (choix "click" ou "over").

On retrouve dans un slideshow, la flèche gauche pour reculer d'une image, en haut à gauche le bouton play pour lancer le slideshow, en haut à droite le bouton "close" :

Voici la flèche vers la droite pour avancer d'une image et le bouton play qui est devenu un bouton "pause" une fois le slideshow lancé, une barre de défilement avançant au rythme du temps qui reste avant de passer à l'image suivante :

En se déplaçant dans la partie inférieure de l'image, les miniatures qui composent la galerie s'affichent avec la possibilité de cliquer pour passer directement à l'image en question :

Pour voir le slideshow en action, cliquez sur ce lien, attendez que toute la page soit affichée puis cliquez sur une image de cette galerie.

Clearbox et Shadowbox retaillent les très grandes images qui ne peuvent s'afficher dans votre écran et vous les présentent dans un format compatible avec la résolution de votre écran.

Les frames sur les pages web distantes sont plus sympa avec Shadowbox, les grandes images qui ne doivent pas être retaillées aussi.

Les CSS des deux sont valides W3C et l'ensemble des javascripts Shadowbox+Clearbox ne fait (en Ko) que moins de la moitié de mon Lightbox d'origine.

J'ai rencontré de nombreux scripts où il fallait impérativement cliquer sur le bouton "close" pour quitter alors que ClearBox et ShadowBox (comme beaucoup d'autres) se ferment aussi en cliquant à l'extérieur (dans la zone sombre).

Attention, tout n'est pas parfait non plus avec Shadowbox, les ascenseurs obtenu avec les codes <pre></pre> sont bien masqués (le contenu des box passent au dessus) mais non grisé sous Firefox/Mac OS X. Je positionne donc un ascenseur entre la série des Clearbox et celle des Shadowbox afin de voir. Le problème semble résolu avec Firefox 3 béta 5, à suivre.

Tests de ClearBox et ShadowBox

Le plus simple est donc de tester en direct live une certaine quantité de contenu sur différents navigateurs d'OS différents, GO GO GO :

(Cliquez ici si ces tests ne vous intéressent pas et passer à la suite.)

Le flv "seul" (14) n'est pas géré par Clearbox, il est juste là pour vérifier que le navigateur propose de télécharger le fichier. Tandis qu'une des fonctionnalité intéressante de Shadowbox est d'utiliser un FLVplayer intégré.

Je teste sur plusieurs type de vidéos (Youtube, Google...) car lors de mes tests avec LyteBox, j'ai constaté que cela fonctionnait avec YouTube mais pas Google alors que les deux sont pourtant des animations flash.

La page Web de ClearBox est très longue à obtenir car en Hongrie.

Si vous souhaitez multiplier les tests, voire que je teste autre chose comme les pdf transformés en swf, je vous conseille plutôt d'aller sur une page de test où vous n'aurez pas besoin d'attendre l'affichage complet de mon thème qui contient pas mal de "parasites" (au sens long à afficher) dans les sidebarres. (Les effets de type Lightbox ne pouvant se déclencher qu'une fois la page complètement chargée)

Avec Clearbox :

Contenu Web2.0 :
(01) Une vidéo YouTube - (02) Une vidéo Google - (03) Une vidéo DailyMotion - (04) Une vidéo wat.tv - (05) Une bande annonce trouvé sur le net - (06) La page web de Clearbox

Photos, Gallerie, Slideshow
(07) Une photo trop grande retaillée par défaut - (08) La même photo trop grande en taille normale, scrollable
(09) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3
(10) Une galerie avec Preview et "start" - -

Flash et dérivés
(11) Un MP3 lu par NeoLao - (12) Une vidéo flv avec le neoplayer - (13) Une animation flash simple - (14) Une vidéo flv

Formats divers
(15) Une video wmv - (16) Une vidéo mov H264 - (17) Une vidéo mpg


Texte de test compris dans des balises pour obtenir l'affichage d'ascenceurs et voir ce que cela donne avec les effets Shadowbox et Clearbox...

Avec Shadowbox :

Contenu Web2.0 :
(18) Une vidéo YouTube - (19) Une vidéo Google - (20) Une vidéo DailyMotion - (21) Une vidéo wat.tv - (22) Une bande annonce trouvé sur le net - (23) La page Web de Shadowbox

Photos, Gallerie, Slideshow
(24) Une photo trop grande retaillée par défaut - (25) La même photo trop grande en taille normale, déplaçable, à la manière des "GoogleMaps"
(26) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3

Flash et dérivés
(27) Un MP3 lu par NeoLao - (28) Une vidéo flv avec le neoplayer - (29) Une animation flash simple - (30) Une vidéo flv

Formats divers
(31) Une video wmv - (32) Une vidéo mov H264 - (33) Une vidéo mpg

Vous pouvez bien entendu me rapporter des configurations sous lequel cela ne fonctionne pas ou pas bien. Merci de me transmettre l'O.S., le navigateur et leurs versions. Si cela ne fonctionne pas du tout ou si c'est légèrement dégradé. Attention, avant de mettre en cause l'effet Shadowbox ou Clearbox, vérifiez que le contenu s'affiche lorsque vous ouvrez le lien dans un nouvel onglet ou une nouvelle fenêtre, et donc qu'il ne vous manque pas un codec ou que le site de partage de vidéo n'est pas en carafe !

Résultats des tests :

(Pour aller directement aux conclusions : ↓ )

1 - Sous WINDOWS XP SP2

a - Internet Explorer 6 :

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

Légère dégradation de l'effet Shadowbox (fondu au noir / bordure basse de l'iframe) sur tous les tests

(33) Les boutons du player mpg ne sont pas présents.

b - Firefox 3 béta 5

(15) No video apparait pendant le chargement de la vidéo WMV et après sa diffusion, les boutons du player ne sont pas présents.

(31) Comme (15)

c - Opera 9.26

Aucune des animations ClearBox (01)(17) ne s'arrêtent avec le bouton "close", le son continue et si on relance une autre vidéo à la suite, pendant le chargement de la suivante, on revoit les images de la précédente.

L'effet Clearbox est comme "au ralenti" avec un P4 à 2,4GhZ et un P4 à 3GhZ.

d - Internet Explorer 7

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

(16)(17) Pas d'autoplay des vidéos mov et mpg.

(32)(33) Mov et Mpeg continuent de jouer le son après le "close", les boutons des players ne sont pas présents.

e - Firefox 2.0.014

(15) La vidéo WMV s'ouvre en externe dans le Windows Media Player (c'est peut être un paramétrage chez moi)

(16)(17) Pas d'autoplay des mov et mpg.

f - Safari 3.1

(15) Ouvre le WMV dans Windows Media Player et retourne en page d'accueil pour le navigateur.

(16)(17) Pas d'autostart des mov et mpg.

(31) WMV non lu, le symbole Windows Media apparait dans la frame mais rien ne se passe.

2 - Sous Windows 2000 SP2

Résultats sous réserve, le PC de test ne possède pas de carte son. J'ai considéré le test comme Ok si l'animation/la vidéo se charge et est visionable.

a -Internet Explorer 5 : Pas d'effet Clearbox ni Showbox.

b - Firefox 2.0.0.6 :

(01) à (14) Ok

(15) à (17) non testés, les codecs ne sont pas installés

(18) à (30) Ok

(31) à (33) non testés, les codecs ne sont pas installés

3 - Sous Mac OS X 10.4.11 (Tiger)

a - Firefox 3 béta 5

(15) Ecran noir sur le WMV

(25) Le déplacement est "bizarre"

(31) Parfois l'écran reste noir au lieu d'avoir le WMV et comme (32)(33)

(32)(33) Les vidéo MOV et MPG restent en surimpression après le "close" et il faut un clic supplémentaire pour les faire disparaitre.

Mais bon, ce n'est qu'une béta et la très bonne nouvelle, c'est que les ascenseurs (overflow:auto des <pre></pre>) ne restent plus visible comme sous les versions 2.

b - Opera 9.50 beta

Le 1/4 inférieur bas de l'écran n'est pas assombri avec les clearbox comme si la taille de la fenêtre n'était pas transmise au script correctement.

Il arrive parfois qu'en lançant une animation, on voit la précédente pendant le chargement.

(14) Ne propose pas de télécharger le flv mais présente une erreur

(15) Les boutons du player WMV apparaissent en haut avant de reprendre leurs places.

c - Safari 3.1.1

(14) Le contenu "hexa" du flv est présenté dans la frame.

(15) Pas d'autostart sur le WMV.

d - Firefox 2.0.0.14

Les overflow:auto des balises <pre></pre> font que les ascenseurs restent visibles (ne sont pas assombris).

(13) Légère dégradation de l'animation au lancement, peut être due à l'ascenseur juste en dessous.

(15) Pas d'autostart, les boutons du player apparaissent en haut avant de reprendre leurs places en bas.

(15)(16)(17) Manque une zone grise sur le côté droit des player.

(33) La lecture du MPG provoque l'apparition d'artefacts colorés en dessous (sur la page web qui a été assombrie).

Conclusions ?

Je pense faire une mise à jour de ce tableau récapitulatif dès que j'aurais un peu plus de tests et en particulier un sous Linux et l'autre avec Internet Explorer 8 ou en fonction des retours d'utilisateurs...

Une zone blanche est "Configuration non testée", une zone verte pour "Tout est Ok", une zone jaune pour "Légère dégradation acceptable", une zone rouge pour "Ne fonctionne pas correctement ou pas du tout". J'ai encadré de bleu la zone systématique à problème qui concerne les MOV, MPEG et WMV aussi bien avec ClearBox (15,16,17) qu'avec ShadowBox (31,32,32).

Shadowbox et Clearbox sont donc les deux qui me conviennent le mieux : Plus léger que Lightbox, compatible Lighbox, plus complet que Lightbox.

Le slideshow de la ClearBox me botte grave. C'est probablement uniquement pour lui que j'ai intégré le script. Faire des liens qui s'ouvrent sur des domaines externes rien qu'au survol, c'est sympa aussi. Pour tout le reste (et surtout pour l'affichage de flash et dérivés), ShadowBox est pas mal du tout. Evitons d'intégrer des vidéos WMV et MPG, le rendu est vraiment trop variable. Attention avec les MOV aussi. Opera a encore du mal avec les effets de type LightBox. Internet Explorer 5 sous Windows 2000 est "tout rouge" mais c'est normal, il n'est pas prévu pour, le test était là surtout pour montrer qu'en restant avec un vieil OS (W2000) mais avec un navigateur récent et soucieux des standards (Firefox), on pouvait obtenir quelque chose de tout à fait acceptable.

Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

- Pour la ClearBox, les modifications que j'ai effectuées sont principalement de la traduction de Hongrois (que nous parlons tous depuis le berceau, n'est-ce pas ?), les chemins des images et la suppression de l'url du fichier "ClearBoxé". En effet, lorsque l'url est assez longue, la box était bien centrée mais l'url provoquait un agrandissement sur la droite inesthétique :

Aspect d'une ClearBox avec une url longue

Si vous souhaitez retrouver ce texte, dans le fichier clearbox.css, cherchez :


CB_Text {
text-align: center;
display:none;
}

et supprimez la ligne avec "display:none;"

J'ai aussi modifié les images : et originales en et , plus parlant, non ?

- Pour la ShadowBox, les modifications que j'ai effectuées sont principalement les chemins des images.

Je vous propose donc un pack sous forme de fichier archive au format zip. Après téléchargement, dézippez le, uploadez à la racine de votre blog le dossier "clearshadow".

Si vous ne positionnez pas ce dossier à la racine ou que vous changez son nom, il vous faudra changer les chemins des fichiers .js et .css en recherchant les occurrences de /clearshadow/ dans les codes qui suivent en partie A et dans les fichiers : clearbox.css, clearbox.js et shadowbox.js.

Les morceaux de code à rajouter sont :

Partie A, après la balise <head> et avant la balise </head> de votre thème, rajoutez ceci :

Pour un fonctionnement avec jQuery (conseillé) :

(Les 4 premières lignes sont pour la ShadowBox, les 2 dernières pour la ClearBox)


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec le Protoculous effect packer gzippé (à vous de vérifier la compatibilité de votre hébergement) :


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/protoculous.js.gz"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-prototype.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec Mootools, Yahoo! User Interface Library, Ext ou Dojo Toolkit, consultez le site de l'auteur pour obtenir les fichiers "adapters".

Partie B, ensuite, juste après la balise <body>, rajoutez sur la ligne suivante :

(Pour la ShadowBox)

<script type="text/javascript">window.onload = Shadowbox.init;</script>

Pour DotClear 1, partie A et B se font dans le fichier template.php

Pour DotClear 2, j'ai mis la partie A dans _head.html et la partie B dans _top.html mais attention, les thèmes DotClear 2 peuvent déjà avoir jQuery d'inséré donc vérifiez. Si dans le thème au niveau du _head.html, vous trouvez un code du genre :

<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>

alors il ne faut pas insérer dans le partie A, cette portion de code :

<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>

Il faut, par contre, laisser cette portion de code :

<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>

Pour WordPress, partie A et B sont à mettre dans header.php mais en faisant attention car votre thème utilise peut être déjà jQuery ou Prototype/Scriptaculous. Il faut donc choisir l'adapter en fonction de votre thème et supprimer dans le code que je vous donne la librairie déjà incluse par votre thème.

Il existe aussi deux plugins ShadowBox pour WordPress : Shadowbox JS et Shadowbox mais rien pour ClearBox.

Et voilà ! Si vous aviez précédemment installé une lightbox, il faut bien évidemment supprimer le code qui la concernait.

Remplacement du plugin pour DotClear 1

Pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, il faut supprimer ces lignes comprises entre <head> et <head> :


<link rel="stylesheet" href="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/lightbox.js"></script>

mais pas besoin d'enlever le plugin

Si vous utilisiez les balises rel="lightbox", pas besoin d'y toucher, Shadowbox les reconnait.

Toujours pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, vous aviez peut-être patché le fichier class.wikixhtml.basic.php afin d'insérer les ligthbox en wiki. Je vous propose alors de le patcher à nouveau, pour DotClear 1.2.1 à 1.2.8, remplacez votre fichier par celui-çi (une fois décompacté, bien entendu, pour remplacer celui dans /inc/classes/ que vous aurez au préalable sauvegardé - A vos risques et périls).

Comme avant, vous pourrez obtenir l'effet lightbox avec cette syntaxe wiki : [lien|url||titre||LIGHT] ou un album avec [lien|url||titre||album].

Pour le paramétrage des ShadowBox et ClearBox, il suffit de rajouter le contenu du "rel" comme celà (en wiki) : [lien|url||titre|||rel] avec rel=clearbox ou rel=shadowbox, exemple : [lien|url||titre|||shadowbox; width=320; height=240;] rajoutera un effet shadowbox avec une taille de 320 par 240.

Et comme moyen mnémotechnique, j'utilise "1-2-3" : il y a 1 signe "|" entre le lien et l'url, 2 signes "|" entre l'url et le titre et enfin 3 signes "|" entre le titre et le paramètre "rel".

Plugin Gallery : Sous DotClear 1, j'avais modifié le fichier /share/gallery/themes/default/galleryGal.php en transformant cette ligne :


<a href="<?php dcGallery::imageURL(); ?>#gallery" title="<?php dcGallery::imageName(); ?>">

en :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="lightbox[<?php dcGallery::galTitle(); ?>]" title="<?php dcGallery::imageName(); ?>">

afin d'obtenir l'effet lightbox sur mes galeries. Si j'avais conservé cela, c'est l'effet ShadowBox qui aurait été pris en compte. Comme j'adore le slideshow ClearBox, j'ai remplacé par :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="clearbox[<?php dcGallery::galTitle(); ?>,6,start]" title="<?php dcGallery::imageName(); ?>">

et j'obtiens un slideshow qui démarre automatiquement au clic d'une image avec un timer de 6 secondes entre chaque image.

ClearBox et ShadowBox s'utilisent avec le paramètre rel="..." à indiquer dans le lien (href). En regardant le code source de la page de test "http://1loup.net/testclear.html", vous avez pas mal d'exemples à suivre.

Ce n'est pas un plugin, c'est donc à vous de rajouter des morceaux de code dans vos billets. Je ne trouve pas cela intéressant d'insérer systématiquement une shadowbox ou clearbox à chaque insertion d'image à partir des gestionnaires de média comme le font certains plugins. Ce n'est pas franchement pertinent, surtout sur les images de tailles moyennes. Je trouve que c'est plutôt à conserver pour les grandes images ou les galeries, les vidéos... Du coup cela nécessite de mettre un chouilla les doigts dans le code. Personnellement, j'utilise le wiki de DotClear 1, cela ne pose donc pas de problème. Sous DotClear 2, le wiki doit être "patchable" de la même façon mais je n'ai pas encore testé. Il suffit de regarder la fonction "__parseLink" dans le fichier que je fourni, elle comporte deux rajouts qui ne sont pas indentés comme le reste du code et sont entourés de commentaires. Sous WordPress, après avoir inséré votre image, il suffit de passer en mode HTML (ou code) et de rajouter le "rel" au niveau du lien :

Remplacer <a href="... par <a rel="shadowbox" href="... par exemple, au niveau du code de votre image.

Utilisation de ClearBox :

- Pour une image, un rel="clearbox" suffira

- Pour une galerie, un rel="clearbox[nomdelagalerie]"

- Pour un slideshow, un rel="clearbox[nomdelagalerie,nombredesecondesentre2images,start]"

- Pour une image non réduite à la taille de l'écran, un rel="clearbox(width,height,click)" (avec width et height les largeur et hauteur de l'image) et en remplaçant click par over, l'ouverture de la clearbox se fera au survol de la souris au lieu du click.

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="clearbox(width,height,click)" aussi.

Je crois que vous ne trouverez pas beaucoup plus d'information sur la page de l'auteur car elle est écrite en Hongrois mais si vous êtes à l'aise avec cette langue et que vous trouvez des infos que j'ai passé sous silence, je vous serais reconnaissant de m'en faire part.

Utilisation de ShadowBox :

- Pour une image, un rel="shadowbox" ou rel="lightbox" suffira

- Pour une galerie, un rel="shadowbox[nomdelagalerie]" ou rel="lightbox[nomdelagalerie]"

- Pour une image non réduite à la taille de l'écran, un rel="shadowbox;options={handleLgImages:'drag'}"

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="shadowbox; width=largeur; height=hauteur;" en remplaçant largeur et hauteur par leur valeurs respectives

Vous trouverez, bien entendu, plus de paramétrage et d'options sur la page de l'auteur (en anglais).

Et vous...

Vous avez eu bien du courage d'arriver jusqu'ici

Mais, vous, qu'en pensez-vous ?

Connaissez-vous des scripts de ce genre que je n'ai pas testé ?

Si vous voulez un coup de main pour l'installation et/ou l'utilisation, n'hésitez pas à demander de l'aide dans les commentaires. J'ai écris tellement de trucs et je suis quand même assez geek que je peux trouver cela facile alors que cela peut vous sembler "nébuleux" !

Je préfère ClearBox et ShadowBox, j'ai essayé de vous expliquer pourquoi mais c'est aussi une histoire de goûts et de couleurs, hein... Je ne vais pas me facher si vous trouvez cela immonde et que vous préférez les solutions que j'ai rejeté

Voilà comment un geek fait une incursion dans les Lightbox-like

Rappels des pièces jointes : Le pack ClearBox-ShadowBox et le fichier class.wikixhtml.basic.php pour DotClear 1.

Source originale/ Original post on : Un loup blessé par/by 1loup

Billet écrit à 07:11 par 1loup dans la catégorie General

YES... déjà 88 commentaires :: Comme d´hab, pas de trackback

Tag(s) : DotClear - , DotClear 2 - , Javascript - , WordPress -

↓

Commentaires et trackbacks

1. Le jeudi 8 mai 2008 à 08:07, par fiuuu

j ai presque tout lu ! tu as encore fait un remarquable travail d'anlayse loup !! et le resultat visuel des galeries et slidchépaquoi est tres joli et me donne envie !
bon j'ai pas tout compris pour l'instal :(:(:(: mais je relirai plus tard
bises

2. Le jeudi 8 mai 2008 à 22:44, par Nyro

Je suis le créateur de nyroModal cité ici.
Mon plugin est sobre puisqu'il est destiné à être modifié par l'utilisateur pour correspondre exactement aux attentes du designer.
Tout est paramétrable : aspect par CSS, animation par Javascript.
Le slideshow n'est pas une fonctionnalité de mon plugin pour le plugin. Il est possible avec un peu de code de l'implémenter.
J'ai aussi créer la page d'explication accessible ici : nyromodal.nyrodev.com/ind...
en espérant que ce sera plus clair.

Très beau billet sinon (même si je n'ai pas tout lu)

3. Le vendredi 9 mai 2008 à 03:44, par 1loup

J'ai fait les tests avec la distribution Xandros d'origine de mon eeePC et c'est pas mal du tout tandis qu'avec Internet Explorer 8b1 sous Windows XPsp2, c'est vraiment pas brillant donc pas la peine de me rapporter vos tests pour ces 2 configurations.

>Fiuuu: Ne te tracasses pas pour l'installation, tu me dis ce que tu veux et je te fais cela comme d'hab !

>Nyro: Ouah, génial, je n'avais pas vu qu'il y avait du français sur ton site. Bon, là, je sature un peu niveau test de "box" en tout genre mais comme j'avais mis dans mon avis "à étudier", je reviendrais peut-être plus tard voir cela. Heureusement que je n'ai pas dit du mal de ton travail

4. Le mardi 13 mai 2008 à 04:26, par Guillaume

wow c'est vraiment une référence ton billet !! je favorise tout de suite et dès que j'en ai besoin je repasse !!!

Je n'utilise pas trop ces lightbox et cie sur mon blog mais je voit ça sur d'autres de mes sites

5. Le jeudi 15 mai 2008 à 02:21, par aristo

Salut,
superbe étude !!! Ca m'a donné envie de quitter light pour clear... Mais j'ai rencontré une difficulté totalement incompréhensible : si je veux modifier la teinte de l'arrière plan à l'ouverture de l'image et mettre du blanc à la place du noir, par exemple, ou autres couleurs, ca ne marche plus... Sur plusieurs couleurs testées, le noir et le rouge ont fonctionné et rien d'autre. A n'y rien comprendre !!!
> Voir dans fichier clearbox.js
> var CB_HideColor='#000';

Si quelqu'un à une idée...
Merci

6. Le jeudi 15 mai 2008 à 07:42, par 1loup

>Aristo: J'ai essayé avec du bleu, du blanc et du vert, cela a fonctionné. Il est probable que tu n'avais pas vidé le cache de ton navigateur après le changement et avant l'essai. Les javascripts sont parfois persistants et il faut vider le cache pour être certain que les changements que tu effectues soient pris en compte.

7. Le lundi 19 mai 2008 à 18:20, par vincent

Salut,
bien sympa ton article. Par contre j'ai un petit souci, j'essaie d'utiliser shadowbox ou clearbox avec protype/scriptaculous ou jquery, ça marche apparemment nickel! Par contre quand le même lien est contenu dans un fichier php que j'appelle dans une div (genre: nodstrum.com/2007/02/27/ajaxcontentload/ ou res.nodstrum.com/jQueryPHPContent/index.html), là, plus rien. Je peux pas mettre en ligne mes essais je ne dispose pas encore d'internet chez moi! J'espère que tu pourras m'aider si tu cernes le problème, ça fait un moment que je bataille et mes connaissances en programmation sont limitées! Merci

8. Le lundi 19 mai 2008 à 18:57, par 1loup

>Vincent: Sans voir le code, je suis incapable de te répondre. Si tu veux me l'envoyer par mail, clique sur mon "visage" dans la sidebarre.

9. Le mardi 27 mai 2008 à 19:46, par David (AzurDev)

Un gros inconvénient à Clearbox par rapport à Shadowbox: si le contenu n'arrive pas, on a pas moyen d'annuler et on est bloqué.

Sur Shadowbox le bouton "Cancel" marche bien, même si les boutons sont moins jolis.

10. Le mardi 27 mai 2008 à 20:55, par 1loup

>David: Avec la ClearBox, pour annuler, tu cliques en dehors de la box (dans la zone assombrie). En tout cas, avec les essais que j'ai fait, cela fonctionnait bien comme cela.

11. Le mardi 27 mai 2008 à 21:03, par David (AzurDev)

Non. Sur leur site www.clearbox.hu/ la 3e photo de la 1ère série met longtemps à s'afficher (chez moi en tout cas) et impossible de sortir du chargement.

12. Le mardi 27 mai 2008 à 21:15, par 1loup

Argh, effectivement ! Les essais que j'avais fait étaient sur des vidéos. Visiblement, les photos ne sont pas traitées pareils, dommage

13. Le mardi 27 mai 2008 à 21:58, par David (AzurDev)

Shadowbox me plait beaucoup. Sauf le bouton "Close" qui est moche, anglais et mal placé...

Si on peut arranger ça, ce serait bien. Il est à peine plus lourd que Slimbox que j'avais choisi pour sa légèreté.

Je vais re-regarder tout ça mieux dans les prochains jours.

14. Le mercredi 28 mai 2008 à 22:40, par David (AzurDev)

> Il est à peine plus lourd que Slimbox que j'avais choisi pour sa légèreté.

J'ai rien dit! Il faut rajouter le poids d'une librairie, par exemple Mootools, et ça change tout.

15. Le jeudi 29 mai 2008 à 20:47, par David (AzurDev)

Petite question à ce propos: quand on a le choix comme avec Shadowbox d'utiliser différentes librairies, si on en a pas l'usage ailleurs, il vaut mieux choisir laquelle? J'ai vu que tu conseilles jQuery, c'est parce que c'est la plus légère?

16. Le vendredi 30 mai 2008 à 11:42, par 1loup

(Réponse subjective, hein...)
Quand j'ai commencé à comparer les lightbox-like, j'ai visionné "dans mes conditions de travail", à savoir avec Mac OS X et Firefox. Or, souvent, j'avais des trucs qui marchaient mal ou pas du tout et à chaque fois, c'était avec Mootools ! J'ai donc écarté Mootools d'emblée.
Ensuite, je n'ai pas porté trop attention aux box qui utilisaient autre chose que Prototype/Scriptaculous ou jQuery sauf si le truc était intégré.
Prototype/Scriptaculous donne de bons résultats mais est vraiment trop lourd sauf si tu utilises une version compressé voire Gzippée (mais attention à la compatibilité avec ton hébergeur).
De fait, pour une solution plus légère et plus "universelle", oui, je conseille du coup jQuery.

17. Le vendredi 30 mai 2008 à 13:16, par David (AzurDev)

D'accord, merci.

18. Le vendredi 30 mai 2008 à 22:47, par David (AzurDev)

Ah ben moi c'est l'inverse. jQuery merdouille pas mal (surtout en mettant animSequence: "sync") et c'est pire dans IE.

Je croyais qu'il était plus léger que Mootools, mais en fait c'est l'inverse! (27ko contre 55ko). Retour à Mootools pour moi.

19. Le vendredi 30 mai 2008 à 23:31, par 1loup

"Mon" jQuery ne fait que 29Ko.

>animSequence: "sync"
Je ne vois même pas de quoi tu parles !

Pour IE, comme c'est une bouse totale au niveau respect des CSS, cela n'a rien d'étonnant que cela merdouille. Dans mon tableau récapitulatif, IE6 marche bien avec ClearBox mais est dégradé avec ShadowBox, IE7 se débrouille bien avec les 2, (IE8b1 merdouille grave) en utilisant jQuery pour la ShadowBox.

20. Le mardi 17 juin 2008 à 16:52, par 170

Superbe article! J'aime beaucoup Clearbox mais j'ai un petit souci: il bloque l'accès à la fonction "plein écran" du JW FLV Media Player <www.jeroenwijering.com/?a... Une idée pour résoudre le problème?

21. Le mardi 17 juin 2008 à 17:54, par 1loup

>170: Où puis-je voir une page avec une ClearBox qui bloque la fonction plein écran du JW FLV Media Player afin de comprendre de quoi tu parles (et regarder le code) ?

22. Le mardi 17 juin 2008 à 18:21, par 170

www.olivierberten.info/me...

J'utilise Firefox 3 sur Ubuntu 8.04

23. Le mardi 17 juin 2008 à 18:33, par 170

Élément supplémentaire : ça ne marche pas ici 1loup.net/index.php/2008/...
Par contre aucun problème là 1loup.net/testclear.html avec ShadowBox

24. Le mardi 17 juin 2008 à 19:55, par 1loup

Je pense qu'il faut que tu cherches ailleurs, le problème ne vient pas de la clearbox.

En effet, lorsque l'on clique sur ce lien où il n'y a pas de clearbox, le plein écran ne fonctionne pas non plus :

test

(C'est un morceau du code de la page que tu m'as donné à lequel j'ai rajouté les chemins absolus et viré la clearbox et le title)

Je constate aussi que les versions des players ne sont pas du tout les mêmes, une piste ?

25. Le mardi 17 juin 2008 à 22:09, par 170

En fait, la raison est simple mais la solution l'est nettement moins... pour qu'un objet flash puisse accéder au mode plein écran, il faut déclarer le paramètre allowfullscreen dans le tag. C'est ce que fait ShadowBox mais que ne fait pas Clearbox... et comme le script est compressé, je n'ai pas la moindre idée de comment faire la modification...

www.jeroenwijering.com/?i...

26. Le mercredi 18 juin 2008 à 08:11, par 1loup

Lorsque l'on se sert d'un code valide XHTML de ce genre :
<div>
<object width="480" height="290" type="application/x-shockwave-flash" data="http://www.olivierberten.info/mediaplayer.swf">
<param name="movie" value="http://www.olivierberten.info/mediaplayer.swf" />
<param name="flashvars" value="file=http://www.olivierberten.info/video/Villa%20Vivaldi%201%20HQ.flv" />
<param name="allowfullscreen" value="true" />
</object>
</div>
On obtient ceci :

Et là, tu vois bien que le plein écran fonctionne.

C'est ce que fait Shadowbox, elle intercepte les flv pour les traiter de cette façon au lieu de les considérer comme de "simple" animation flash. La Clearbox n'interceptant pas les flv, il faut trouver un moyen pour transmettre le allowfullscreen=true dans le lien utilisé
 (dans 
<a href="http://www.olivierberten.info/mediaplayer.swf?width=480&amp;height=290&amp;searchbar=false&amp;autostart=true&amp;file=http://www.olivierberten.info/video/Villa%20Vivaldi%201%20HQ.flv&amp;allowfullscreen=true" ">test</a>
 où mettre le allowfullscreen ? )
Je pense qu'il faudrait que tu t'adresses à un forum spécialisé en flash pour voir s'ils peuvent t'aider (ou passer à la shadowbox puisqu'elle fait ce que tu veux).

27. Le mercredi 6 août 2008 à 22:08, par Yo

Salut,

Merci pour les infos c'est très intéressant et cela fonctionne sur les essais que j'ai pu faire sur des pages Html par contre j'arrive pas à trouver de solution pour du Flash. Ce que je cherche c'est faire mon site en Flash et quand je clique sur un bouton j'ouvre ma page (en Html avec des images, du texte des tableaux etc...) dans une Shadowbox. J'ai essayé énormément de choses toute la journée mais je n'y parviens pas. Si quelqu'un connait la solution cela m'aiderait beaucoup parce que je perds du temps précieux et je m'arrache les cheveux. lol

Merci

28. Le jeudi 7 août 2008 à 01:27, par 1loup

>Yo: Je ne connais rien à la programmation en Flash. Tout ce que je sais faire c'est de diffuser des animations Flash valide XHTML. Je suis donc désolé de ne pouvoir t'aider.

29. Le jeudi 7 août 2008 à 13:34, par Yo

Merci ... et un forum spécialisé ou l'on pourrait me donner la solution tu en connais ?
Encore merci

30. Le jeudi 7 août 2008 à 17:41, par 1loup

www.developpez.net/forums...

flash.mediabox.fr/

www.flashkod.com/infomsg....

31. Le vendredi 15 août 2008 à 13:59, par DecIRC

Salut,

Alors chapeau pour l'article.
Sur mon blog, Dotclear 1.2.8, avec un thème chambre sensé supporté LightBox, j'ai pas réussi à faire tourner le plugin. J'ai installé ton pack et le paramètre LIGHT fonctionne maintenant.
Par contre, je n'ai aucune différence quand je rempace LIGHT par clearbox ou shadowbox.
J'ai du me planter quelque part, mais je n'arrive pas à trouver ou

cEd

32. Le vendredi 15 août 2008 à 17:50, par 1loup

>DecIRC: Pour pouvoir t'aider, il serait plus facile que tu m'indiques l'url d'un billet que tu as publié en m'indiquant le code exact que tu as mis dans ce billet et que je regarde le code source pour voir ce qui cloche.

Comme tu parles de paramètre LIGHT, je suppose que tu écris tes billets en wiki. As-tu correctement remplacé le fichier class.wikixhtml.basic.php par celui que je fourni ou es-tu avec celui fourni par le plugin lightbox ?

Le paramètre LIGHT et clearbox/shadowbox ne se met pas au même endroit en syntaxe wiki :
Pour LIGHT, c'est [lien|url||titre||LIGHT] tandis que pour clearbox et shadowbox, il y a un signe | de plus,
Clearbox : [lien|url||titre|||clearbox]
Shadowbox : [lien|url||titre|||shadowbox]

33. Le vendredi 15 août 2008 à 17:55, par DecIRC

@1loup : waouw, la réactivité.
Si tu cliques sur mon pseudo, tu auras un billet.

Le code est en wiki, j'ai bien patché le fichier class

[Ma jolie photo|/images/Circe_Offering_the_Cup_to_Odysseus.jpg||Circé offrant la coupe à Odyssée||LIGHT]

[Ma jolie photo|/images/Circe_Offering_the_Cup_to_Odysseus.jpg||Circé offrant la coupe à Odyssée|||clearbox]

[Ma jolie photo|/images/Circe_Offering_the_Cup_to_Odysseus.jpg||Circé offrant la coupe à Odyssée|||shadowbox]

Le | de plus à sauvé le clearbox, mais le shadowbox et le LIGHT me donnent exactement le même résultat...

cEd

34. Le vendredi 15 août 2008 à 18:37, par 1loup

J'ai été voir. Ouf, j'ai eu peur. Le rendu est conforme. Je croyais qu'avec la shadowbox, tu avais l'effet Lightbox. Tu as bien l'effet Shadowbox, à la fois sur LIGHT et shadowbox. Et c'est voulu, puisque la shadowbox est censée remplacer l'effet lightbox sans avoir besoin de toucher au code.

Si tu ne veux pas que la shadowbox remplace lightbox, il faut rentrer dans le code du fichier shadowbox.js et modifier cette partie :
rel:/^(light|shadow)box/i,gallery:/^(light|shadow)box\[(.*?)\]/i
Si j'étais toi, je tenterais à la place :
rel:/^shadowbox/i,gallery:/^shadowbox\[(.*?)\]/i

(mais je n'ai pas essayé, hein...)

35. Le vendredi 15 août 2008 à 20:37, par DecIRC

Ha ben non, c'est génial. Plus qu'à tenter de se mettre d'accord avec madame si on choisis ShadowBox ou ClearBox...
Un énorme merci en tout cas à toi pour ton article et pour le suivi que tu y apportes.

cEd

36. Le samedi 16 août 2008 à 00:07, par 1loup

>DecIRC: Attention au Wiki si tu formes des "albums" (plusieures photos liées entre elles), il faut protéger les [ et ] pour clearbox et shadowbox :
ne pas écrire clearbox[nomdelalbum] ni shadowbox[nomdelalbum] mais clearbox\[nomdelalbum\] ou shadowbox\[nomdelalbum\]

37. Le dimanche 17 août 2008 à 16:26, par ryg

Superbe article !
Bravo pour le morceau de bravoure ! Déjà tester toutes ces box, c'est pas rien, mais en plus faire un petit résumé sur chaque, c'est excellent.

J'ai testé moi aussi beaucoup de box, avant de jeter mon dévolu sur Shadowbox, dont j'appréciais le style, les effets, et les multiples formats pris en charge. Le seul truc qui m'ennuie, c'est l'absence de slideshow. Du coup, je découvre ici la Clearbox et waow !!! Slideshow, miniatures et tout, et j'adore le look. Vraiment sympa.
Je m'en vais essayer ça de suite.

Petite question : comment fais-tu ton choix pour Clearbox/Shadowbox alors ? L'une pour les galeries photos, l'autre pour les vidéos ?
Ou alors tu changes suivant l'humeur ?
Vu qu'elles n'ont pas le même rendu, je pense qu'il est bon de garder une uniformité non ?

Merci en tout cas pour l'article : direct dans les favoris.

38. Le dimanche 17 août 2008 à 17:23, par ryg

Je confirme, le rendu est excellent...

Par contre j'utilise aussi jQuery UI Tabs (stilbuero.de/jquery/tabs/... dans ma page, et le fait d'ajouter le script de clearbox désactive tous mes tabs, ils apparaissent en forme "texte" sans mise en page...

C'était trop beau...Il va falloir trouver le pourquoi du comment.

39. Le lundi 18 août 2008 à 08:11, par 1loup

>Ryg: Je ne garde pas d'uniformité. J'ai choisi d'utiliser la clearbox dans mes galeries de photos mais dans mes billets, c'est plutôt la shadowbox.
Par contre, je ne vais pas pourvoir t'aider pour le jQuery UI Tabs, je n'utilise pas et je ne sais pas comment cela fonctionne !

40. Le mercredi 20 août 2008 à 14:19, par philbihr

Excellent article que j'aurais dû lire avant de galérer pendant 2 semaines dans le dédale de toutes ces "Box".
Ces 2 "Lightbox sont très bien.
Il y a juste un petit reproche que, personnellement, je ferais à Clearbox, c'est de ne pas pouvoir afficher, sous les images un texte, une légende, avec le tag "Title". A moins que j'aie mal lu la doc.
Dommage car c'est quand même le plus beau des 2 "slideshow"
Je ne suis pas un spécialiste de Javascript, aussi est-ce très innocemment que je pose la question : est-ce compliqué de rajouter
cette fontionnalité ?

Merci pour ton travail.

Philippe

41. Le mercredi 20 août 2008 à 17:05, par 1loup

>Philbihr: Le faire sur ce pack n'est pas possible, le code Javascript est compressé et obfusqué (illisible). Par contre, en allant voir le site de l'auteur, il semblerait que cette fonctionnalité soit dans la version 2.5 de ClearBox. Malheureusement, pour l'instant, il va te falloir te débrouiller tout seul, je n'ai pas le temps de me replonger dans la traduction de Hongrois. Je le ferais certainement (car de plus, il existe une nouvelle version pour la ShadowBox) pour remettre ce pack à jour mais pas maintenant.

42. Le mercredi 20 août 2008 à 18:30, par Yo

Re Salut

Je cherche toujours une solution pour faire une effet shadowbox en partant d'un site en flash sans réponse.
J'ai posté sur les differents forums proposés et meme d'autres sans aucune réponse.
Si quelqu'un ici à des infos depuis cela m'arrangerait beaucoup.
Je suis meme pret a payer la personne qui s'occupera de me faire les pages et les codes java, xml, xhtml, AS ou autres nécessaire.
Pour me contacter : plagazombie (@) free (.) fr
Merci

43. Le mardi 2 septembre 2008 à 22:53, par Yves

Salut à tous et à toi 1loup,

Un grand merci à toi pour m’avoir fait découvrir cet excellentissime Clearbox ! C’est vraiment puissant comme truc.
Par contre j'ai eu beaucoup de peine à faire marcher ton pack car certaines infos sont contenues dans la .css et d’autres appartiennent à Clearbox.
Il y avait par exemple des problèmes de chemin avec le / devant les chemins qui chez moi faisait tout foirer, etc. Je n'avais alors que tes images de remplacement (précédent / suivant), et pas le reste des images originales.

Finalement je me suis rabattu sur le pack original version 2.5 sur le site de l’auteur et là... tout marche mais surtout il y a pas mal de nouveaux paramétrages possibles !

// NEW in ClearBox 2.5:

CB_HideOpacitySpeed=400,
CB_ImgOpacitySpeed=450,
CB_TextOpacitySpeed=350,
CB_HideOpacity=.85,
CB_AnimSpeed=600,
CB_ImgTextFade='on',
CB_FlashHide='off',
CB_SelectsHide='on',
CB_NoThumbnails='on',
CB_SimpleDesign='off',
CB_ImgMinWidth=200,
CB_ImgMinHeight=160,
CB_CloseOnH='on',
CB_ShowGalName='off',
CB_AllowedToRun='on',
CB_AllowExtFunct='off',
CB_FullSize='on'

De plus on peut changer tous les textes qui sont en hongrois par ce qu’on veut, les paramètres à changer (genre : "on" ou "off") sont très clairs et maintenant en anglais! Les flèches sont jolies, etc.
Bref, ya pas à hésiter...

Il est maintenant effectivement tout à fait possible de mettre des commentaires sous les photos, d'inclure ou non la ligne de vignettes qui apparaît au survol de la souris en bas de la photo, etc.

Exemple de code pour un slideshow (diaporama) avec un commentaire :

<a href="images/parodies/parodies_12-big.jpg" rel="clearbox[parodies,,2,,start]" title=" Ici je place le commentaire "><img src="images/parodies/parodies_12.jpg" width="65" height="64" alt="" border="0"></a>

Il va chercher les images qui font partie du groupe "parodies" - l'image s'affiche durant 2 secondes puis passe à la suivante - start veut dire que cela démarre tout seul (sinon on doit cliquer sur "play") - et le commentaire en bas de la photo sera "Ici je place le commentaire".

Regardez sur la page de l'auteur les exemples et vous verrez mieux ce qu'on peut faire où non : www.clearbox.hu/index.php...
Sur cette même page vous verrez les différents paramètres à changer dans le .js

Ce traducteur hongrois-anglais peut aider un peu mais ce n’est pas magique non plus, faut pas rêver : www.translation-guide.com...
Inutile de tester hongrois-français, ça donne rien de compréhensible !

Voilà en gros j’ai réussi à faire tout ce que je voulais, sauf un truc, je n'arrive pas à enlever le bouton pour "télécharger" l'image (il l'ouvre dans une autre fenêtre). C'est le petit bouton dont le pictogramme est un triangle pointant vers le bas posé sur une ligne.
Enfin oui, je peux enlever le commentaire du bouton et le bouton mais il reste alors un espace entre 2 barres verticales qui sont moches. Mais y'a surement un moyen, si jamais vous trouvez... je suis preneur.

A bientôt, jespère que cela a pu aider d’autres que moi, et encore merci 1loup de m’avoir amené à ce petit outil génial !

Yves (Genève)

44. Le mercredi 10 septembre 2008 à 00:34, par xavier

petite soluce pour lancer ShadowBox via FLASH (ou plutot AS3):

dans une class AS3:
pour des images:

import flash.external.*

urlpage = "ici l'url de la page";
titre = "ici le titre";
ExternalInterface.call("openShadowbox",urlpage,'img',this.name);
//si tu veux mettre du HTML:
//code_a_afficher = "<div id='exemple'><a href='urlimage'>texte</a></div>";
//ExternalInterface.call("openShadowbox",code_a_afficher,'html',this.name);

**********************************************************

apres dans ton HTML qui lance le swf :

on met le code normal:
<script type="text/javascript" src="js/shadowbox/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox.js"></script>Shadowbox.loadSkin('classic', 'js/shadowbox/skin');
Shadowbox.loadLanguage('en', 'js/shadowbox/lang');
<script type="text/javascript">
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'js/shadowbox/player');
window.onload = function(){
Shadowbox.init();
};
</script>

et un petit code en + (c'est la fonction que flash appel via ExternalInterface.call
var openShadowbox = function(content, title){
Shadowbox.open({
content: content,
player: player,
title: title
});
};
</script>

voila....

45. Le mardi 16 septembre 2008 à 14:06, par Peter

salut
,sur le clearbox

moi j'arrive pas du tout a faire afficher les boutons !! j'ai que les texte mais les boutons suivant et precedent ( en hongrois sont afficher !!
comment regler le probleme ??

46. Le mardi 16 septembre 2008 à 19:35, par 1loup

>Peter: J'ai été voir l'url que tu m'as donné par mail et je vois bien les boutons ! Un problème de cache de ton navigateur peut-être ? En tout cas, à ce que je vois, ce n'est pas mon pack que tu utilises mais la dernière version de ClearBox, non ? Et là, ce billet est uniquement pour le pack que j'avais "fabriqué", je n'ai pas le temps de me plonger actuellement dans les nouvelles versions, il faudrait que je mette à jour ClearBox, ShadowBox et jQuery...
Mais sinon, en général, lorsque les "boutons" n'apparaissent pas c'est que le chemin dans les CSS et/ou les javascripts ne sont pas corrects. Par exemple, mon pack est prévu pour fonctionner "à la racine" des hébergements. Si ce n'est pas le cas, il faut rechercher toutes les occurrences de /clearshadow/ dans les fichiers CSS et JS et adapter en conséquence. Pour la ClearBox "nouvelle version", je suppose que c'est pareil, si tu as du texte en hongrois, tu recherches ce texte dans tes fichiers pour retrouver l'association avec les boutons et tu adaptes tes chemins.

47. Le mercredi 1 octobre 2008 à 02:29, par COil

Mon dieux mais tu es fou ma parole ! En tout merci pour le billet

48. Le mercredi 1 octobre 2008 à 21:46, par french-petzouille

Bonsoir ,
Bravo et merci pour se pensum !

j'ai une interrogation sur Shadowbox et sa capacité de lancer une video à partir d'un liste pop up.

Je souhaite lancer la video dont le chemin d'acces est mis dans l'atttribut "value" de la balise <option>

en 2 mots:

<select name="tuto" onchange="Shadowbox.init();">';
<option value="le chemin de la video 1"> Video 1 </option>
<option value="le chemin de la video 2"> Video 2 </option>
<option value="le chemin de la video 3"> Video 3 </option>
</select>

Je déroule la liste sur Video 2 et elle se lance à la mode Shadowbox
Est-ce possible ?

merci

49. Le jeudi 2 octobre 2008 à 01:15, par 1loup

>French-petzouille: Aucune idée. Peut-être en voyant le site de l'auteur : mjijackson.com/shadowbox/... ou en s'adressant sur le forum : www.nabble.com/Shadowbox-... ?

50. Le jeudi 2 octobre 2008 à 09:09, par french-petzouille

Merci quand même
je post dans le forum avec mon pauvre anglais
et vous tiens au courant
cela servira peut-être à d'autres

51. Le vendredi 3 octobre 2008 à 11:09, par french-petzouille

Voilà une des solutions
inspirer vous de ce code pour l'adapter
bien commode pour lancer une video depuis une liste construite via une baise <select> et un onchange

<head>

<script type="text/javascript" src="src/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="src/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'src/skin');
Shadowbox.loadLanguage('fr', 'src/lang');
Shadowbox.loadPlayer(['html', 'iframe', 'img', 'qt'], 'src/player');
</script>
<script type="text/javascript">
function test(url) {
Shadowbox.init();
Shadowbox.open({
player: 'qt',
title: '',
content:url,
width: 768,
height: 576
});
}
</script>

</head>

<body>

<select onchange="test(this.value)">
<option value="http://www.google.fr">google</option>
<option value="http://www.mozilla-europe.org">firefox</option>
<option value="http://www.siteduzero.com">site Du Zero</option>
</select>

</body>

Merci au Sitedu Zer0 et a son forum dynamique +++

52. Le vendredi 3 octobre 2008 à 17:30, par sidoNY

Bonjour,

Tout d'abord un grand merci pour ce blog et l'aide en ligne!! C'est une mine d'or d'informations.
Jusqu'à présent je me servais de shadowbox et après avoir vu l'effet clearbox, j'ai tenté d'utiliser ce petit bijoux pour un slide mais j'ai quelques souci quand à l'attente de chargement de la galerie photo. Mes photos pèsent moins de 200ko chacune, je ne comprends pas pourquoi tant de temps au chargement??
Merci de l'aide

53. Le dimanche 5 octobre 2008 à 17:10, par 1loup

>French-petzouille: Merci d'avoir recopié ici la solution, cela peut effectivement servir à d'autre. (je me suis permis de remettre en forme ton commentaire)

>SidoNY: J'avoue que je ne comprend pas trop ce qui se passe chez toi. En faisant l'expérience de vider le cache entre chaque test, il y a des fois cela prend un temps fou et des fois la réponse est immédiate. J'ai comme l'impression que le problème ne vient pas de la clearbox mais du serveur : parfois, le download était comme "saturé" à 16ko/s ! A ta place, je tenterais sur un autre hébergement avec le même code pour voir ce que cela donne. J'essaierais aussi sur le même hébergement de remplacer la clearbox par shadowbox voire lightbox, en vidant le cache du navigateur à chaque fois et en faisant l'expérience au moins 5 fois sur chaque pour voir s'il y a des différences significatives. Désolé de ne pas pouvoir t'aider plus.
Eventuellement, regarder de plus prêt le paramétrage de la clearbox, je ne connais pas cette version, j'utilise encore la version précédente, voir s'il n'y a pas un "timer" quelque part (même si je n'y crois pas trop).

54. Le lundi 6 octobre 2008 à 16:18, par sidoNY

bonjour,

J'ai effectivement un problème de serveur. J'ai souscrit un hébergement gratuit à OVH me permettant de mettre en ligne des sites internet sur lesquels je travaille et apparemment je ne dispose pas d'assez de mémoire sur le disque.
Pour ceux que cela intéresse, avec un hébergement Start5G, le clearbox fonctionne normalement contrairement avec un hébergement Start1M.

Merci beaucoup pour votre aide.

55. Le mercredi 8 octobre 2008 à 16:26, par RC

Bravo, super boulot.
J'avais choisi Shadowbox avant la lecture de l'article. Me voilà rassuré.
Merci!!

56. Le lundi 13 octobre 2008 à 09:47, par Sophie

Salut, tout d'abord merci pour ton tuto, ça m'est très utile.
J'ai essayé de mettre en place Shadowbox mais j'ai un souci. Avec Firefox, tout est nickel. Par contre, sous IE7, quand je clique sur mon image, le fond noir apparait mais l'image agrandie, se trouve en dessous du fond et tout en bas de ma page. Pourrais-tu jetter un oeil car je cherche mais ne trouve pas de solution. La page en question est www.bcbufi.com/Accueil.ht.... Merci d'avance pour ton aide.

57. Le mardi 14 octobre 2008 à 00:51, par Fabrice

Bonjour !
Merci pour ce billet - il est très intéressant par-contre, je n'ai pas trouvé réponse à mon problème.
voilà de quoi il s'agit : j'essaie en vain d'installer shadowbox, sur Prestashop, qui utilise un éditeur Smarty.
le problème surgit lorsque je pose un lien avec un rel_shadowbox
l'éditeur supprimer purement et simplement ce bout de code; et donc shadowbox ne s'active pas.
hors de l'éditeur, ça fonctionne (dans un tpl par exemple)
donc les scripts sont bien en place dans le header.

Sauriez-vous comment je peux faire en sorte que SMARTY ne supprime pas mon code ?

j'ai essayé avec {litteral} et aussi {ldelim} et {rdelim} pour tenter "d'exclure" cette partie du code, mais rien n'y fait...

Merci beaucoup pour vos suggestions. ça fait des heures que je cherche. et je désespère un peu carrément là.

58. Le mardi 14 octobre 2008 à 01:10, par 1loup

>Sophie: Je ne pourrais pas jeter d'oeil, je n'ai plus de PC, son alimentation a cramé. Je n'ai plus qu'un Mac, je ne peux donc tester qu'avec Opera, Firefox et Safari !
>Fabrice: Prestashop, Smarty, tpl... je ne sais même pas de quoi tu parles. Je suis donc bien incapable de t'aider.

59. Le mardi 14 octobre 2008 à 01:32, par Sophie

Le blog, sous DotClear, d'un Geek Gay DVDvore. Naïf paranoïaque, utopiste désabusé.

Clearbox et Shadowbox en remplacement de Lightbox2

Commentaires et trackbacks