Un loup blessé

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

Contenu | Menu | Sidebarre | Extra | Recherche | Bas de page

Clearbox et Shadowbox en remplacement de Lightbox2

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.

Extrait Lightbox Slideshow

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

Extrait LightBox 2 de DrMickey

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

Extrait Lightbox personnalisé

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.

Extrait Videobox

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 :ouhla:

Extrait Lightview

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 !

Extrait Lightwindows

Moodalbox : Contenu mixte, avec Mootools, pas de slideshow

Extrait Moodalbox

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)

Extrait Slightbox

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" :( )

Extrait mooSlideBox 3

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

Extrait Slimbox

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

Extrait Multibox

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

Extrait Multifaceted Lightbox

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

Extrait Leightbox

Glassbox : Trop compliqué à utiliser à mon gout.

Extrait Glassbox

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.

Extrait SqueezeBox

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

Extrait MediaBox

LITbox : L'utilisation ne me convient pas.

Extrait LITbox

LighboxXL : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait LightboxXL

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

Extrait Lightbox++

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.

Extrait PrettyPhoto

iBox : Multiformat. Pas de galerie ni de slideshow.

Extrait iBox

SmoothBox : Comme Thickbox mais avec Mootools. Multiformat.

Extrait SmoothBox

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

Extrait jQuery Lightbox

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

Extrait HighSlide JS

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

Extrait FrogJS Javascript Gallery

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)

Extrait GreyBox

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

Extrait GreyBox Redux

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

Extrait Suckerfish Hoverlightbox

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

Extrait FrontBox

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

Extrait Slightly ThickerBox

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.

Extrait Lytebox

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

Extrait GmapsOverlay

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

Extrait SlimBox Extended version

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 !

Extrait Bumpbox

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

Extrait PopBox

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

Extrait FancyBox

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

Extrait FancyZoom

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 ?

Extrait nyroModal

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

Extrait Control.Modal

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

Extrait TinyBox

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

Extrait MilkBox

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

Extrait RoeBox

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

Extrait Awesome Box

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.

Extrait Splash

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

Extrait Thickbox

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

Extrait Facebox

  • 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" :

Extrait Slideshow Clearbox 1

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 :

Extrait Slideshow Clearbox 1

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 :

Extrait Slideshow Clearbox 1

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).

Tableau récapitulatif des tests effectués

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 : Bouton précédent d'origine et Bouton suivant d'origine originales en Bouton précédent modifié et Bouton suivant modifié, 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 :ange:

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é :pasbien:

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

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

Tag(s) :   - ,  - ,  - ,  - 

Share/Bookmark

Petit intermède musical Vuit HD

Trackbacks

Aucun trackback.

Pour faire un trackback sur ce billet, changez tb.php par tada.php dans ceci :
http://1loup.net/tb.php?id=1202

Commentaires

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

Gravatar

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

Gravatar

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

Gravatar

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 :ange:

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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

>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)

Gravatar

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

Gravatar

>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)

Gravatar

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

Gravatar

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)

Gravatar

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)

Gravatar

> 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)

Gravatar

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

Gravatar

(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)

Gravatar

D'accord, merci.

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

Gravatar

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

Gravatar

"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

Gravatar

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

Gravatar

>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

Gravatar

www.olivierberten.info/me...

J'utilise Firefox 3 sur Ubuntu 8.04

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

Gravatar

É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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

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

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

Gravatar

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

Gravatar

>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

Gravatar

@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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

Mon dieux mais tu es fou ma parole 8-O ! En tout merci pour le billet :ange:

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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

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

Gravatar

>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

Gravatar

oh ;-( bon, ok. Merci quand même, je vais encore chercher :-)

60. Le mardi 14 octobre 2008 à 01:46, par 1loup

Gravatar

>Sophie: Je crois que j'ai trouvé (mais je ne pourrais pas vérifier, hein...) :
mjijackson.com/shadowbox/...

Tout en bas :

"Question: Why does the Shadowbox window open up halfway down the page in Internet Explorer?

Answer: The answer to this problem may be that you are not using a strict or transitional DOCTYPE as explained on the support page. In short, placing either of the following code snippets at the top of your HTML page should help:..."

Traduction : Ta page n'a pas de doctype et shadwobox fonctionne sous Internet Explorer avec un doctype strict ou transitionnel. Tente donc de rajouter un doctype transitionnel (mais il faudrait alors aussi revoir ton code, le passer au validateur, il ne me semble pas tip top...)

61. Le mardi 14 octobre 2008 à 02:32, par Fabrice

Gravatar

merci quand même 1loup.

ton blog est vraiment sympa. ;-)

62. Le mardi 14 octobre 2008 à 12:36, par Sophie

Gravatar

Merci beaucoup 1loup, j'ai rajouté un doctype et tout est nickel maintenant :banane:
PS: Comment ça mon code n'est pas tip top, :pasbien: je ne suis pas d'accord ;-)
Encore merci :-)

63. Le mardi 14 octobre 2008 à 12:46, par 1loup

Gravatar

>Sophie: Je maintiens ce que j'ai dit au sujet du code. Tu as choisi un doctype XHTML transitionnel or à ma connaissance :
la balise embed est interdite, tu l'utilises !
<br> doit être remplacé par <br />
align=" est aussi interdit (on passe soit par les CSS soit par un style="text-align:...)
Ta page d'accueil comporte 206 erreurs et 2 warnings selon le validateur du W3C.
Donc OBJECTIVEMENT, ton code est pas tip-top

64. Le mardi 14 octobre 2008 à 13:08, par Sophie

Gravatar

Tu as raison. Je suis novice et je ne connaissais pas le validateur w3c. Je viens de faire une recherche sur le net et je suis tombé sur le site validator.w3.org/. Je vais donc regardé à ça pour corriger les erreurs qu'il me donne.
Merci, tu m'as appris encore qqchose de nouveau :-)

65. Le mardi 14 octobre 2008 à 13:30, par 1loup

Gravatar

>Sophie: Ton code ressemble plus à du HTML 4. Plutôt que prendre un doctype XHTML, tu devrais prendre le doctype HTML 4.01 Transitional. Tu n'aurais plus que 29 erreurs de code sur ta page d'accueil au lieu de 206 pour du XHTML.

66. Le mercredi 15 octobre 2008 à 13:28, par Barfly

Gravatar

Bonjour,

Le site officiel de Clearbox est dorénavant traduit en anglais !
Il y a aussi une nouvelle version du script : 2.6

www.clearbox.hu/EN/

Barfly

67. Le mardi 21 octobre 2008 à 22:53, par cdomi

Gravatar

Bonjour,
Dire que je suis impressionné serait peu.
Je serais même plutôt découragé.
C'est pourquoi j'ose le SOS du parfait débutant .
J'aimerais effectivement être guidé pas à pas pour l'utilisation de votre cleashadowbox.......et désolé j'ai essayé d'inclure le code vu à 1loup.net/testclear.html en utilisant la source mais ......snifffff

Alors quelques précisions mais sinon, y aurait il à votre connaissance un tuto vraiment "pas à pas " pour grands débutants.

SVP :
- je suis chez free
- le dossier "clearshadow" n'est pas à la racine du serveur mais bien à la racine du document "index.html" qui y fait référence => dasn ce cas : y a t-il une modification à apporter au chemin ?, autrement dit : y a t-il intéret dans ce cas à préciser le chemin complet "xxxxx.free.fr/xxx/XXX/cle... ?

Bon y'aurait probablement trop de question mais l'effet en vaut l'effort .

Un lecteur novice impressionné. :bond:

68. Le mercredi 22 octobre 2008 à 03:15, par 1loup

Gravatar

>Cdomi: A ma connaissance, pas de tuto plus "pas à pas". Shadowbox est en Anglais, Clearbox est en Hongrois (et dernièrement traduit en Anglais), c'est pour cela que j'ai créé ce pack.

Ma sidebarre comporte la bannière "Blogging accompagné" / "Je conseille bénévolement les blogueurs néophytes", je vais donc essayer de me mettre à ton niveau ;-)

Question : Pourquoi ne veux-tu pas mettre le dossier clearshadow à la racine de ton hébergement Free ? Il y a une raison spéciale ? Ce serait pourtant plus facile.

Sinon: Si le dossier clearshadow est dans xxx.free.fr/tata/yoyo/clearshadow/, tu recherches toutes les occurrences de /clearshadow/ dans TOUS les fichiers se terminant par .js et ceux par .css dans le pack en regardant bien partout et tu remplaces /clearshadow/ par /tata/yoyo/clearshadow/ et tu fais cela aussi dans les portions de code qui sont insérés entre <head> et </head>.

Attention, chaque fichier que tu modifies peut comporter à plusieurs endroits des appels à "clearshadow", il ne suffit pas de remplacer le premier que tu trouves...

Il n'est pas nécessaire d'indiquer le chemin complet mais si cela ne fonctionne pas, cela peut être la solution.

Il faut que tu fasses les modifications des fichiers avec un EDITEUR de texte (et non pas un traitement de texte) avant de les uploader sur ton espace Free. Si tu es sous Windows, tu peux par exemple utiliser PsPad. Sous Mac, je conseille plutôt TextWrangler.

Afin de t'aider dans ton travail, il serait plus facile que tu me communiques l'url de ton hébergement free que je regarde ton code. Si tu ne veux pas le donner ici (à tout le monde), tu peux me le communiquer par mail en utilisant le formulaire de contact en cliquant ici :
1loup.net/index.php/conta...

D'autres questions ?

69. Le mercredi 22 octobre 2008 à 13:47, par cdomi

Gravatar

:-)
Merci pour ce prompt coup de main.
J'avance .....rq : est ce que je pouvais reculer ? ;-)
Bref, j'aimerais idéalement à partir d'un lien déclencher le diaporama du contenu d'un dossier d'image , ou video , etc .
Est ce réalisable ou bien doit on obligatoirement installer une vignette pour chaque photo "diaporamée"?
Si réalisable : SVP Comment ?

MERCI

70. Le mercredi 22 octobre 2008 à 21:55, par 1loup

Gravatar

>Cdomi: Si je comprends bien ta demande, tout en automatique, ce n'est pas possible comme cela. Il faudrait écrire une routine lisant le contenu du dossier pour extraire les noms des fichiers contenus dans ce dossier.

Si tu es capable d'écrire la liste des fichiers à "diaporamer", oui, on peut trouver une solution.

Si c'est juste pour des photos, le TripTracker Slideshow, qui a un rendu similaire est plus adapté : 1loup.net/index.php/2008/...

Si tu veux faire cela sur autre chose que des photos ou que le TripTracker ne te convient pas, avec shadowbox (ou clearbox), c'est possible, voici comment je ferais (il y a peut-être d'autres solutions mais c'est ainsi que je ferais spontanément) :

On va prendre en exemple le diaporama de 3 photos (photo1.jpg, photo2.jpg et photo3.jpg) qui se déclencherait en cliquant sur un lien texte "Lien déclenchant" avec l'effet shadowbox, ok ?

La syntaxe pour le lien serait : <a rel="shadowbox" href="photo1.jpg">Lien déclenchant</a>

La syntaxe pour les deux autres serait :

<a rel="shadowbox" class="invisible" href="photo2.jpg">Lien invisible</a>
<a rel="shadowbox" class="invisible" href="photo3.jpg">Lien invisible</a>

en rajoutant dans ta feuille de style (CSS), cette règle :

.invisible {
display:none;
}

Et comme tu veux que ces 3 images soient reliés dans un album que tu appelles "album1", par exemple, il faut rajouter [album1] à chaque "rel" soit :

<a rel="shadowbox[album1]" href="photo1.jpg">Lien déclenchant</a>
<a rel="shadowbox[album1]" class="invisible" href="photo2.jpg">Lien invisible</a>
<a rel="shadowbox[album1]" class="invisible" href="photo3.jpg">Lien invisible</a>

Les 3 photos ayant le même [album1] en paramètres, shadowbox va comprendre qu'il faut les relier entre elles.
La class="invisible" (avec sa règle associée dans le CSS) va rendre invisibles les liens qui la comporte, il ne restera plus de visible que le "Lien déclenchant".

Si tu veux faire cela avec clearbox, tu remplaces shadowbox par clearbox.

Si tu ne veux pas que le lien déclenchant soit du texte mais une image appelé "lien.jpg", tu remplaces "Lien déclenchant" par :

<img src="lien.jpg" alt="description de l'image" />

71. Le jeudi 23 octobre 2008 à 14:07, par cdomi

Gravatar

ça avance....les conseils sont bons ......mais, pour être honnête, voilà que je suis tombé sur l'effet que je recherche ++ ici : www.yaelle.com/?p=105 ( voir haut de page : association picture flow + shadow)

Donc, je reviendrais ensuite sur votre dernière réponse qui m'interessera forcemment mais pour l'heure, je me bats avec l'effet double :picture flow+shadowbox.

Vous qui dominez ces "codages", vous serait-il possible de me venir en aide pour le mettre en oeuvre sachant :
1) que mon diaporama ( 310 photos ) est opérationnel sur la base du fichier "test.html" fourni dans l'archive ( www.yaelle.com/toolbox/pi...

2) mais seulement en mode plan défilant à la souris : comment activer la shadowbox comme dans l'exemple en haut de page ici : www.yaelle.com/?p=105. Tous les fichiers semblent ( shadowbox y compris ) inclus dans l'archive. Si c'est bien le cas, ce serait une question de code ......et là je nage .

Désolé, si j'abuse, n'hésitez pas à me le faire savoir .

Amicalement

72. Le vendredi 24 octobre 2008 à 04:45, par 1loup

Gravatar

>Cdomi: Oui, tu abuses ! Nous ne sommes plus là sur mon pack :pasbien: Je te conseillerais donc de poser ta question sur le site de l'auteur. Je ne connais pas PictureFlow, je ne vais pas l'installer pour tes beaux yeux, hein... :rolleyes: Et je te conseillerais aussi de lui donner l'url où tu as installé ton code (comme je te l'ai déjà demandé précédemment) car pour trouver ce qui ne va pas dans un code sans voir le code, il faut être médium :ange:

Je résume :

Tu ne réponds pas à mes questions (Pourquoi ne voulais-tu pas installer à la racine / Quelle est l'url de ton hébergement Free pour voir le code que tu installes). Je te trouve peu coopératif à ce niveau. Si tu ne m'aides pas à t'aider, je ne peux pas faire de miracle.

Et maintenant, tu pars sur autre chose... (PictureFlow + Shadowbox)

Si encore tu m'avais donné l'url, même sans connaître, j'aurais regardé pour voir s'il y avait quelque chose qui sautait à l'oeil mais là, je ne peux rien faire :(

73. Le vendredi 24 octobre 2008 à 14:03, par cdomi

Gravatar

Bonjour,

Et désolé pour mes vieux réflexes.
Bref, merci pour la shadowbox : ça fonctionne....depuis que j'ai mis vle dossier à la racine du serveur ;-).....y'avait pas vraiment de raison à ne pas le faire.

On ne se débarrasse pas de ses réflexes comme ça, alors peut être pourrais je vous transmettre le code "brut" en privé ?

Mais me conseiller la cuisson d'un oeuf ne m'apparaitra pas grossier : don't worry. :deprime:

Plutôt total respect :bisou:

74. Le vendredi 24 octobre 2008 à 21:43, par cdomi

Gravatar

:-)
le diaporama avec les liens "invisible" , ça marche bien .
MERCI

75. Le samedi 25 octobre 2008 à 04:48, par 1loup

Gravatar

>Cdomi: Ben, heureusement que tu dis que le diaporama avec les liens invisibles marche bien ! Shadowbox étant installé ici, j'ai testé le code que je t'ai donné avant 8-)

Plutôt que de me transmettre un code, je préfère que tu me donnes l'adresse (url) où tu as installé cela. En effet, ton code peut être correct mais s'il fait référence à un fichier que tu as mal uploadé sur ton hébergement, on ne peux le voir qu'en ligne.

Pour me transmettre l'url, envoie-moi un mail en cliquant ici : 1loup.net/index.php/conta...

Quand tu dis que ton effet PictureFlow fonctionne avec tes 310 images mais pas la shadowbox, c'est en local (sur ton disque dur) ou sur ton hébergement (free) ? Parce que si tu ouvres le test.html qui est fourni dans le zip, en local, l'effet shadowbox ne fonctionne pas, on a juste l'effet CoverFlow alors qu'en uploadant tout cela sur un hébergement, tout fonctionne ! Cela ne serait pas cela ton problème, par hasard ?

76. Le samedi 25 octobre 2008 à 11:02, par Paul75

Gravatar

Bonjour,

Moi j'utilise Shadowbox et j'entend dire qu'il ne fonctionne pas sous IE6 ??? Car je suis sous Vista [no comment] et donc j'utilise IETester et Shadowbox passe sans soucil sauf que l'image de fermeture ne s'affiche pas.... Une idée ?

Merci

77. Le samedi 25 octobre 2008 à 21:50, par 1loup

Gravatar

>Paul75: Sous IE6 (testé au travail avec un Windows XP), l'image de fermeture de la shadowbox (en version 2) s'affiche normalement, je suppose donc que c'est un problème avec IEtester.

78. Le samedi 25 octobre 2008 à 21:57, par Paul75

Gravatar

Bonjour,

Merci pour ta réponse. :)

J'aurais une autre question : voila j'ai un formulaire et je doit envoyer les données en post vers un fichier php. Je doit m'y prendre comment avec shadowbox ?

Je fait actuellement comme cela :
function submitForm(){
var s = window.parent.Shadowbox;
var q = document.getElementById('login');
var t = q.value;

s.open({
player: 'html',
title: 'Récupération des données',
content: '<div style="padding-top:40px;text-align:center">' + t + '</div>',
width: 300,
height: 100
});
};

Mais je ne voi aps comment faire avec shadowbox. Avec nyroModal j'avais rein a faire il le faisait tous seul. Mais avec nyroModal je n'arrive pas à ouvrir en iframe ma page elle me rend une fenetre fixe...

Merci

79. Le samedi 25 octobre 2008 à 22:16, par 1loup

Gravatar

>Paul75: Même réponse qu'en position 49 (remonte plus haut), désolé.

80. Le mardi 4 novembre 2008 à 08:27, par TomTom

Gravatar

Bonjour et merci 1loup pour cet article très documenté et complet, que je crois avoir lu avec attention et sans fatigue, tant shadowbox correspond à mes attentes!
mais voilà une question que vous pose le débutant que je suis:
Clearbox et Shadowbox sont-ils des outils réservés aux concepteurs de blogs ou peut-on les intégrer à n'importe quel site web (soit comme lecteur ponctuel sur certaines pages, soit comme moyen de navigation pour l'ensemble du site)??
Merci d'avance pour votre réponse, et mille excuses si elle vous semble hors sujet!
Cordialement
TomTom

81. Le mardi 4 novembre 2008 à 08:51, par 1loup

Gravatar

>TomTom: Ce n'est absolument pas réservé aux blogs ! Ce n'est que du code HTML et du javascript, c'est donc utilisable dans n'importe quel site web acceptant la syntaxe.

82. Le mardi 4 novembre 2008 à 09:53, par TomTom

Gravatar

Merci pour votre réponse rapide qui me paraît être une bonne nouvelle! Les sites sur lesquels je travaille sont en html et javascript avec quelques objets flash intégrés, je vais donc me pencher sur la mise en oeuvre de Shadowbox à partir de votre pack... et avec mes très humbles connaissances de ces langages je risque fort de réapparaître sur votre blog avec quelques questions... ou mieux encore avec le lien d'un site où je l'aurai intégré avec succès! ;-)
Merci encore!
TomTom

83. Le mardi 4 novembre 2008 à 19:13, par P2M

Gravatar

Bonjour,

bravo pour cet article hyper complet et la sélection shadowbox clearbox.

J'ai un problème que je n'arrive pas à résoudre, ma liste de photos est insérée dans ma page via un script ajax et du coup lorsque l'on clique sur une image cela ouvre une nouvelle page plutôt que de lancer shadowbox.
Comment résoudre ce problème s'il vous plaît...
Merci de votre aide

84. Le mardi 4 novembre 2008 à 19:33, par 1loup

Gravatar

>P2M: Je n'y connais rien en ajax donc je ne sais pas si je vais pouvoir t'aider. Cependant, le fait que cela ouvre une nouvelle page, je me demande si au lieu (ou en plus) d'avoir le rel="shadowbox", tu n'aurais pas un target="_blank" dans la balise <a> ?
A quelle adresse (url) cela se passe ?

85. Le mercredi 5 novembre 2008 à 09:35, par P2M

Gravatar

>1loup : heu non non le lien href est correct. En fait le problème vient du fait que la liste des vignettes est injectée dans la page après que celle-ci soit chargée, et que du coup l'ensemble des vignettes doivent échapper au script de shadowbox.

J'imagine qu'il faudrait que je puisse appliquer le script shadowbox manuellement sur le div qui contient mes vignettes.
Mais ça je sais pas comment faire.

Où alors il faudrait que j'utilise un iFrame et que je charge une page avec en-tête HTML et appel à shadowbox, mais ça me dérange d'utiliser un iFrame par rapport à la structure de mon code.

86. Le mercredi 19 novembre 2008 à 12:49, par Cerise

Gravatar

J'ai exactement le même prob' que P2M, j'appelle un contenu grâce à un script Ajax et lorsqu'on clique sur les images, ça ouvre une nouvelle page. J'vois pas comment résoudre ça. Si jamais tu as du nouveau la dessus P2M, j'suis à ton écoute :)

87. Le mercredi 19 novembre 2008 à 16:20, par cdomi

Gravatar

Me revoilà avec un gag !
NB : la page est avec un cadre en haut de page

Test sur un même lien :
- ok/clearbox sous IE ou FireFoX
- ok/shadowbox sous Firefox mais pas sous IE : la fenêtre du lien ( video ou iframe ) apparait en bas de page

Si qq a une idée de l'origine du pb?
merci

88. Le jeudi 20 novembre 2008 à 01:45, par 1loup

Gravatar

>Cdomi: Cela ressemble typiquement au problème de "Doctype" incorrect ou absent, mais sans url pour voir, je ne peux pas vérifier. Voir plus haut la réponse numéro 60.

89. Le samedi 22 novembre 2008 à 22:52, par cdomi

Gravatar

En effet,

Tout TYPE a besoin un jour ou l'autre d'un DOC pour que les choses continuent de fonctionner ;-)
Mais la shbox semble plus capricieuse que la clearbox tout de même.

Pour continuer le listage "très appréciable" des "box" en tout genre : je transmets à l'expert éclairé du site celle ci : www.skeuds.com/intro-skeu...

Un avis sur l'art et la manière ?

Anyway.
Merci.....et à bientôt ....je le crains ;-)

90. Le dimanche 23 novembre 2008 à 07:35, par 1loup

Gravatar

Ce n'est pas une "box", c'est une animation flash, cela n'a plus rien à voir ! (même si c'est très réussi)

91. Le dimanche 23 novembre 2008 à 11:45, par cdomi

Gravatar

".swf" ....ben oui....pas très attentif sur ce coup là !
Et d'après vous, existe t-il une possibilité de s'en inspirer ( genre swfdecompiler ou autre.)
?
Merci

92. Le mardi 25 novembre 2008 à 03:02, par 1loup

Gravatar

Aucune idée, je n'y connais rien en flash !

93. Le mardi 25 novembre 2008 à 07:47, par TomTom

Gravatar

Bonjour,
en réponse à cdomi et 1loup:
je n'y connais pas non plus grand chose en flash mais à l'aide d'un petit logiciel permettant de créer des animations .swf, j'intègre depuis longtemps des morceaux de flash à mes pages html et ça fonctionne très bien!
Le flash peut parfaitement imiter Shadowbox mais avec certaines limites, tout dépend de l'utilité: par exemple j'ai très facilement réalisé l'animation du cadre qui se dimensionne automatiquement sous shadowbox, et c'est très crédible pour des images ou du texte (pour encapsuler une page web dans la même esthétique je ne sais pas si c'est possible, je cherche... merci aux spécialistes au cas où...?); il est aussi très facile de personnaliser la bordure du cadre, la couleur de fond ou la vitesse d'exécution, etc. L'inconvénient c'est que tout est paramétré manuellement, donc en cas de mises à jour fréquentes, ce sera plutôt laborieux et surtout, au contraire de shadowbox, le bloc flash est chargé à l'ouverture de la page avec tous les éléments qui le composent, donc nettement plus lourd...
Conclusion, avec du Flash on fait du Flash! mais ça vaut vraiment la peine de s'y intéresser!
NB : mes exemples ne sont pas encore en ligne, mais promis je dépose un lien dès que ce sera le cas...
tomtom

94. Le dimanche 7 décembre 2008 à 13:06, par CacciolaAdrian

Gravatar

Bonjour ! Merci beaucoup pour ce tuto mais je n'arrive pas à integrer Shadowbox , et je suis sur iweb que je modifie post publication . J'ai integrer lightbox et ca marche mais shadow box et vraiment ce qu'il me faut .

De l'aide s'il vous plait !!

95. Le lundi 8 décembre 2008 à 04:07, par 1loup

Gravatar

>CacciolaAdrian: Je ne connais pas iWeb. Sinon, demander de l'aide, ok ! mais quelle aide souhaites-tu que je t'apporte ? L'installation que j'ai présenté pour la ShadowBox, le remplacement de la LightBox, me semblent assez détaillés. Si tu as réussi à installer LightBox, comment se fait-il que tu n'arrives pas à faire pareil avec ShadowBox ? En quoi puis-je t'aider ?

96. Le lundi 8 décembre 2008 à 11:50, par CacciolaAdrian

Gravatar

Merci pour cette réponse très rapide :-D ! Alors voilà : Je ne suis pas un codeur du tout , j'ai juste suivi ce que le site de lightbox avait dit , et ça avait marché . Je fais donc la même chose : Je place "clearshadow" à la racine de mon site , modifie entre les balise <head> et </head> ainsi que <body> et </body> les liens que vous donnez .
Mais maintenant les balises de lightbox ne fonctionnnent visiblement pas . Peut être sont elles à la mauvaise place ? Je vous envoie le link :

<div class="tinyText" style="height: 123px; left: 380px; position: absolute; top: 21px; width: 147px; z-index: 1; ">
<img usemap="#map3" id="shapeimage_4" src="Toute_les_photo_files/shapeimage_4.png" style="border: none; height: 127px; left: -3px; position: absolute; top: -3px; width: 151px; z-index: 1; " alt="" title="" /><map name="map3" id="map3"><area href="Toute_les_photo_files/photo7.jpg" rel="lightbox" title="Toute_les_photo_files/photo7.jpg" alt="Toute_les_photo_files/photo7.jpg" coords="3, 3, 150, 126" /></map>
</div>

C'est iWeb qui génère le link .... C'est un peu compliqué pour moi :-/ . Don si le problème vient du link je ne sais pas ....Ou d'autre chose . Mais j'ai grandement besoin de shadow box ! S'il vous plait aidez moi !

97. Le mercredi 10 décembre 2008 à 02:38, par 1loup

Gravatar

>CacciolaAdrian: Un morceau de code isolé de son contexte ne peut rien m'apporter. Il faut commencer par me donner l'url (l'adresse http://... ) de la page où ce que tu as publié avec la ShadowBox et qui ne fonctionne pas que je puisse regarder l'intégralité du code source.

98. Le mercredi 10 décembre 2008 à 11:58, par CacciolaAdrian

Gravatar

Oups pardon je savais pas ! Voici la page ou j'ai essayé d'intégrer shadowbox : adriancacciola.jean-emile... . Je ne sais pas pourqoi ça ne marche pas ... J'ai tout fait comme tu l'as dit !

99. Le jeudi 11 décembre 2008 à 08:19, par 1loup

Gravatar

>CacciolaAdrian: Ok, maintenant je vois mieux. Excuse-moi, je ne vais pas pouvoir te répondre rapidement mais je ne t'oublie pas. J'ai des idées de tests à effectuer mais là, je n'ai pas le temps de t'expliquer cela. Je "reviens" vers toi le plus vite possible et "au plus tard", ce week-end, ok ?

100. Le samedi 13 décembre 2008 à 17:27, par 1loup

Gravatar

>CacciolaAdrian: En regardant le code source de la page que tu m'as donné, je vois :

Dans le <head>


<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>

Et c'est donc correct. Par contre, plus bas, après l'ouverture du body, il y a :


<script type="text/javascript">window.onload = Shadowbox.init;</script>
<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>

alors, qu'à cet endroit, il ne devrait y avoir que :


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

Supprime donc les deux lignes en trop.

Cependant, même si cela peut faire des interférences, je doute que ton problème vienne de là. C'est plus pour avoir du code "propre", hein...

Ensuite, en tapant comme url http://adriancacciola.jean-emile.com/clearshadow/ (ou même http://adriancacciola.jean-emile.com/clearshadow/shadow/shadowbox.css...), je devrais tomber sur les fichiers qui sont dans le dossier clearshadow. Hors, je tombe sur une erreur 404 qui indique que les fichiers ne sont pas là. Je pense donc que tu n'as pas posé le dossier clearshadow au bon endroit. Suivant les hébergeurs, la racine du site n'est pas forcément au même endroit, elle peut être à l'intérieur d'un dossier www ou d'un public par exemple.

Il faut donc déplacer ton dossier clearshadow pour que lorsque tu tapes http://adriancacciola.jean-emile.com/clearshadow/shadow/shadowbox.css tu tombes sur le fichier shadowbox.css. Il suffit probablement de le monter ou le descendre d'un niveau dans ton arborescence.

Sinon, j'ai jeté un oeil sur le reste de ton site et j'ai vu que tu avais un blog sous WordPress et tu as installé une galeries de photos avec la shadowbox. Tu peux donc tenter autre chose :

Fais l'essai de supprimer le code clearshadow que tu as mis précédemment et remplace le par :


<!-- Begin Shadowbox JS -->
<link rel="stylesheet" type="text/css" href="http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/css/extras.css" />
<script type="text/javascript" src="http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/js/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/js/shadowbox-2.0.js"></script>
<script type="text/javascript">
	Shadowbox.loadSkin('classic', 'http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/skin');
	Shadowbox.loadLanguage('en', 'http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/js/lang');
	var sbConf = {
		flvPlayer: 'http://adriancacciola.jean-emile.com/wp-content/plugins/shadowbox-js/flvplayer.swf'
	};
	window.onload = function(){
		Shadowbox.init(sbConf);
	};
</script>
<!-- End Shadowbox JS -->

que tu insères aussi entre <head> et </head> et vois si ta shadowbox fonctionne ainsi.

101. Le dimanche 14 décembre 2008 à 11:54, par CacciolaAdrian

Gravatar

OOOOOH ça maaarche !!!!! Merci merci merci ! Merci indéfiniment !!!! Ouah je suis suer content ! Merci encore ! :banane: :bond: LOL :-o

102. Le jeudi 18 décembre 2008 à 10:07, par cdomi

Gravatar

Bonjour,

Dans une page avec cadre : peut-on ouvrir la fenetre box
- sur toute la surface de la page ?
- sur un du (des) autre(s) cadre(s) ?

MERCI

103. Le vendredi 19 décembre 2008 à 03:31, par 1loup

Gravatar

>Cdomi: Pas à ma connaissance.

104. Le samedi 20 décembre 2008 à 10:54, par P2M

Gravatar

Bonjour,
question dans le cadre de l'utilisation de shadowbox pour appeler une page qui contient un formulaire.
L'idée serait d'utiliser shadowbox comme un dialogue modal en fait.
Je voudrais, lorsque l'utilisateur clique sur enregistrer, que le contenu du formulaire soit enregistré dans une base MySQL par un script php et que shadowbox se referme automatiquement et enfin qu'un script javascript soit exécuté au niveau de la page qui a appelé shadowbox.
une piste ?

105. Le samedi 20 décembre 2008 à 19:35, par 1loup

Gravatar

>P2M: idées :

* "lorsque l'utilisateur clique sur enregistrer, que le contenu du formulaire soit enregistré dans une base MySQL par un script php" : cela ne relève pas de shadowbox. A toi de programmer cela dans ta page appelée.

* "et que shadowbox se referme automatiquement" : voir avec l'auteur de Shadowbox. Dans la page concernant l'api www.mjijackson.com/shadow... il y a une fonction close() voir si cela correspond à tes besoins.

* "qu'un script javascript soit exécuté au niveau de la page qui a appelé shadowbox." : mettre un flag=0 dans la page appelante, tester si ce flag est à 1 dans une condition qui lance le javascript. Mettre le flag à 1 par la page appelée.

106. Le lundi 22 décembre 2008 à 19:13, par Rodin Pandarex

Gravatar

Bonjour. Ça fait un petit moment que je reviens régulièrement sur ta super note.
J'utilisais il y a peu encore ShadowBox. Malheureusement, il rentre en conflit avec un autre plugin (peu importe lequel, c'est pas très grave)
Du coup, j'aimerais bien tester la ClearBox. Seulement, quand je fais ton installation, c'est bien la ShadowBox qui apparaît. Ce met t'elle par défaut ? où est-ce que la ClearBox est un ajout de la ShadowBox ? pas tout compris ... merci à toi.

107. Le lundi 22 décembre 2008 à 20:13, par 1loup

Gravatar

>Rodin Pandarex: Si si, il faut dire avec quel plugin tu as un conflit car cela peut servir pour quelqu'un d'autre qui passe par là ! Ce billet est plus ou moins en train de devenir une "référence" sur Shadowbox et Clearbox "en français" et donc si tu as des soucis déjà identifié cela peut aider quelqu'un qui aurait le même qui lui ne comprend pas d'où cela vient. Alors s'il te plait, tu viens demander de l'aide, profites-en pour laisser aussi des infos pour les autres :ange:

Clearbox et Shadowbox sont deux box qui n'ont rien de commun, c'est moi qui les ai rassemblé dans ce pack.

La shadowbox réagit à la présence de rel="shadowbox" et rel="lightbox" tandis que la clearbox réagit à la présence de rel="clearbox" !

Pour toi, il y a un autre paramètre qui rentre en ligne de compte, tu utilises aussi mon plugin AutoClearShadow pour Wordpress qui permet de ne pas avoir à écrire ces rel="..." ! Or, d'après ce que je vois chez toi, tu as activé les deux (autoshadowbox et autoclearbox) ! Pour que la Clearbox fonctionne, je pense qu'il faudrait que tu ailles dans ton menu plugin désactiver l'autoshadowbox.

108. Le lundi 22 décembre 2008 à 21:22, par Rodin Pandarex

Gravatar

Ok Ok ...
En fait, je viens de ré-installer ShadowBox (en version JS plugin) et j'ai désctivé le AutoClearBox.
Mon problème est que j'ai un petit plugin, nommé "Snow and more" ou nksnow (www.nkuttler.de/nksnow/) et celui-ci ne marche pas quand ShadowBox est actif.
Etant donné que les flocons sont des images, je penses que cela doit jouer mais moi et le JavaScript ... :-/

109. Le mardi 23 décembre 2008 à 14:52, par cdomi

Gravatar

Je reviens sur le post suivant : 1loup.net/index.php/2008/...

Je souhaiterais déclencher en mode "over" un collection de fichier flash via un lien .
Je n'y arrive pas .
Quelle syntaxe pour fixer également les dimensions de chaque fenêtre box ?

MERCI et JOYEUSES FÊTES DE FIN D'ANNEE A TOUS

110. Le mardi 23 décembre 2008 à 19:16, par 1loup

Gravatar

>Rodin Pandarex: Je ne m'y connais pas assez pour voir d'où vient le problème mais je constate comme toi qu'il y a des intérférences entre Shadowbox et "Snow and more". Sur un blog de test WordPress, la Clearbox fournie dans "mon" pack fonctionne avec "Snow and more" !

111. Le mardi 23 décembre 2008 à 19:52, par 1loup

Gravatar

>Cdomi: Si tu ne me donnes pas de lien pour voir ce que tu as fait, n'étant pas médium, je ne peux pas deviner ce qui ne va pas dans ton code. A noter, le mode "over", si on parle de la même chose (déclenchement au simple survol, pas besoin de cliquer), se fait avec la Clearbox, pas avec la Shadowbox.

rel="clearbox(400,348,over)" ouvrira le lien au survol avec une dimension de fenêtre de 400 points de large et 348 points de haut.

rel="shadowbox; width=400; height=348;" fera la même chose avec Shadowbox mais uniquement en cliquant.

A ma connaissance, je ne vois pas avec Clearbox comment faire puisque la syntaxe permettant de donner la taille et le mode over/click utilise les parenthèses tandis que la syntaxe créant des "albums" pour lier les liens entre eux utilise les crochets et s'exclue l'un l'autre.

Tu pourrais faire cela album/taille avec Shadowbox mais il faudra cliquer !

rel="shadowbox[nom de ton album];width=400;height=348"

112. Le mercredi 24 décembre 2008 à 14:23, par cdomi

Gravatar

o
c bien ce que je craignais.
MERCI

113. Le lundi 5 janvier 2009 à 15:36, par XIV-V

Gravatar

Salut,

N'aurais tu pas à disposition une version avec des chemins en relatif ?

J'ai remplacé passablement de /clearshadow/ dans les fichier .css et .js, celà dit quelques images ne s'affichent toujours pas :
- Start et pause slideshow
- Close

Et lorsque je passe la souris dans la zone inférieure (qui permet de voir la liste de toutes les images), la liste est vide...

J'ai cherché mais je ne trouve pas d'où ca pourrait venir étant donné qu'uen partie des images s'affiche mtn (notamment les bordures ainsi que gauche et droite... une idée ?

ps : au lieu de remplacer /clearshadow/ par /mon/chemin/clearshadow/, j'ai directement mis des chemins relatifs... p.ex /clearshadows/clear/pic/image.png devient "pic/image.png".

114. Le lundi 5 janvier 2009 à 21:18, par 1loup

Gravatar

>XIV-V: Non, il n'y a pas d'autre version. Si j'ai fait le pack ainsi en demandant de le placer à la racine, c'est bien parce que j'ai trouvé que le relatif posait trop de problème.

Lorsqu'il y a des images manquantes (et si tu n'as pas touché à l'arborescence du pack), c'est toujours un problème de chemin ! As-tu bien adapté les codes des link et script dans le <head> ?

En supprimant les clearshadows, tu t'empêches maintenant de retrouver facilement ces codes par la fonction "rechercher" d'un éditeur de texte, je ne trouve pas cela très malin, si ?

Je ne peux pas t'aider plus car n'ayant pas voulu laisser l'adresse de ton site (et n'étant pas médium), je ne peux pas regarder ton code modifié !

115. Le lundi 5 janvier 2009 à 21:32, par XIV-V

Gravatar

Salut,

J'ai pas de contenu en ligne pour l'instant c'est la raison pour laquelle je n'ai pas laissé de lien.

En disposant à la racine ca marche bien et je me suis résigné à procéder ainsi. C'est juste que d'habitude je préfère ranger ce qui est javascript dans le répertoire javascript plutôt qu'à la racine de mon hébergement. Mais pas de soucis, t'as fait un super job !

Cela dit j'ai une question toi qui doit connaitre shadowbox bien mieux que moi -> il y a des fonctionnalités pour changer la couleur de l'ombre ainsi que la couleur de fond d'une animation flash mais je ne trouve rien qui parle de la couleur de la case noire qui se redimensionne avant d'afficher le contenu. Aurais-tu une piste ?

116. Le lundi 5 janvier 2009 à 23:11, par 1loup

Gravatar

>XIV-V: C'est le background-color du #shadowbox_loading mais dans ce cas, il vaudrait mieux aussi refaire l'animation loading.gif qui va rester sur son fond noir !

117. Le lundi 5 janvier 2009 à 23:28, par XIV-V

Gravatar

Ah bah oui :bisou:

Merci ;)

ps : J'en profite pour publier un générateur d'images de loading ajax : www.ajaxload.info/

118. Le mercredi 7 janvier 2009 à 21:27, par betterlol

Gravatar

Je voudrais essayer de mettre en place la clearbox et shadowbox mais je bloque au départ. En effet il est marqué qu'il faut uploader le fichier à la racine: quezaco????
Je suis Blogger et mon blog test est : essaidebloglaurent.blogsp...
Les explications sont claires mais j'avoue être paumé quand même!!!!!!
Si une âme charitable est prête à m'aider, c'est cool car je trouve ces box super sympas. Merci d'avance.

119. Le mercredi 7 janvier 2009 à 21:46, par tomtom

Gravatar

Bonjour 1loup

j'ai fait une première apparition un peu plus haut dans ton blog, avec de grandes hésitations de débutant,
je reviens pour dire à tous les néophytes du code (que je suis donc aussi) de ne pas hésiter:
que la mise en place de ton patch fonctionne parfaitement, et MERCI de donner cette porte d'accès en fr à ce bel objet!

Par contre, j'aimerais savoir comment notamment on peut modifier l'arrière plan de la page qui s'assombrit par défaut quand une box s'exécute (opacité, couleur et durée);pour qu'elle soit plutôt blanche que noire par exemple... j'ai cherché à faire des modifs dans le shadowbox.css et shadowbox.js, mais sans succès...

Merci d'avance et encore bravo!

tomtom

120. Le mercredi 7 janvier 2009 à 22:10, par 1loup

Gravatar

>Betterlol: La racine de l'hébergement. C'est quand tu es à la base. Sauf que toi, tu ne possèdes pas ton propre hébergement. Blogger est une plateforme de Blogs, tu n'as pas accès à la racine. Ce tutoriel et ce pack sont prévu pour les personnes qui possèdent leur propre hébergement.

Cependant, tout n'est pas perdu : Voici une personne qui explique comment utiliser Lightbox chez Blogger :
aide-blogger-fr.blogspot....

Le truc, c'est qu'il te faut absolument un endroit pour héberger ces fichiers ! Si tu arrives dans un premier temps à installer Lightbox sur Blogger (pour des images) ensuite, tu pourrais faire pareil avec Shadowbox ou Clearbox (mais commence déjà par plus simple donc Lightbox)

121. Le mercredi 7 janvier 2009 à 22:27, par 1loup

Gravatar

>Tomtom: Les modifications sont à faire dans le fichier shadowbox.js

Regarde au niveau de overlayColor, overlayOpacity, resizeDuration et fadeDuration

Lorsque l'on fait des modifications dans ce fichier, il faut ensuite vider le cache de ton navigateur sinon tu as l'impression que rien de différent ne se produit car ce fichier reste dans le cache et n'est pas lu à chaque fois que tu reviens sur ta page mais uniquement à la première visite.

Pour t'aider, voici les sources de la ShadowBox originale incluse dans mon pack avec les commentaires de l'auteur :

1loup.net/share/ClearShad...

(mais fais tes modifications sur le pack, n'utilise pas ces fichiers sur ton hébergement, le code n'est pas compressé et est trop lourd pour être utilisé tel quel et n'est pas prévu pour fonctionner de cette façon, j'ai touché au code pour l'inclure dans ce pack)

122. Le jeudi 8 janvier 2009 à 14:06, par Loo

Gravatar

Très bon article ... nécessaire au regard du nombre croissant de boxes ! Encore merci ... :bond:

J'ai adopté Clearbox, jolie, souple, légère ... mais juste une question : est-il possible de l'ouvrir via un flash, c'est à dire en faisant appel à Javascript ?? Un truc style :
Clearbox.open('paramètre1', 'paramètre2');

D'avance merci ;-)

123. Le jeudi 8 janvier 2009 à 15:02, par 1loup

Gravatar

>Loo: Pas à ma connaissance. Je ne vois rien dans la documentation à ce sujet. Les seuls appels documentés se font via le rel="clearbox..."

Il semblerait que la shadowbox le fasse,si j'ai bien compris ce que tu veux, d'après Xavier dans le commentaire numéro 44.

124. Le jeudi 8 janvier 2009 à 15:08, par Loo

Gravatar

Ok merci tout de même :)

J'ai envoyé un mail à l'auteur de Clearbox en espérant qu'il me réponde et je reviens poster sa réponse !

Thanx again !

125. Le jeudi 8 janvier 2009 à 15:13, par Loo

Gravatar

Sinon il existe également la "Sexy Box 2" ici : www.coders.me/web-html-js...

126. Le jeudi 8 janvier 2009 à 15:22, par Loo

Gravatar

Eh bien j'ai la réponse concernant ma question (n°122)

La fonction d'ouverture en Javascript n'existe pas mais elle est prévue dans la prochaine version.

127. Le jeudi 8 janvier 2009 à 18:08, par betterlol

Gravatar

Merci pour la réponse rapide je vais tenter de re-installer la lighbox (car plusieurs essais se sont soldés par des échecs!!!) mais c'est vraiment dommage car la clearbox était bien sympa!!!
En fait pas facile de manier css, html et autres acronymes du genre....surtout pour un novice.

A+++

128. Le jeudi 8 janvier 2009 à 19:21, par tomtom

Gravatar

Merci pour ta prompte réponse 1loup! (119>>121)

Une autre question me tracasse,
j'ai travaillé jusqu'à présent seulement sur des sites réalisés avec un éditeur wisiwyg,
l'éditeur propose en entête de page: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
ce qui m'a posé des problèmes de lecture des boxes sous IE après avoir intégré le pack...
en remplaçant cet entête par celui que tu conseilles, les choses sont rentrées dans l'ordre pour la lecture des boxes,
mais c'est alors le reste de la page qui ne ressemble plus à grand-chose...

Celà signifie-t-il que l'ensemble du site doit être écrit exclusivement en XHTML 1.0 Strict pour que celà fonctionne??

Bien cordialement,
tomtom

129. Le vendredi 9 janvier 2009 à 00:16, par 1loup

Gravatar

>Loo: Il y a une quinzaine de "box" qui n'ont pas été traitée ici, dont Sexy Box, mais que j'ai noté les URL pour aller les voir, parce que je les ai découverte qu'après parution de ce billet, mais que cela demande du travail tout cela 8-)

130. Le vendredi 9 janvier 2009 à 00:19, par 1loup

Gravatar

>Betterlol: Si tu arrives à installer la lightbox sur ton blogger, je veux bien ensuite essayer de t'aider pour la Clearbox mais il faut absolument que te défriches tout cela un peu avant. Ma disponibilité n'est pas "extensible" ni illimité.

131. Le vendredi 9 janvier 2009 à 00:22, par 1loup

Gravatar

>Tomtom: Je conseille un doctype, moi ??? Où cela ???
Tente de remplacer ton <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"> par :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

132. Le vendredi 9 janvier 2009 à 08:04, par nethen

Gravatar

Sa fais plusieurs jour que je cherche a créer une action au moment de la fermeture de la shadowbox (Que j'utilise avec jquery)...
Bref pas moyen, alors si il y a qq1 qui a déjà penser a faire la même chose et qui est arrivé, je suis preneur.

133. Le vendredi 9 janvier 2009 à 09:08, par tomtom

Gravatar

...oups, désolé! ce doctype venait effectivement du site de mjijackson avant que je découvre ton blog...
j'ai essayé le doctype que tu m'indiques sur ta réponse: prodigieux! shadowbox s'affiche maintenant très bien sous IE comme sous Mozilla Firefox,
par contre c'est la mise en forme de ma page qui se retrouve agglutinée...
mais là, je crains que les logiciels wisiwyg ne fassent pas tous bon ménage avec des ajouts de code...
je ne sais pas d'où peut venir le conflit, mais je vais plancher pour essayer de comprendre,
et sans doute me mettre au html pour apprendre à coder "propre"...
en tous cas grand merci pour ta disponibilité et tes bons conseils!
tomtom

134. Le vendredi 9 janvier 2009 à 15:30, par betterlol

Gravatar

>1loup: Merci pour ta proposition (que j'accepte avec grand plaisir), j'ai enfin réussi à installer lightbox en utilisant un petit subterfuge.
Par contre si quelqu'un peut également m'indiquer un hébergeur de fichier.js qui fonctionne bien (c.a.d me permettant d'obtenir les url d'hébergement de fichiers), je suis preneur aussi.
Je vais à nouveau tenter d'installer la clearbox dés que j'aurais réussi à héberger les fichiers.

135. Le vendredi 9 janvier 2009 à 16:35, par 1loup

Gravatar

>Betterlol: Voici une liste (non testés, hein...) :

Top 5 - Hébergement web PHP gratuit

136. Le samedi 10 janvier 2009 à 20:34, par betterlol

Gravatar

Pour installer lightbox il a fallu héberger des fichiers, et puis tout a fonctionné sans probléme. Pour shadowbox quels sont les fichiers du pack que j'ai téléchargé (et ceux ci doivent ils être modifiés avant?) que je dois héberger?
Ensuite les 4 premiéres lignes de code que tu cites sont elles celles que je dois mettre dans le head (avec bien sur l'url d'hébergement des fichiers concernés).
Je sais que je suis c.... avec mes questions mais bon je débute et j'avoue que cela est pas évident!!!
Merci encore de l'aide

137. Le dimanche 11 janvier 2009 à 04:12, par 1loup

Gravatar

>Betterlol: En ayant regardé ton blog, je vais considérer que tu vas installer mon pack au même endroit.

Après avoir téléchargé le zip ici, tu le décompactes chez toi. Tu vas ouvrir les fichiers clearbox.css, clearbox.js et shadowbox.js un par un en regardant tous les dossiers et sous dossiers. Avec un éditeur de texte (pas un traitement de texte hein, un "éditeur"), tu fais une recherche sur toutes les occurrences de /clearshadow/ dans ces fichiers et tu remplaces /clearshadow/ par http://pagesperso-orange.fr/florian70/clearshadow/.

Après avoir tout sauvegardé, tu uploades le dossier clearshadow (et son contenu) dans http://pagesperso-orange.fr/florian70, il se trouvera ainsi à côté du dossier lb2 qui contient la lightbox.

Ensuite, tu regardes les modifications que tu avais fait entre <head> et </head> pour la lightbox. Tu supprimes cela :


<link href='http://pagesperso-orange.fr/florian70/lb2/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://pagesperso-orange.fr/florian70/lb2/js/prototype.js' type='text/javascript'></script>
<script src='http://pagesperso-orange.fr/florian70/lb2/js/scriptaculous.js?load=effects,builder' type='text/javascript'></script>
<script src='http://pagesperso-orange.fr/florian70/lb2/js/lightbox.js' type='text/javascript'></script>

et tu le remplaces par çà :


<link rel="stylesheet" type="text/css" href="http://pagesperso-orange.fr/florian70/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="http://pagesperso-orange.fr/florian70/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://pagesperso-orange.fr/florian70/clearshadow/shadow/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://pagesperso-orange.fr/florian70/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="http://pagesperso-orange.fr/florian70/clearshadow/clear/clearbox.css" />
<script src="http://pagesperso-orange.fr/florian70/clearshadow/clear/clearbox.js" type="text/javascript"></script>
<script type="text/javascript">window.onload = Shadowbox.init;</script>

Normalement, sur les billets où tu as utilisé la lightbox, la shadowbox doit déjà l'avoir remplacé.

Ensuite, pour choisir entre shadowbox ou clearbox, tu rajoutes rel="shadowbox" ou rel="clearbox" au même endroit que tu as compris qu'il fallait mettre la lightbox avant (voire tu regardes les autres exemples donnés dans ce billet pour les utilisations plus poussées).

Est-ce plus clair ?

138. Le dimanche 11 janvier 2009 à 19:10, par betterlol

Gravatar

>1loup: effectivement c'est beaucoup plus clair et surtout c'est extrêmement gentil de répondre et en plus rapidement!!! Bref c'est top.
Bon je progresse car même si je ne suis pas exactement ce que tu as dit (en fait j'ai fait presque pareil j'ai juste changé l'endroit d'hébergement des fichiers et donc je me suis tapé de changer l'adresse de chaque fichier!!!) cela fonctionne.......pour les images!!! Car pour la vidéo je n'arrive pas à obtenir l'effet lightbox!!! Je pense ne pas bien placer le rel dans le code de ma vidéo Youtube...
En tout cas le fait de manipuler me permet d'apprendre progressivement même si je trouve cela encore touffu

139. Le lundi 12 janvier 2009 à 01:37, par 1loup

Gravatar

>Betterlol: Ah non, pour les vidéos, tu ne vas pas y arriver de cette façon !

Il faut faire un LIEN pas une inclusion de flash. Soit tu veux que ce soit à partir d'un lien texte soit à partir d'une image (un screenshot du player YouTube par exemple) mais pas avec le code flash de l'animation.

Regarde le code source de ces exemples :
- pour des liens textes : 1loup.net/testclear.html
- pour une image : 1loup.net/index.php/2008/...

Et sinon, il faudrait que tu regardes à nouveau tes fichiers, il y a une ou des occurrences que tu as oublié ou que tu as mal rempli, les contours de ta Clearbox ne sont pas complets !

140. Le lundi 12 janvier 2009 à 21:53, par betterlol

Gravatar

>1loup: c'est génial, j'ai compris comment faire :bond: :bond: Encore merci de ton aide, elle m'a été fort utile et très pédagogique.
Bon en même temps j'ai compris surtout en imitant (en clair je sais recopier mais je n'ai pas le talent d'arriver à faire seul ;-( !!!!!)
Je vais essayer de voir ce que j'ai pu oublier comme occurence car j'ai tout vérifié et copié fichier par fichier en respectant bien l'arborescence du dossier clearshadow.
Je vais tenter de me débrouiller. Mille merci, c'est si rare d'avoir de l'aide gratuite avec amabilité.
A+

p.s: au fait connais tu la zoombox? j'ai vu cela sur ce site:grafikart.fr/pages/zoombo...
Qu'en penses tu?
Perso je trouve cela pas mal, je pense qu'à l'occasion je testerais.

141. Le mardi 13 janvier 2009 à 03:28, par 1loup

Gravatar

>Betterlol: Si tu n'as pas trouvé ce qui ne vas pas d'ici mercredi/jeudi, je jetterais un oeil (je ne peux pas avant).
Pour la zoombox, elle fait partie de ceux qu'il faut que je rajoute comme je le dis dans le commentaire 129 mais elle ne me convient pas : on ne peut pas faire d'album et il n'y a pas de slideshow (enfin, je n'ai pas approfondi, je dis cela "à première vue")

142. Le mercredi 14 janvier 2009 à 12:52, par betterlol

Gravatar

Pour l'instant je trouve pas mais je ne désespère pas... ;-)

143. Le jeudi 15 janvier 2009 à 19:42, par 1loup

Gravatar

>Betterlol: Il y a des erreurs dans le clearbox.css : Tu fais référence, plusieurs fois, à un dossier /clearshadowsting.net/ qui n'existe pas !

Remplace les site.voila.fr/betterlol1/clearshadowsting.net/clearshadow/clear/ par site.voila.fr/betterlol1/clearshadow/clear/ et cela devrait aller mieux (pour #CB_TopLeft, #CB_Top, #CB_TopRight, #CB_Left , #CB_Right et #CB_BtmLeft).

Les autres fichiers me semblent corrects.

144. Le vendredi 16 janvier 2009 à 21:05, par stef

Gravatar

Bonjours,
Apres avoir "installer" Clearbox sur un site en construction , Les images .PNG n'apparaissent pas , je n'ais pourtant rien toucher aux chemins .
Merci de m'eclairer .

145. Le vendredi 16 janvier 2009 à 23:05, par 1loup

Gravatar

>Stef: On commence par plusieurs questions :
1 - Quelle Clearbox as-tu installée ? Celle que je fournis ici dans la pack ClearShadow ou celle à disposition sur le site de l'auteur ?
2 - Est-ce que cela fonctionne avec les ".jpg" ?
3 - As-tu essayé de renommer les ".PNG" en ".png" ? (passer en minuscule)

Sinon, n'étant pas médium, sans me donner l'url de ton site en construction, il ne m'est pas possible de deviner ce qui ne va pas...

146. Le samedi 17 janvier 2009 à 07:39, par stef

Gravatar

J"ais installer la version ici presente , .png sont en miniscule . Je sait bien que tu n'est pas medium mais vu que mon site et encore à l'ebauche , il ce trouve que sur mon DD , desolé . Tout fonctionne bien sinon, sauf tout ce qui est visuel de navigation .
Merci, Stef .

147. Le samedi 17 janvier 2009 à 07:55, par stef

Gravatar

13mm plus tard ;-) .
Je te colle le code source de mon essaie qui fonctionne "mal" .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link type="text/css" rel="stylesheet" href="clearshadow/clear/clearbox.css" />
<script src="clearshadow/clear/clearbox.js" type="text/javascript"></script>
</head>

<body>
<table width="100%" border="0">
<tr>
<td><div align="center"><a href="foto/01a.jpg" rel="clearbox[foto]"><img src="01.jpg" border="0" /></a></div></td>
<td><div align="center"><a href="foto/02a.jpg" rel="clearbox[foto]"><img src="02.jpg" border="0" /></a></a></div></td>
<td><div align="center"><a href="foto/03a.jpg" rel="clearbox[foto]"><img src="03.jpg" border="0" /></a></div></td>
<td><div align="center"><a href="foto/04a.jpg" rel="clearbox[foto]"><img src="04.jpg" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="foto/05a.jpg" rel="clearbox[foto]"><img src="05.jpg" border="0" /></a></div></td>
<td><div align="center"><a href="foto/06a.jpg" rel="clearbox[foto]"><img src="06.jpg" border="0" /></a></div></td>
<td><div align="center"><a href="foto/07a.jpg" rel="clearbox[foto]"><img src="07.jpg" border="0" /></a></div></td>
<td><div align="center"><a href="foto/08a.jpg" rel="clearbox[foto]"><img src="08.jpg" border="0" /></a></div></td>
</tr>
</table>
</body>
</html>

Voilà.
Merci, Stef .

148. Le samedi 17 janvier 2009 à 07:59, par 1loup

Gravatar

>Stef: Ah mais il fallait le dire que ton "site en construction" n'était pas "en ligne" ! Je ne sais pas pour la Clearbox car je n'ai pas testé mais pour la Shadowbox, j'en suis certain, elle ne fonctionne pas "sur disque dur", uniquement "en ligne". De là à ce que la Clearbox fasse pareil, cela ne m'étonnerait pas !

149. Le samedi 17 janvier 2009 à 17:44, par 1loup

Gravatar

>Stef: Au niveau "validation" du code, il y a une ligne avec un "</a>" en trop et tes img ne comportent pas la balise "alt" obligatoire.
La syntaxe de img c'est : <img src="chemin vers l'image" alt="texte alternatif de l'image" />

150. Le dimanche 18 janvier 2009 à 08:46, par stef

Gravatar

Salut,
Je te met un lien où j'ais placer ma page d'essaie " www.chezlesbudon.com/gren... " . En local le visuel marche toujours pas , mais en ligne c'est encore pire , seul les deux premieres photos fonctionne :deprime: .
Merci de ton aide que j'aprecie .
Stef .

151. Le dimanche 18 janvier 2009 à 11:22, par Jojaba

Gravatar

Super ce billet pour quelqu'un qui recherche des infos sur les lightbox. Merci beaucoup !
J'ai également été séduit par clearbox qui me conviendrait. seulement, j'ai un problème de fenêtre qui n'est pas centré (en fait la largeur de la page est augmentée sans que je fasse quoi que ce soit). Une page pour vous faire une idée : http://jojaba.free.fr/?/Traductions-diverses/Site-hebergement-images-iimmgg-com2 .
J'ai installé la dernière version de clearbox (la 2.6). Problème de css, je suppose...
Merci d'avance pour votre aide :-)

152. Le lundi 19 janvier 2009 à 02:29, par 1loup

Gravatar

>Stef: Tes grandes images (03a.jpg à 08a.jpg) ne sont pas sur le site (ou au mauvais endroit), ton hébergeur renvoie une erreur 404 sur celles-ci et par conséquent la Clearbox plante, ce qui est normal. Uploades tes images 03a.jpg à 08a.jp au même endroit où sont actuellement 01a.jpg et 02a.jpg et cela devrait aller déjà mieux.

>Jojaba: Il n'y a pas de Clearbox d'installée sur le lien donné, je considère donc cela comme du spam déguisé et je supprime les liens vers ton site.

153. Le lundi 19 janvier 2009 à 08:02, par jojaba

Gravatar

Oups :-/ !
Je l'avais enlevé pour installer autre chose (je pensais à slimbox) et ai oublié de remettre ça. Vraiment désolé... :(
Je vais tâcher de remettre ça en place ce soir. Merci en tout cas pour cette réponse rapide :-)
J'espère que ce commentaire te parviendra (puisque j'ai été blacklisté...).

Encore toutes mes excuses !

154. Le lundi 19 janvier 2009 à 08:09, par 1loup

Gravatar

>Jojaba: Non tu n'as pas été blacklisté, j'ai juste enlevé les liens vers ton site. Au moment où je suis passé chez toi, il n'y avait pas de Clearbox mais pas de Slimbox non plus ni aucune autre box. Je serais ravi de t'aider, dans la mesure de mes moyens si tu en as vraiment besoin mais, vois-tu, je n'ai pas que cela à faire. Là, tu demandais de l'aide et lorsque j'arrive, je tombe le bec dans l'eau, ce n'est pas très sympa. Excuses acceptées.

155. Le lundi 19 janvier 2009 à 20:31, par Jojaba

Gravatar

Encore toutes mes excuses pour cette bourde... En fait j'étais tellement épaté par toutes ces "box" que j'avais envie de toutes les tester très rapidement. Or je n'avais pas beaucoup de temps pour faire ça hier, d'où précipitation, d'où méli-mélo, ...
Je me suis pris à présent le temps de créer un nouvel article sur mon site spécialement pour tester cette version 2.6 de clearbox (j'ai pris cette fois-ci des images plus "neutres", l'objectif n'étant vraiment pas de faire de la promotion pour qui que ce soit).
L'adresse de la page de test : jojaba.free.fr/?/Test-de-...
J'ai placé sur cette page une image pour ouverture en taille réelle et une série d'images pour diaporama. Comme je me doute que c'est un problème de css, voici le dossier (thème jojaba) dans lequel se trouve la css de mon site (style.css) et le dossier clearbox : jojaba.free.fr/xmedia/the...
Les chemins sont donc en relatif comme on peut le voir dans la source de la page. J'avais testé cette version en local avec une page html simple, ça fonctionnait. J'ai essayé avec des chemins absolus sur mon site, ça n'a pas mieux fonctionné. je pense que cela vient de ma css, mais je ne vois pas trop par quel bout commencer. J'ai essayé de résoudre le problème en positionnant mon body en absolute, en relative, ça n'a rien donné. Ma boîte à droite est également positionnée en absolute comme la plupart des div de clearbox, peut-être que cela vient de ça ? (j'ai fait le test et ai positionné la boîte de droite en flottant, rien à faire, ça ne fonctionne toujours pas...)
Bon ben, le commentaire commence à être long, et je ne sais pas si mon cas personnel intéressera les autres internautes, finalement, on peut quand-même considérer ça comme du spam LOL !
Si tu veux, tu peux répondre directement sur ma page de test, ce sera plus simple ;-) . Ceci dit, comme tu le dis si bien plus bas, tu fais comme tu veux !
Merci d'avance pour ta patience.
:-)

156. Le mardi 20 janvier 2009 à 02:53, par 1loup

Gravatar

>Jojoba: Tester rapidement ? J'ai mis plus de deux mois (il me semble) à faire ce billet et il y a encore une dizaine de box que je n'ai pas traité ! Il faut prendre son temps... Du coup, je t'ai répondu chez toi.

157. Le mardi 20 janvier 2009 à 21:17, par FB251

Gravatar

Bon article !!

Savez-vous s'il y a moyen avec Clearbox de toujours faire apparaitre les vignettes dans la fenêtre modale et d'enlever cet espèce de fond blanc lorsque celles-ci apparaissent avec un onMouseOver dans le bas de l'image ? Je cherche dans le JS et le CSS, mais je ne trouve pas.

Merci !

158. Le mardi 20 janvier 2009 à 21:42, par Jojaba

Gravatar

>1loup : Merci pour ta réponse chez moi. :-)
George, le développeur de Clearbox m'a donné la solution par courriel. Je vous colle ça ici ça pourra toujours servir à d'autres et ça vous évitera de venir passer chez moi, surtout que je ne suis pas sûr que je laisserai l'article en question comme il est et je risque de modifier le titre et l'url (mais pas question d'effacer ;-) ) !
Réponse de Krupa George :
@@@
You have to change the CB_PicDir in clearbox.js
You have to edit the clearbox.css too, if the default directory is not 'pic'.
You have to look into your stylesheet files, because in one of them, you should find table { width: 100% ] - you have to remove this, and the sizing of ClearBox window will be fine!
@@@
Suite à ça, j'ai fait les choses suivantes :
J'ai modifié le chemin pointant vers le dossier pic (chez moi, CB_PicDir='/xmedia/theme/jojaba/clearbox/pic') défini dans « clearbox.js », dans ma css (celle de mon thème), j'avais défini pour tous les tableaux une largeur de 80%, j'ai effacé cette valeur.
Problème résolu ! :-)

159. Le mercredi 21 janvier 2009 à 06:05, par 1loup

Gravatar

>FB251: Aucune idée.

>Jojaba: Tu as bien fait de t'adresser directement à l'auteur, je ne pense pas que j'aurais trouvé que cela venait des tableaux.

(mais sinon pour les images, je pensais que comme tu étais sur une page de test, que tu n'avais pas fignolé la chose ! Lorsque des "boutons" images n'apparaissent pas, c'est toujours un problème de chemin)

160. Le mercredi 21 janvier 2009 à 07:45, par Jojaba

Gravatar

>FB251 : Les seuls paramètres que tu peux (et tu as le droit de) modifier sont les variables utilisateur dans le "clearbox.js". Pour les vignettes, elles sont par défaut toujours affichées (CB_NoThumbnails='off'), pour le fond blanc, il faudrait voir si une des variables contenant le mot "Opacity" feraient l'affaire...

161. Le vendredi 30 janvier 2009 à 22:38, par Jimmy

Gravatar

Bonjour

Je voudrais utiliser le shadowbox qui est top sauf que j'ai un petit soucis..

j'ai copié le dossier a la racine de mon site et j'ai rajouté le code dans mon fichier sauf que quand je clique sur l'image, au lieu d'ouvrir l'image il reouvre le site ... j'ai manqué quelque chose?

Je vous remercie d'avance pour votre aide.

Jimmy

162. Le vendredi 30 janvier 2009 à 22:59, par 1loup

Gravatar

>Jimmy: Sans l'adresse de ton site, je ne peux rien regarder donc je ne sais même pas si je peux t'aider...

163. Le vendredi 30 janvier 2009 à 23:16, par jimmy

Gravatar

Merci d'etre aussi rapide..

Alors je viens de le mettre en ligne .. 974crew34.hd.free.fr

clic sur bike a droite et clic sur le logo fox ..

sur firefox ca relance le site je l'avais et sous IE c'est tout blanc ...

Merci encore

164. Le samedi 31 janvier 2009 à 01:58, par 1loup

Gravatar

D'abord, remarques d'ordres générales : Ton code n'est pas propre ! Tu annonces dans ton doctype du XHTML 1.0 Strict alors que cela ressemble à un mélange de HTML 4 et de XHTML ! En XHTML, les balises doivent être en minuscule, le <center> </center> est interdit, il faut passer par les CSS pour centrer, les balises doivent toutes être fermées donc <br> doit être remplacé par <br />, les <img ...> par <img ... /> Il me semblerait que tu ne connaisses pas la syntaxe du XHTML, tu devrais peut être revoir ton doctype et mettre un doctype pour du HTML 4, non ?

L'imbrication aussi est incorrecte, ton code devrait ressembler à cela :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="...
    <link rel="section" href="...
    <title>Ton titre</title>
    <link rel="stylesheet" type="text/css" href="/style.css" media="screen" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript">
    ...
    </script>
    <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>
 
</head>

<body>

    <script type="text/javascript">window.onload = Shadowbox.init;</script>
        
    <div id="...">
      ... toutes tes id...
    </div>

</body>
</html>

Tu ne dois pas avoir plus d'un entête <head> ni plus d'un corps <body> ni plus d'un <html> !

Tu auras des ennuis si tu continues de cette façon :-( A la fois, parce que c'est difficilement lisible d'un point de vue "humain" et que syntaxiquement, les navigateurs vont finir par s'emmêler les pinceaux.

Pour ton problème plus précis de shadowbox, ta syntaxe est aussi incorrecte, c'est cette ligne qui est en cause :


<a rel="shadowbox">&nbsp;<img name="image0" src="images/lien/fox.jpg"></a><br>

Une syntaxe correcte, ce serait quelque chose du genre :


<a href="chemin vers ta grande image ou la page html qui doit s'ouvrir dans la shadowbox" rel="shadowbox"><img src="chemin vers la miniature" alt="texte alternatif de l'image" /></a>

Or là, tu n'as rien mis comme href dans la balise <a> ! Tu dis que le lien doit s'ouvrir dans une shadowbox mais tu ne dis pas quoi !

165. Le samedi 31 janvier 2009 à 08:17, par Jimmy

Gravatar

Merci pour tes conseil !!!

je viens de me reveiller et j'ai juste essayé le shadow ca fonctionne.
Je vais regler les autres petits problème que tu m'as signalé..

Merci encore ...

ps: trop top le shadowbox

166. Le dimanche 1 février 2009 à 22:04, par french-petzouille

Gravatar

Bonjour
auriez vous une bonne piste pour expliquer le fait que ShadowBox et IE 6 me proposent systématiquement de télécharger le fichier .flv mis dans la balise <href, alors que sur le même PC , j'ai Opéra ou Firefox qui lancent parfaitement la video ?

La page de démo testclear.html permet bien de visionner les fichiers directement .flv avec IE6 ( W XP )
Ma page web permet de bien visionner les .flv tant avec Opéra qu'avec Firefox PC ou Mac!!

Donc ...pourquoi IE6 qui veut bien lancer la video .fmv avec la page de test ne le veut pas avec ma page ( bien interprétée sur Mac avec Safari et, je le répète, sur PC XP avec Opéra et FF

Merci de vos lumière
Je sèche ++

167. Le dimanche 1 février 2009 à 22:13, par 1loup

Gravatar

>French-petzouille: Quelle est l'adresse où je peux voir cela ?

168. Le vendredi 6 février 2009 à 23:26, par Jimmy

Gravatar

bonsoir,

j'aimerais savoir comment faire la galerie avec shadowbox svp ?

parce je dois mettre le nom de la galerie au lieu du nom de la photo.. mais comment faire une galerie? :rolleyes:

Merci beaucoup

Jimmy

169. Le samedi 7 février 2009 à 14:56, par 1loup

Gravatar

>Jimmy: Tu peux répéter la question ? (parce que si je dois t'apprendre à coder, ce n'est pas mon rayon)

170. Le samedi 7 février 2009 à 15:01, par jimmy

Gravatar

rebonjour,

alors dans utilisation de shadowbox il y a:

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

la galerie ca correspond a quoi? c'est un fichier? un dossier photo?

Merci a toi

171. Le samedi 7 février 2009 à 15:26, par 1loup

Gravatar

>Jimmy: C'est juste un nom que tu lui donnes. Voici un exemple : Sur une même page, j'ai 3 billets. Dans chaque billet, il y a 10 images miniatures qui pointent (par un lien) vers les 10 images en grandes tailles. Si je veux relier chaque image du même billet entre elles, je mets [billet1] pour toutes les images du premier billet, puis [billet2] pour celles du deuxième billet et enfin [billet3] pour celle du troisième (mais tu peux aussi mettre [toctoc], [tatayoyo] et [coucou] si tu en as envie).
En cliquant sur une des images du billet 1, shadowbox va relier les images entre elles et tu pourras naviguer avec les boutons next/previous (mais tu ne visualisera pas celle des billets 2 et 3). Est-ce plus clair ?

Une exemple ici : 1loup.net/index.php/tag/r...

Descends jusqu'à trouver le billet sur le pain, il y a 4 photos reliées par une galerie (clique). Et sur le billet qui suit, il y a 28 assiettes d'été. Toutes les photos sont sur la même page mais seulement certaines sont reliées entre elles.

172. Le lundi 9 février 2009 à 08:27, par Ekho

Gravatar

Bonjour !

Tout d'abord, merci pour les nombreuses infos que j'ai trouvé sur votre site pour mon blog dotclear.

Il y a quelques semaines, et sur vos conseils, j'ai opté pour shadowbox, et j'en était très content... jusqu'à ce week-end. En effet, il semblerait que les vidéo youtube ne fonctionnent plus sous shadowbox !! Sauriez-vous d'où ça vient ?! Voici un exemple sur mon blog : www.ekhorizon.com/blog/in...

Mais si l'on clique sur l'exemple de votre vidéo youtube pour shadowbox dans votre article, on obtient exactement la même chose : fenetre blanche et vide.

173. Le lundi 9 février 2009 à 09:04, par Ekho

Gravatar

Méa culpa. Ca semblait venir de mon navigateur.

Merci encore pour vos précieuses informations, et bravo pour votre blog.

174. Le mardi 10 février 2009 à 00:45, par 1loup

Gravatar

>Ekho: Sur le forum Dotclear tu me tutoies, pourquoi tu me vouvoies ici ? (ou tu n'as pas vu qu'ULB là bas, c'était moi ?)

175. Le mardi 10 février 2009 à 01:04, par Ekho

Gravatar

LOL

En effet, je n'avais pas du tout fait le lien.

Doublement merci alors. Et il est sympa ton blog. (oui, je préfère le tutoiement :-) )

176. Le jeudi 19 février 2009 à 11:51, par Nesta

Gravatar

Bonjour à tous,

J'ai un petit soucis avec la clearbox ...
Je n'arrive pas à lire les fichiers .flv ...
Y'a t-il un code particulier à mettre en place ?

Merci d'avance et merci surtout à l'auteur de ces précieuses explications ! LOL

177. Le jeudi 19 février 2009 à 18:14, par 1loup

Gravatar

>Nesta: La Clearbox n'est pas capable en l'état de lire directement les ".flv" comme le fait la Shadowbox (dans mon exemple, si tu cliques, tu verra qu'après l'assombrissement, il est proposé de télécharger le flv, il n'y a pas de lecture). Si tu veux le faire, c'est à toi d'installer un lecteur de flv (dans mon exemple, j'ai installé NeoLao mais n'importe quel lecteur de flv devrait fonctionner s'il est en flash).

178. Le vendredi 20 février 2009 à 14:29, par Nesta

Gravatar

Ok, pas de soucis, j'ai finalement opté pour la shadowbox.
Par contre, y'a t-il moyen de faire "looper" le flv automatiquement ?

179. Le samedi 21 février 2009 à 13:03, par 1loup

Gravatar

>Nesta: Je ne sais pas.

180. Le dimanche 22 février 2009 à 22:05, par tomtom

Gravatar

Bonjour 1loup,
je cale devant une difficulté et j'ai besoin d'aide:
comment faire pour qu'un diaporama se lance dans la fenêtre de shadowbox?
par exemple sur cette page (je laisse un lien pour info, pas pour spam!) je souhaiterais que les 5 images puissent défiler automatiquement...
j'ai vu que c'était possible sur la page mjijackson.com/shadowbox/..., (titre <h3>Images</h3> (image gallery (slideshow))
mais chez moi ça ne marche pas...
merci de ta réponse, (et aussi de ta compréhension, c'est mon premier site fait "à la main"!)
Bien cordialement
tomtom

181. Le lundi 23 février 2009 à 07:51, par 1loup

Gravatar

>Tomtom: On a tous débuté un jour hein...

* Cela ne peut pas fonctionner avec mon pack qui contient la Shadowbox en version 1.0. Cette fonctionnalité n'est apparue que plus tard, actuellement la version de l'auteur de la Shadowbox est 2.0 !

* Quant bien même tu désinstallerais mon pack et installerais la Shadowbox 2.0, cela ne fonctionnerais pas avec le code que tu as mis, tu n'as rien indiqué pour déclencher le slideshow. Il faudrait que tu rajoutes un slideshowDelay comme cela :

<a rel="shadowbox[images/nosferatu];options={slideshowDelay:3}" href="images/nosferatu/nosferatu-01.jpg" title="Nosferatu - Blackmoon Theatre"><img src="thumbs/nosferatu.jpg" alt=""></a>

(Tu adaptes le temps si tu veux que le passage entre chaque image soit plus ou moins long)

182. Le lundi 23 février 2009 à 09:58, par tomtom

Gravatar

* oui effectivement j'avais essayé avec le code que tu indiques mais sans succès, je vais essayer avec la version 2 (comme de toute façon je n'utilise que shadowbox et pas clearbox...)

* par ailleurs en essayant différents navigateurs sur mon pc (vista) j'ai observé un disfonctionnement avec Netscape 7.1, par contre ça fonctionne bien avec Netscape Navigator ainsi qu'avec les dernières versions de Opera, Safari, Chrome, Firefox et Internet Explorer version récente aussi...

Merci et à bientôt...!

tomtom

183. Le vendredi 20 mars 2009 à 10:44, par Flomape

Gravatar

Bonjour,

Je cherche depuis 2 jours et je ne sais pas si c'est possible ou pas !
En fait j'aimerais savoir si on peut, lorsque l'on a cliqué sur la lightbox et que l'image s'affiche avec le texte en title, rajouter un lien sur ce title ou en dessous qui renvoie à une autre page du site et qui ferme la lightbox ?
Est ce que c'est clair ?

je ne vois pas ou je peux rajouter cet element ?

Merci d'avance
Flo

184. Le vendredi 20 mars 2009 à 18:55, par 1loup

Gravatar

>Flomape: Pour ce genre de fonctionnalité, je pense qu'il faudrait plutôt s'adresser à l'auteur, c'est lui le plus à même pour te répondre.

185. Le mercredi 25 mars 2009 à 11:24, par Jojaba

Gravatar

Bonjour,

Pour information, je viens de terminer d'écrire un petit tutoriel pour la version 2.6 de la Clearbox avec la collaboration du développeur.
Le lien : jojaba.free.fr/?/Web-util...
George (le développeur) est en train de plancher sur une version 3 de la Clearbox...
:-)

186. Le mercredi 22 avril 2009 à 10:07, par iManu

Gravatar

Bonjour,
Tout d'abord bravo pour ces tests, très chuette boulot ;)
J'ai une question concernant les vidéos youtube : je souhaite intégrer sur un site une liste des vidéos de mon compte Youtube, dans le style de la videobar de google : www.google.com/uds/soluti...
Est-ce que tu penses possible soit d'intégrer la videobar -dans- une shadowbox, ou à l'inverse, ouvrir une shadowbox -par- vidéo de la videobar ??
A mon avis ça ne doit pas être évident !...
Dans l'idéal, je cherche en fait une solution pour lister (et récupérer sur mon site) les vidéos de mon compte youtube .. sans avoir à les saisir une à une. C'est à dire, automatiser l'affichage des vidéos sur mon site (vignettes + lightbox like) selon les vidéos que j'ajoute via mon compte youTube ...
Bien à toi, Manu

187. Le mercredi 22 avril 2009 à 10:14, par iManu

Gravatar

Re,
il suffit de poster pour trouver une réponse, c'est dingue : www.youtube.com/youtubeon...

Il me reste à tester la solution de la "playlist" VS la "videobar" ...
Mais la question de l'intégration de shadowbox avec ces solutions reste entière ...

188. Le samedi 25 avril 2009 à 18:09, par 1loup

Gravatar

>iManu: Est-ce le genre là que tu souhaites obtenir ?
Test PlaylistYouTube

189. Le mardi 28 avril 2009 à 14:51, par Phil

Gravatar

Problème avec SHADOWBOX et IE8, ne fonctionne pas, il est nécessaire de passer par l'affichage de compatibilité.
Tout mon site à reprogrammer, merci Bill !

190. Le mardi 28 avril 2009 à 15:46, par 1loup

Gravatar

>Phil: Shadowbox et IE8 fonctionnent bien ensemble mais Shadowbox demande à ce que le Doctype soit Strict ou Transitionnel pour que cela fonctionne sous IE, or ton Doctype est un Frameset, je pense donc que tes problèmes viennent de là.

191. Le mardi 28 avril 2009 à 16:02, par Phil

Gravatar

Merci beaucoup pour ta réponse.
Sur le site yaelle.com, j'ai effectivement remarqué que le Doctype est Transitionnel, contrairement au mien. Mais utilisant des Frames, je ne sais pas si je peux le modifier.
Une question. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> cette ligne pourrait-elle rendre compatible Shadowbox ?
Sur le site www.shadowbox-js.com/ avec ma config (Seven 7077 IE8), le script fonctionne mal, malgré un Doctype Transitionnel.

Merci pour ton aide. J'ai découvert ton blog aujourd'hui, beau travail.

192. Le mardi 28 avril 2009 à 16:12, par 1loup

Gravatar

>Phil: Tu peux essayer mais j'ai des doutes car il y a déjà des personnes qui avaient des problèmes de Doctype avec IE7 et l'auteur de Shadowbox précise bien sur son site qu'avec IE il faut un Doctype Strict ou Transitionnel :-/ Ce n'est pas spécifique à IE8 cette histoire mais à Internet Explorer en général.

(Non, tu ne peux pas modifier ton Doctype, si tu utilises des Frames, tu es bien obligé de mettre celui-là. Par contre, tu peux essayer une autre lightbox-like, qui sait...)

Tes problèmes viennent peut-être de Seven alors, parce qu'avec IE8 sous Windows XP, je n'ai pas noté de problème.

193. Le mardi 28 avril 2009 à 16:31, par Phil

Gravatar

Merci. Je vais chercher.
Peut-être vais-je passe à FloatBox (randomous.com/floatbox/ho...) qui lui fonctionne parfaitement sous IE8.
Je te tiens au courant.

194. Le mercredi 29 avril 2009 à 19:29, par Phil

Gravatar

Bonsoir,
Je pense avoir régé mon problème, si cela peut servir à d'autres...
En fait, l'idée de rendre compatible était la bonne, seulement il fallait juste le placer au bon endroit.(Code : <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> )
Dans un permier temps je l'ai inséré dans la page principale, contenant les frames. Cela fonctionnait, mais cela n'etait pas stable. En effet, ayant plusieurs pages d'entrée sur le site, si je chargeais une page ne contenant pas le code de compatibilité, ensuite rien à faire, pas moyen de faire tourner ShadowBox.
LA SOLUTION : Je laisse la page des frames inchangées et j'insère le code dans les pages contenant le script.
J'espère que c'est à peu près clair.
En tout cas merci pour ton aide. C'est toi qui m'as mis sur le chemin en me parlant du Doctype.

195. Le jeudi 30 avril 2009 à 19:27, par iManu

Gravatar

Salut 1loup,

Oui, l'exemple correspond bien .. est-ce que c'est un même album youTube ???

J'ai tenté des bidouilles mais sans résultat jusqu'à présent .. je suis tombé sur un googlesite (philippe.chappuis.googlep...) où j'ai trouvé pas mal d'astuces .. et aussi j'ai vu "pictureflow" qui est un carrousel intégrant shadowbox ...

Bref, possible qu'une solution se dessine avec l'exemple que tu donnes !!?

196. Le vendredi 1 mai 2009 à 21:04, par Mr_SATAN

Gravatar

Salut et merci infiniment pour ce dossier très complet et très compréhensible !!!

La Clearbox me convient parfaitement et j'envisage de remplacer mes vieilles Lightbox, j'aurais juste une petite question d'utilisation. Je souhaite créer des galeries mais sans placer de miniatures de mes photos sur ma page, or avec des "images invisibles", Clearbox ne semble pas en mesure de créer des Thumbnails. Y'a t'il une astuce pour y arriver ?
Vous pouvez voir un exemple de mes galeries Lightbox à cette adresse : www.latoursombre.fr/03_il...

197. Le vendredi 1 mai 2009 à 21:33, par 1loup

Gravatar

>Phil: Merci d'être revenu indiquer la solution.

>Mr_SATAN: Remonte voir le commentaire n°70.

>iManu: Je repasserai te répondre un autre jour, là, je suis crevé (mais c'est une playlist YouTube que j'ai mis en lien sur une image d'une copie d'écran d'elle-même, jette un oeil au code source sinon je t'expliquerais).

198. Le vendredi 1 mai 2009 à 21:48, par Mr_SATAN

Gravatar

Merci pour ta réactivité 1loup !
J'ai bien suivi tes conseils du commentaire #70 par contre le résultat est le même : la galerie se crée bien, mais pas les Thumbnails en bas. D'ailleurs petite précision, pour faire cet effet inutile de créer une quelconque règle avec la class=invisible, il suffit de ne rien mettre entre les balises <a href=...> et </a>

199. Le vendredi 1 mai 2009 à 21:56, par 1loup

Gravatar

>Mr_SATAN: Ahhhhhhhhhhhhhhhhh, je n'avais pas compris, tu parlais des miniatures qui apparaissent en bas une fois la clearbox ouverte lorsqu'on déplace la souris vers le bas ? Il me semble bien effectivement que c'est construit à partir des miniatures sur la page.
As-tu essayé en faisant comme indiqué, avec la class=invisible mais en remplaçant l'intérieur des liens (là ou tu dis ne rien avoir mis) par des miniatures (des img) ?
(je n'ai pas le temps d'essayer là, moi)

200. Le vendredi 1 mai 2009 à 22:05, par Mr_SATAN

Gravatar

Raaaah t'es un chef !!! Ça fonctionne à merveille !
Merci beaucoup pour le coup de main ! Bonne soirée !

201. Le lundi 4 mai 2009 à 05:36, par 1loup

Gravatar

>iManu: Voici mes explications :

  • Création de la playlist YouTube
  • Dans Compte / Lecteurs vidéos personnalisés, obtention du code d'intégration :

<object width="416" height="337"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFOKyETJ7PCnayhcTzOyG27G_9iIcwu6N8U="></param><embed src="http://www.youtube.com/cp/vjVQa1PpcFOKyETJ7PCnayhcTzOyG27G_9iIcwu6N8U=" type="application/x-shockwave-flash" width="416" height="337"></embed></object>

  • Faire un screenshot du lecteur pour affichage sous forme d'une image (screenshot.jpg)
  • Copier le "value" du code fourni, ainsi que le width et le height ( ici 416, 337 et http://www.youtube.com/cp/vjVQa1PpcFOKyETJ7PCnayhcTzOyG27G_9iIcwu6N8U= )
  • Le code permettant de lancer la playlist via une shadowbox sera :

<a href="value&amp;hl=fr&amp;autoplay=1" rel="shadowbox; width=416; height=337;">
<img src="http://url-du-screenshot.jpg" alt="PlaylistYouTube" /></a>

(en remplaçant le value par sa valeur et en indiquant l'url de stockage du screenshot)

Ce qui donne dans cet exemple :


<a href="http://www.youtube.com/cp/vjVQa1PpcFOKyETJ7PCnayhcTzOyG27G_9iIcwu6N8U=&amp;hl=fr&amp;autoplay=1" rel="shadowbox; width=416; height=337;">
<img src="http://1loup.net/share/IMG/PlaylistYouTube.jpg" alt="Test PlaylistYouTube" style="display:block; margin:0 auto;" /></a>

(j'ai rajouté un style dans l'img pour avoir l'image centrée)

Est-ce plus clair maintenant ?

202. Le lundi 4 mai 2009 à 14:02, par iManu

Gravatar

@1Loup : oui, temps clair sur toute la France de ma boite crânienne :pompom:

Bon c'est exactement ce que je cherchait, mais pas contre (heu, oui désolé :evil: ) il apparait trop de mentions YouTube à mon goût .. (pas très glop pour un site commercial qui ne souhaite pas forcement faire mention partout de son hébergeur de vidéos ... :urk: )

A ce propos, j'ai bossé sur une version (pas de vidéos pour le moment, hein) de slideshow google en javascript via un album Picasa (merci aux amis du vin) ici : inxtense.com/testrss/test... ... bon c'est en vrac et je n'y ai pas touché depuis une grosse semaine ... l'avantage c'est qu'il est clean au niveau de la pub .. mais par contre, dur dur pour faire fonctionner ShadowBox avec l'API google ..

En tout cas merci pour tout ça 1Loup :bisou:

203. Le lundi 4 mai 2009 à 14:35, par Daryan

Gravatar

Bonjour,

Vraiment sympa ton comparatif, surtout que tu as prit la peine d'en tester beaucoup.
Personnellement j'en ai testé deux ou trois avant de m'arrêter sur shadowbox. Sachant que jusque là j'avais l'habitude de lightbox, mais que comme toi je cherchais une solution plus légère.
Par contre je suis surpris, étant donné ton niveau d'exigence, que tu n'ai pas tiqué sur le fait que shadowbox est moins accessible et pratique pour l'utilisateur que lightbox. En effet le tout petit menu en bas à droite avec des flèches minuscules pour passer d'une image à l'autre ce n'est pas très pratique pour les utilisateurs qui ne sont pas des as de la souris. En ce sens je préfère largement le système lightbox où cliquer sur la partie droite de l'image fait passer à la suivante, c'est plus ergonomique je trouve.

Du coup je vais tester slimbox pour voir, la version 2 utilise maintenant jQuery au lieu deMootools. Ce script ne gère que les images, mais c'est suffisant pour l'utilisation que j'en fais. Je vous tiendrais au courant du test de slimbox 2.

204. Le lundi 4 mai 2009 à 14:44, par Daryan

Gravatar

Le test de slimbox2 n'aura pas duré longtemps, il répond parfaitement à mon besoin, aussi ergonomique que léger. Petit avantage supplémentaire par rapport à Shadowbox, il permet d'avoir une ligne de texte descriptif plus longue. En effet lorsque la ligne de texte est plus longue que l'image l'affichage bug avec Shadowbox.

205. Le lundi 4 mai 2009 à 17:42, par 1loup

Gravatar

>Daryan: Si je n'ai pas choisi entre Shadowbox et Clearbox, c'est parce qu'elles ont toutes les deux des qualités et des défauts dont justement cette navigation qui me plait moyen mais qui est tout de même moins pire que ce que tu dis car si tu n'es pas un as de la souris, avec la version que j'utilise, tu peux naviguer au clavier avec les touches N(ext), P(revious) et C(lose) (en plus des flèches droite et gauche de ton clavier). La version actuellement sur le site de l'auteur fonctionne elle avec les touches flèches droite et gauche de ton clavier (plus les touches ESC, q ou x pour fermer).

206. Le mardi 5 mai 2009 à 16:13, par Daryan

Gravatar

Oui bien sûr on peut utiliser les flèches du clavier ce qui est simple et pratique, mais je pense que l'utilisateur lambda ne pensera pas à utiliser les flèches, et qu'il se donnera du mal à essayer de cliquer sur les petites icônes. Je suis assez sensible à tout ce qui est accessibilité et ergonomie pour le grand public, c'est pour ça que je donne de l'importance à ces détails. C'est un peu dans le même ordre d'idée que les gens qui font des liens sur "ici" (ex: vous trouverez le site officiel en cliquant ici), c'est ridicule d'un point de vue technique (référencement) mais aussi tout simplement d'un point de vue ergonomique (pas parlant et bon courage pour viser le lien de trois lettres).

Enfin je m'égare, mais tu auras compris le fond de ma pensée ;) Dans tous les cas je suis très content de Slimbox 2 :)

207. Le dimanche 10 mai 2009 à 18:31, par StefBud

Gravatar

bonjour .
mon site perso est bourrer de photos en ouverture lightbox, mais sur les grandes series je trouve que ne pas avoir le choix de la photo dans une gallerie me gene . Serait t-il possible d'adapter une box sans faire trop de modif.
Merci ben pour tes reponses toujours rapide est clair .

Le site perso ==> www.chezlesbudon.com

208. Le mercredi 13 mai 2009 à 06:03, par 1loup

Gravatar

>StefBud: J'ai l'impression que je ne comprend pas ce que tu demandes ! Si tu veux une mini-galerie DANS l'effet lightbox, il y a la clearbox qui fait cela lorsqu'on déplace la souris vers le bas de l'image, elle affiche les autres images en miniatures et on peut choisir où aller. Si c'est à l'extérieur, c'est à toi de te trouver un système de galerie qui te convienne sur laquelle tu greffes l'effet lightbox, non ?

209. Le vendredi 22 mai 2009 à 08:09, par adrian

Gravatar

Bonjour bonjour ! Je suis très impressionné par ton "post" enfin, wouah, quel travail!! Juste une question: je cherche à ouvrir ma shadowbox depuis une iframe, mais sur ma "main" page. Sur le site de l'auteur j'ai vu un truc avec .parent mais j'ai pas compris. Aide moi s'il te plait!

210. Le mercredi 27 mai 2009 à 19:06, par 1loup

Gravatar

>Adrian: J'ai une solution efficace mais je ne sais pas pourquoi, j'ai comme qui dirait l'impression que tu ne vas pas trop aimer : Apprends à ne plus te servir des iframes :ange:

Sinon, comme moi et l'anglais on n'est pas trop copain et que je n'utilise pas les iframes, je ne suis pas certain mais je dirais que tu pourrais essayer ce qui est expliqué sur cette page :

www.shadowbox-js.com/foru...

211. Le dimanche 21 juin 2009 à 19:36, par tomtom

Gravatar

Bonjour 1loup,
Je reviens sur ton blog qui m'a été un vrai levier pour travailler avec shadowbox et surtout m'apprendre en bon débutant à mettre les mains dans le code...
J'ai une question: est-il envisageable de créer,-et dans ce cas comment faire??-, une "double box" qui s'afficherait sur la même page simultanément au premier clic sur un lien, donc deux boxes qui apparaîtraient côte à côte, par exemple la box gauche avec images et la box droite avec textes...?
Possible? pas possible?
Merci de tes précieux conseils!
tomtom

212. Le mardi 23 juin 2009 à 22:08, par 1loup

Gravatar

>Tomtom: Aucune idée ! Et je ne vois vraiment pas comment cela serait possible, je doute que cela soit faisable. Cependant, il serait préférable de questionner l'auteur de Shadowbox.

213. Le mardi 30 juin 2009 à 11:35, par rore

Gravatar

Bonjour,

J'utilise Clearbox pour ajouter un produit au panier.
Fonctionnement : dans la fiche produit, le lien "ajouter au panier" ouvre la box en lui passant le n° du produit en paramètre. La page appelée par la box, met à jour le panier et informe l'internaute que tout est ok. Jusque là pas de pb !

Mon soucis est que je souhaite ajouter plusieurs produits (que je ne connais pas à l'avance) en même temps dans le panier, ce qui implique l'utilisation d'un formulaire et d'un bouton de validation... Je n'ai donc plus de lien (ni REL, ni HREF) pour passer les paramètres de la box. Comment faire pour appeler la box par un formulaire au lieu d'un lien ? Est-ce possible ?

Merci de votre aide

214. Le jeudi 2 juillet 2009 à 21:47, par 1loup

Gravatar

>Rore: Aucune idée.

215. Le lundi 6 juillet 2009 à 11:30, par Didier

Gravatar

Bonjour 1loup,

Merci pour toutes les précieuses infos de ce billet. J'ai un problème, je ne sais pas comment installer le lecteur pour voir les vidéos en flv. J'ai été sur le site du player NeoLao, j'ai téléchargé le swf (flv-player.net/medias/pla...) et essayé de l'utiliser comme tu le fais dans l'exemple clearbox avec flv (1loup.net/share/div/NeoV....) en remplaçant NeoV.swf par player_flv_js.swf mais sans succès. Le navigateur me propose d'enregistrer le fichier et refuse obstinément de jouer la vidéo.

J'ai remplacé le début de mon url par la tienne (jusqu'au "?"), et là ça marche. Pourrais-tu me dire ce qu'il y a de particulier à installer pour que ça marche ?

Merci d'avance et bonne journée.

Didier

216. Le lundi 6 juillet 2009 à 19:49, par 1loup

Gravatar

>Didier: Je pense à un problème de chemin. Vérifie que ton player est bien à l'endroit que tu indiques dans le code. Vérifie aussi que tu utilises un player compatible. Le player "JS" est pour une utilisation par javascript. Ici, il faut utiliser un player avec un code de type "flash" (les mini, normal, maxi ou multi).

217. Le mardi 7 juillet 2009 à 09:35, par Didier

Gravatar

Bonjour 1loup et merci pour ta réponse.

J'ai vérifié la question du chemin, le problème n'est pas là. Je l'ai modifié et obtenu une erreur 404, normal donc.
J'utilise le lecteur "multi" de flv-player.net.
Ton lecteur (NeoV.swf) est bien standalone ? Pas besoin de .js dans le même répertoire (ou de quoi que ce soit d'autre..).

Merci encore pour ta patience.

Didier

218. Le mercredi 8 juillet 2009 à 04:22, par 1loup

Gravatar

>Didier: Oui il est "standalone". Non, il n'y a rien d'autre ! Il date un peu par contre.
Et si tu essayais avec mon player sur ton hébergement ?
Fais un "sauver la cible sous..." de cette url pour voir pour le récupérer : 1loup.net/share/div/NeoV....

219. Le mercredi 15 juillet 2009 à 10:50, par Christian

Gravatar

Bonjour Iloup, Bonjour à tous

Bravo pour ce prodigieux travail de compilation. Ce débroussaillage m'a beaucoup aidé.

Si j'écris un poste dans ce blog c'est que j'ai quelques soucis. Sur le petit site que j'ai développé pour une amie, j'avais installé "lightbox". qui n'était pas mal mais j'ai un confit avec un menu en "js". Lorsqu?on clique sur les images les choses se passent normalement, c'est lorsque on clique sur un bouton du menu que cela foire... au lieu d'ouvrir la page liée, le bouton ouvre la dernière image de la galerie.....

J'ai essayé alors "clearbox" (qui pour moi est encore beaucoup plus joli) mais j'ai le même problème.

Voici le lien de la page test de cleabox:

users.skynet.be/bay.natur...

ps: j'ai du utiliser les fichiers du site du monsieur Hongrois car j'ai pas su faire fonctionner ceux de monsieur Iloup ( je n'ai pas les images)

Voici le lien de la page test avec fichier de Iloup:

users.skynet.be/bay.natur...

J'ai aussi testé "Shadow" mais j'ai le même phénomène de conflit.

Voici le lien de la page test

users.skynet.be/bay.natur...

Merci à ceux qui essayeront de m'aider car j'ai déjà beaucoup chercher sur Internet... sans succès. Un ami m'a dit qu'il faudrait peut-être changer quelque chose dans un "js" mais quoi et où?

Bien à vous et déjà merci

Christian

220. Le jeudi 16 juillet 2009 à 15:29, par 1loup

Gravatar

>Christian: Je ne vais pas résoudre ton problème mais peut-être que cela va t'aider dans tes recherches :

Tout fonctionne sous Firefox !
Tout fonctionne sous Opera !
Tout fonctionne sous Safari !
Tout fonctionne sous Google Chrome !

Les problèmes chez toi n'apparaissent qu'avec Internet Explorer !!!

Une fois de plus, tu démontres ainsi qu'IE est toujours une sombre bouse ! (parce que j'ai testé avec le dernier, IE8, hein...)

221. Le vendredi 17 juillet 2009 à 05:38, par tomtom

Gravatar

Bonjour 1loup
Une question d'ergonomie avec la shadowbox qui me titille depuis un moment:
lorsque l'on parcourt une série d'images, serait-il possible de passer à l'image suivante par un clic dans l'image en cours? (tout en conservant la fonction de navigation >> et <<)
Il y a sans doute un code js à écrire dans chaque page pour que ce soit possible non?
Merci d'avance!
tomtom

222. Le vendredi 17 juillet 2009 à 06:12, par 1loup

Gravatar

>Tomtom: La question a été posée dans les forums :

www.shadowbox-js.com/foru...

La réponse de l'auteur est qu'il hésite à intégrer cette possibilité car cela pourrait ne pas fonctionner correctement avec autre chose que les images.

Dans cet autre post, il dit que la navigation sera considérablement améliorée dans la prochaine version :

www.shadowbox-js.com/foru...

En attendant, il est possible de naviguer au clavier avec les touches flèches droite et gauche, non ?

223. Le vendredi 17 juillet 2009 à 18:04, par Christian

Gravatar

Bonjour Iloup,

Merci de ta réponse rapide et de tes tests sous différents navigateurs. Malheureusement, ces tests ne n'apportent pas de solution, ni de voie d'exploration vers une solution... Peut-être qu'une personne plus expérimentée que moi fréquentant ton blog aurait une idée .... je suis preneur !

Mille merci Bien à toi

Christian

224. Le dimanche 26 juillet 2009 à 06:32, par Kri-6

Gravatar

Très belle synthèse de ce qui se fait aujourd'hui.
Bravo

Utilises tu la lightbox???

En fait j'ai un soucis avec elle et je ne comprends pas pourquoi.
Je cherche a charger une page html dans une lightbox. Jusque la tout foncionne parfaitement.
Mais dans cette page j'appel une foncion javascript et c'est la que ca ne marche plus.
C'est comme si elle n'etait pas appelée.
Et la j'avoue donc butter et ne plus pouvoir avancer... GR!

Si tu as une idée cela me serait du plus grand secours.

Chris

225. Le lundi 27 juillet 2009 à 07:30, par 1loup

Gravatar

>Kri-6: Je ne l'utilise plus actuellement mais je l'ai utilisé pendant quelques temps ! A ma connaissance, la Lightbox n'est pas prévue pour charger une page html mais uniquement des photos. Tournes-toi plutôt vers des scripts qui indiquent explicitement faire cette fonction.

226. Le jeudi 6 août 2009 à 20:18, par Mr_SATAN

Gravatar

Salut Loup !

Toujours aussi pratique ce dossier ! Je me permet de reposer une question car j'aimerais utiliser un type bien spécifique de Lightbox sur mon nouveau site. Il me faudrait une lightbox qui n'affiche aucun rebord pour arriver à un résultat comme montré sur ce schéma que j'ai fait : greg.santana.free.fr/imag...
Les images de cette galerie seraient constituées donc d'une tache, d'une photo rectangulaire et de son titre (le tout sur le même montage) et le résultat serait nul si elles se retrouvaient enfermées dans des "boîtes". Je ne sais pas si je suis assez clair, mais si quelqu'un m'a compris et sait comment je pourrais arriver à ce résultat ça serait vraiment génial :)
@+

227. Le vendredi 7 août 2009 à 08:32, par 1loup

Gravatar

>Mr_SATAN: Perso, je ne vois pas comment faire cela !

228. Le mardi 11 août 2009 à 10:25, par 13770

Gravatar

Bonjour,

Où peut-on télécharger ClearBox

Merci

229. Le mardi 11 août 2009 à 11:24, par Mr_SATAN

Gravatar

13770 --> Comme pour toutes les recherches, Google est ton ami ;)

230. Le mardi 11 août 2009 à 11:31, par 13770

Gravatar

@ Satan

Merci du renseignement, sympa.

J'ai cherché sans succès et suis arrivé sur plusieurs liens rompus.

Si tu as quelque chose de direct pour un plugin Wordpress cela m'arrangerait sinon...

231. Le mardi 11 août 2009 à 11:38, par Mr_SATAN

Gravatar

Excuse moi mais tu n'as pas dû aller sur Google comme je te l'ai conseillé... Je viens de le faire et le simple fait de taper le mot "clearbox" te donne en première position le site officiel de la "Clearbox 3.0" et le lien n'est pas rompu. Le site est en "russe" mais la traduction est accessible par le bouton vert "English" en haut à droite. Tu peux y télécharger le plugin et avoir un tuto très détaillé.

Pour trouver les autres "box" présentées dans cet exemple, c'est la même manipulation.

232. Le mardi 11 août 2009 à 12:05, par 13770

Gravatar

Désolé mon commentaire était imprécis... je cherche un " plugin pour Wordpress " et sauf erreur sur cette page il n'en est pas question. Amicalement.

233. Le mercredi 12 août 2009 à 04:43, par 1loup

Gravatar

>13770: A ma connaissance, il n'existe pas de plugin Clearbox pour WordPress. Il y a par contre sur cette page toutes les explications pour installer la Clearbox sur WordPress "à la main" et si ce qui te gène, c'est qu'il faut ensuite mettre le rel="clearbox" sur toutes tes images, là par contre, j'ai fait un plugin pour WordPress qui le fait en automatique "AutoClearBox" ici :
1loup.net/index.php/2008/...

234. Le mercredi 12 août 2009 à 07:24, par 13770

Gravatar

Merci 1loup
J'utilise régulièrement Wordpress avec le plugin Shadowbox et j'en suis satisfait mais après avoir lu ton article je m'étais mis dans l'idée de tester Clearbox. Les différences et les résultats espérés - si j'en crois tes explications - ne valent pas une installation à la main. Merci pour ton étude des Lightbox-like vraiment superbe.
Amicalement

235. Le jeudi 3 septembre 2009 à 13:15, par patman

Gravatar

Bonjour,

Tout d'abord merci pour tes recherches, super boulot.
Je me suis donc livré à quelques tests sur la clearbox (3.0.2 du site de l'auteur).
C'est plutôt conclant.
Ce pendant, j'ai besoin d'insérer le parametre "href" dans l'attribut "rel" pour avoir une url différente de celle de mon "a herf".

Voici le code :

<a href='IMG/jpg/exact_01_home_photo.jpg' rel="clearbox[gallery=mygalerie,,href=IMG/jpg/exact_01_home_thumb.jpg]" title='01. Home'>

C'est la méthode indiquée sur le site clearbox pour ce cas de figure.
Mon problème est que la clearbox ne s'ouvre pas quand j'essaye ça.

Aurrais-tu fait des tests dans ce sens ?
Peux-tu (pouvez-vous pour ceux qua ça interesse aussi) me dire si ça fonctionne chez toi ?

Merci.

236. Le vendredi 4 septembre 2009 à 19:16, par 1loup

Gravatar

>Patman: Je suis resté avec une très vieille version de la clearbox donc je ne peux pas tester. J'avoue aussi que je ne comprend pas ce que tu cherches à faire :(
As-tu essayé de mettre des chemins complets pour les url ( http://tonnomdedomaine/IMG/...) plutôt que le relatif, histoire de voir si cela change quelque chose ?

237. Le jeudi 10 septembre 2009 à 01:38, par LaRevenante

Gravatar

Bonjour, tout d'abord merci et félicitation pour cet excellent test, j'ai essayée d'installer la clearbox, mais je n'ai absolument pas réussie! Il semblerait que cet article ne soit pas vraiment adapté aux novices comme moi, qui n'ont jamais installé de visionneuse flash et qui n'ont d'ailleurs jamais touché de près ou de loin à du Flash. Dommage.

Bonne continuation tout de même.

238. Le vendredi 11 septembre 2009 à 04:39, par 1loup

Gravatar

>LaRevenante: J'ai essayé d'expliquer le plus simple malheureusement je ne peux pas non plus tout détailler. Si tu veux de l'aide personnalisée, il faut me dire ce que tu as fait, ce que tu sais faire, ce que tu ne comprends pas, à quel endroit (url) tu installes cela parce que ma boule de cristal est cassée.

239. Le vendredi 2 octobre 2009 à 17:00, par Lise

Gravatar

Bonjour iloup,

Au risque de le repéter une n ème fois, bravo pour ces recherches. Il est rare que je passe autant de temps à lire tous les commentaires mais c'est chose faite. Je pensais même que la dicussion aurait été close depuis longtemps, vu la date de début du poste. Me voilà rassurer.

Pour faire une bref présentation, je suis infographiste 3D et ne connait donc pas grand chose au web. J'essaye de faire de mon mieux mais passe souvent par des forums pour résoudre les nombreux problèmes.

J'ai refait mon site cette semaine (j'aimerai postuler dans une autre boîte) en mettant mes nouveaux projet et une refonte du design. Pour la partie galerie, j'ai fait appel à la LightBox (que je n'avais pas réussie à installer sur mon premier site^^ mais à l'heure d'aujourd'hui si). Mais je ne savais pas qu'elle ne lisait que les images, je pensais que les vidéos quicktime fonctionnait aussi. Donc j'ai fait des recherches et BINGO, je viens de tomber sur ce poste.
Donc je pense que je vais essayer d'installer la ShadowBox dès ce soir. En espérant que ça marche, sinon, je referai une apparition ;-)

Une petite question néanmoins ? Sur mon pc perso et celui du boulot, ma lightBox fonctionne très bien (IE). Mais chez mon beau-frère qui surfe sur firefox, ça ne marche pas. Je donne l'adresse de la page web www.liselambert.fr/2d.htm... Je ne sais pas si c'est une erreur de mon code ou autre.

Et une autre question. En fait plutôt une confirmation. Ni connaissant pas grd chose en web, je suis tombé sur des mots "inconnus" à mon langage de 3Diste^^ J'ai donc fait des recherches et une confirmation des définitions me permettrait de mieux dormir ce soir.
WordPress est un hébergement pour blog ?
Et iQuéry, c'est une sorte de touche raccourci pour éviter de taper un code ?

Ent tout, merci d'avance.

Lise

240. Le lundi 5 octobre 2009 à 06:55, par 1loup

Gravatar

>Lise: J'ai été voir avec Firefox ton site et cela fonctionne. Je pense donc plutôt à un problème sur le PC de ton beau-frère ! Je te conseille de lui demander de vérifier qu'il n'a pas désactivé le javascript.

* Wordpress est un moteur de blog (voir fr.wordpress.org/ ) et ils offrent aussi un hébergement light sur fr.wordpress.com/ basé bien entendu sur leur moteur.

* iQuéry ? Je ne connais pas ! Tu parles peut-être de jQuery ? C'est un framework javascript (voir fr.wikipedia.org/wiki/JQu... ) . L'idée, c'est des trucs qui sont déjà tout fait que tu peux réutiliser pour faire des trucs plus complexe. Cela ne sert à rien de réinventer la roue à chaque fois :)

Les lightbox-like font leur travail en faisant appel à du javascript mais pour cela, on utilise une "librairie" où une partie du travail est déjà fait comme jQuery (ou Mootools, Prototype...) enfin, c'est ce que j'ai compris.

(et à propos, c'est 1loup, avec le chiffre 1 pas la lettre i, mais c'est pas grave hein... ;-) )

241. Le lundi 5 octobre 2009 à 13:57, par Lise

Gravatar

Ah oui, désolé pour ton pseudo :-/ Problème de lunettes sûrement ^^

En fait, le site marche parce que je l'ai refait hier soir ;-) J'ai pu voir sur certains forums que les zones interactives de dreamweaver ne sont pas compatibles avec la lightBox et autre. J'ai donc redécoupé mes cellules pour faire un lien direct et là ça marche !!!

Malheureusement, je n'ai pas réussi à installer la shadowBox. J'ai du me trompé dans les lignes de codes ou je sais pas trop. Donc j'ai laissé la lightBox et mes vidéos sont bêtement ouvertes avec une page html ou dirigées vers un site. Tant pis. Ca fait moins classe ^^ Mais comme je te l'ai dis, je ne suis pas doué en web :(

En tout cas, merci d'avoir répondu.
Bonne semaine

242. Le vendredi 9 octobre 2009 à 21:10, par Mr_SATAN

Gravatar

Salut à tous !

Avez vous déjà constaté un bug avec la Clearbox 3 sur IE ? Dans mon cas, le script commandant le chargement de la Clearbox (dans le header) fait planter IE et m'envoie le message d'alerte "Internet Explorer ne peut pas ouvrir www.tenaciousdfrance.fr. Opération abandonnée". J'ai bien isolé le problème et je suis certain qu'il provient de la Clearbox.
Quelqu'un aurait une idée pour y remédier svp ?

243. Le lundi 12 octobre 2009 à 18:18, par 1loup

Gravatar

>Mr_SATAN: Je n'utilise pas la version 3 de la Clearbox, donc je n'en sais rien.

244. Le lundi 12 octobre 2009 à 18:23, par Mr_SATAN

Gravatar

Salut,
Je suis repassé à une version antérieur de Clearbox et ça fonctionne. Je confirme donc que le bug vient de la version 3.
@+

245. Le jeudi 11 février 2010 à 16:44, par rore

Gravatar

Bonjour à tous,
Même problème que Mr_SATAN et même solution... Merci beaucoup car j'ai perdu un temps fou avec cette erreur !

246. Le mardi 23 mars 2010 à 20:43, par stribouille

Gravatar

Bonjour,

Je tente désespérement d'utiliser clearbox pour afficher des vidéos au format avi et j'ai toujours le même message d'erreur:
ClearBox HIBA:

A kepet nem lehet betolteni:

Mon code est le suivant:
<a href="monsite/mavideo.avi" rel="clearbox">Titre de la vidéo</a>
J'ai passé de longues heures à chercher, je ne trouve pas la solution....

Alors que pour les images cela fonctionne nickel.
Merci à celles et ceux qui pourront me sortir de ce mauvais pas.

247. Le mercredi 24 mars 2010 à 04:24, par 1loup

Gravatar

>Stribouille: Sans me donner l'url où je peux regarder ce qui ne va pas, je ne peux rien faire. Il me faut l'adresse de la page contenant le code qui ne fonctionne pas.

Ensuite, il faut que tu me dises quelle version de ClearBox tu utilises (la version 3 sur le site de l'auteur ne fonctionne pas pareil que celle que j'utilise ici et au dire des commentaires précédents, elle est buggée). Il faut aussi me dire avec quoi tu as testé : Quelle version de quel navigateur sous quel système d'exploitation ?

248. Le mercredi 24 mars 2010 à 11:30, par stribouille

Gravatar

Bonjour 1loup.

J'utilise la version de clearbox que tu as mis en téléchargement sur cette page.
Je suis sous mac os x avec firefox.
Alors pour les photos qui fonctionne, voici le lien:
stephane.tribouillet.free...

et le code associé:
<a href="data/images/buis_shohin/200310/buis_shohin.jpg" rel="clearbox[shohin]" >
<img src="data/images/buis_shohin/200310/buis_shohin.jpg" alt="" /></a>
<br /><br />
<a href="data/images/buis_shohin/200310/buis_shohin1.jpg" rel="clearbox[shohin]" >
<img src="data/images/buis_shohin/200310/buis_shohin1.jpg" alt="" /></a>
<br /><br />
<a href="data/images/buis_shohin/200310/buis_shohin2.jpg" rel="clearbox[shohin]" >
<img src="data/images/buis_shohin/200310/buis_shohin2.jpg" alt="" /></a>
<br /><br />
<a href="data/images/buis_shohin/200310/buis_shohin3.jpg" rel="clearbox[shohin]" >
<img src="data/images/buis_shohin/200310/buis_shohin3.jpg" alt="" /></a>

En ce qui concerne les vidéos, elles se trouvent ici :
stephane.tribouillet.free...

C'est juste la dernière que j'ai essayé de clearboxé intitulé Test ;)
Voici le code correspondant:
<a href="stephane.tribouillet.free... rel="clearbox">Test</a>

J'ai testé également des .avi et .mov, même message d'erreur.
Merci de ta réponse rapide en espérant que tu me sortiras de ce mauvais pas

249. Le mercredi 24 mars 2010 à 23:10, par Boucan

Gravatar

Bonjour,
depuis quelques temps je m'occupe d'un site en local dans mon entreprise où je met pas mal de reportages photos. Je prépare les pages avec Photoshop, en galerie web. Et ensuite je gère le site avec Dreamweaver pour appeler ces pages.
J'ai voulu essayer Shadowbox qui est vraiment super, mais suivant les reportages, il y a + de 300 photos à mettre dans ces pages.
Mon soucis est que je rentre manuellement toutes les lignes avec les références des photos.
Voici un exemple de ma programmation dans ma page:
_________
<body>
<h1 align="center"><strong>Mes Photos</strong></h1>
<p>&nbsp;</p>
<p><div align="center">
<a href="galerie/01.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="01" class="hidden"><img src="vignette/01.jpg" class="border" /> </a>
<a href="galerie/02.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="02" class="hidden"><img src="vignette/02.jpg" class="border" /> </a>
<a href="galerie/03.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="03" class="hidden"><img src="vignette/03.jpg" class="border" /> </a>
<a href="galerie/04.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="04" class="hidden"><img src="vignette/04.jpg" class="border" /> </a>
<a href="galerie/05.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="05" class="hidden"><img src="vignette/05.jpg" class="border" /> </a>
<a href="galerie/06.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="06" class="hidden"><img src="vignette/06.jpg" class="border" /> </a>
<a href="galerie/07.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="07" class="hidden"><img src="vignette/07.jpg" class="border" /> </a>
<a href="galerie/08.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="08" class="hidden"><img src="vignette/08.jpg" class="border" /> </a>
<a href="galerie/09.jpg" rel="shadowbox[player];options={slideshowDelay:3}" title="09" class="hidden"><img src="vignette/09.jpg" class="border" /> </a>
</p>
</body>
________________

Y-a-t-il une solution pour éviter de taper toutes ces lignes et d'inclure par exemple toutes les photos d'un même répertoire?

Merci d'avance

250. Le mercredi 24 mars 2010 à 23:14, par 1loup

Gravatar

>Stribouille: Ayè, j'ai trouvé... Remplace ton rel="clearbox" par un rel="clearbox(320,250,click)"

La syntaxe des vidéos est différente de celle des images, il faut indiquer la taille d'ouverture de la box et comment elle doit s'ouvrir (click ou over)

251. Le mercredi 24 mars 2010 à 23:35, par 1loup

Gravatar

>Boucan: En passant par un système de galeries ? Ici, mes galeries de photos sont gérées par un plugin et affichés avec la ClearBox (mais j'aurais pu choisir de le faire avec ShadowBox) : 1loup.net/index.php/galle...

A ma connaissance, cela existe pour DotClear et WordPress.

Sinon, il y des systèmes genre Simpleviewer : www.simpleviewer.net/simp... (mais ce n'est pas avec Shadowbox)

252. Le jeudi 25 mars 2010 à 11:00, par stribouille

Gravatar

Merci 1loup cela fonctionne parfaitement, tu es un chef.
Il ne me reste plus qu'à modifier tous mes liens alors.
Amitiés.
Stéphane

253. Le jeudi 25 mars 2010 à 11:04, par stribouille

Gravatar

Par contre j'ai essayé d'avoir les vidéos en plus grand format par le code rel="clearbox(640,480,click)" mais la vidéo ne s'adapte par à la taille du cadre.
On ne peut donc pas afficher les vidéos en plus grand format?

254. Le jeudi 25 mars 2010 à 20:49, par Boucan

Gravatar

Merci 1loup, c'est exactement la présentation que je veux faire, mais existe-t-il un scrip pour éviter d'écrire toutes les lignes avec les référence des photos d'un même répertoire?

Merci pour ce super site.

255. Le jeudi 25 mars 2010 à 21:41, par stribouille

Gravatar

Bonsoir,

Je suis dans le même cas, j'ai une dizaine de galerie à refaire et c'est long même si mes images sont bien ordonnées (exemple: demo1,demo2) donc depuis ce matin je copie colle à tout va.
Je réfléchi à écrire un script php qui permettra de récupérer le nom des fichiers dans le dossier images, les copiers dans le dossier thumbs et de générer le code du fichier gallery.xml avec en paramètre le titre de la galerie et le type (même si je n'ai pas approfondi encore les différents types de galeries disponibles).
Pas de gestion des légendes car cela serait trop long de demander pour chaque fichier la légende associée.

256. Le samedi 27 mars 2010 à 07:41, par 1loup

Gravatar

>Stribouille: Au sujet de la vidéo, non, je ne crois pas que la ClearBox soit capable de les agrandir.

>Boucan: Laquelle des 2 solutions que je t'ai présenté te convient ? Si c'est la galerie comme ici, il faut avoir un blog dotclear ou wordpress et installer un plugin de galerie. Ensuite on uploade les images par le plugin et c'est le plugin qui fait le code.

Si c'est le Simpleviewer, il y a je crois dedans un script de fourni qui génère le fichier xml nécessaire.

>Stribouille: Je ne suis pas sous PluXml comme toi. Ici, c'est le plugin Galerie de DotClear qui génère tout le code. Je lui ai juste rajouté un petit bout de code pour qu'il utilise la ClearBox quand on clique sur une photo.

257. Le samedi 27 mars 2010 à 23:21, par Bast

Gravatar

Bonjour,
Merci pour ce post instructif !
Je souhaiterais utiliser Dynamic Content Gallery, et j'y parviens avec jquery. Mais je trouve que mootools est meilleur pour la présentation. Le problème est qu'il ne fonctionne pas avec Lightbox. Alors j'essaie de changer pour shadowbox qui doit me permettre d'utiliser Dynamic CG en même temps.
Sauf que visiblement, shadowbox ne prend pas le relais de lightbox. J'ai procédé ainsi:
-installation et activation de shadowbox puis désactivation de lightbox, selon le site de shadowbox, il n'y a rien de plus à faire (?) mais pourtant, lorsque je regarde une photo dans un article, le plugin ne fonctionne pas puisqu'une nouvelle fenêtre s'ouvre pour afficher la photo sur fond blanc...

J'ai essayé de rajouter le code suivant dans header.php:
<script type="text/javascript">window.onload = Shadowbox.init;</script>
<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>

Sans résultat !
Pourriez vous m'aider ? Ou me donner une autre solution (car j'ai l'impression que, contrairement à Lightbox, shadowbox ne permet pas d'insérer un commentaire avec les images et d'indiquer leurs tailles dans l'article).

Merci beaucoup !

258. Le dimanche 28 mars 2010 à 08:20, par 1loup

Gravatar

>Bast: Attention, l'ordre a son importance ! Tel que tu le fais là, tu initialises la shadowbox alors qu'elle n'est pas encore chargée, comment veux-tu que cela fonctionne ? C'est comme si tu cherchais à démarrer une voiture avant de remplir le réservoir d'essence et de charger sa batterie.

Ces lignes :

<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>

sont à mettre entre <head> et </head>

MAIS cette ligne :

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

est à mettre après le <body> donc pas au même endroit et surtout pas avant les autres !

Si après avoir remis cela dans le bon ordre et au bon endroit, cela ne marche toujours pas, il faut envisager de passer en direct plutôt qu'en relatif :

Tu mets dans ce cas les URL complètes : Tu remplaces les href et src="/clearshadow... par leurs chemins complets y compris ton nom de domaine (cela ne marche pas des fois en relatif sans qu'on comprenne bien pourquoi).

La shadowbox (comme la lightbox) affiche bien le "commentaire" en même temps que l'image si tu l'indiques en title="commentaire à afficher".

259. Le dimanche 28 mars 2010 à 14:48, par Bast

Gravatar

Merci pour la réponse !
Cela ne fonctionne pas pour moi, je ne vois pas où insérer le code, dans header.php je n'ai pas les balises head et body...
Actuellement tout les images que je place sur le site avec lightbox sont logées sur flickr.

260. Le dimanche 28 mars 2010 à 18:19, par 1loup

Gravatar

>Bast: Il y a forcément un head et un body, par définition.

Si c'est pour le site que tu as laissé l'url dans le formulaire de commentaire, sous wordpress, avec comme thème Mimbo2, regarde là :

Copie d'écran du header.php de Mimbo2

(J'ai entouré de rouge, le début du head puis sa fin avec le début du body)

261. Le dimanche 28 mars 2010 à 20:50, par Bast

Gravatar

Merci beaucoup, j'ai téléchargé le fichier "clearshadow" puis mis les adresses complètes dans le code. Et je pense qu'il n'y a plus rien à faire de ce coté là car pour tester, je clique sur une photo dans le site et elle ne s'affiche plus du tout (même pas dans une autre fenêtre), alors que l'endroit où les images défilent (slide dans l'entête) devient tout blanc...
J'utilise Flashfader pour ce slide, alors j'ai essayé de le désactiver en même temps que Lightbox mais sans résultat, cela ne change rien (même en supprimant également le code de ce plugin dans header.php).
Décidément, je crois que je vais devoir rester comme avant.

262. Le dimanche 28 mars 2010 à 22:52, par 1loup

Gravatar

>Bast: Tu es bien sous WordPress ? Pourquoi tu ne tentes pas le plugin ShadowBox JS ? wordpress.org/extend/plug...

263. Le lundi 26 avril 2010 à 15:59, par Benoit

Gravatar

Félicitations pour ce travail !!

J'aimerais un coup de main : je souhaite ouvrir automatiquement une clearbox au chargement (ou après qu'elle soit chargée) d'une page.

Pouvez vous m'aider ?

D'avance merci LOL

264. Le lundi 26 avril 2010 à 18:20, par 1loup

Gravatar

>Benoit: A ma connaissance, il est possible de déclencher l'ouverture de la clearbox en cliquant ou en survolant un lien. Il n'est pas possible de le faire au chargement, les javascripts ne se déclenchent qu'après le chargement complet de la page. Je ne vois pas comment faire pour déclencher automatiquement après le chargement.

265. Le mercredi 20 octobre 2010 à 12:11, par Serge

Gravatar

Salut 1loup

Tout d'abord félicitations pour tes recherches!

Je n'ai pas téléchargé ton pack mais j'ai shadowbox 3.03 . J'ai remplacé le player d'origine par "nonverblaster", comme indiqué dans le furum shadowbox(shadowbox-js.com/forum.ht...
Tout fonctionne super sous Firefox... Evidemment avec la bête noire IE7 mes videos FLV dans la section "videos(qui est une page html ouverte dans shadowbox avec des liens pour les videos) ne fonctionnent pas! J'ai parcouru le web a la recherche de solutions mais pour le moment sans succès.
Ce qui est étrange c'est que quand j'ouvre ta page de test sous IE7 ton lien pour les videos FLV fonctionne mais sur mon site ça na fonctionne pas. Je ne comprends pas pourquoi, c'est dingue!

Est-ce que tu connaitrais par hasard une solution a ce problème??

Voila mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/...
<html xmlns="www.w3.org/1999/xhtml&quo...
<head>
<title>Videos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
FadeDuration: 2.9,
animateFade: true
});
</script>


et voila un exemple dans le <body> :

<a href="www.sergesainterose.com/V... rel="shadowbox;height=480;width=640"
onmouseover="changeImages('Diaporama', 'images/Diaporama-over.jpg'); return true;"
onmouseout="changeImages('Diaporama', 'images/Diaporama.jpg'); return true;"
onmousedown="changeImages('Diaporama', 'images/Diaporama-over.jpg'); return true;"
onmouseup="changeImages('Diaporama', 'images/Diaporama-over.jpg'); return true;">
<img name="Diaporama" id="Diaporama" src="images/Diaporama.jpg" width="225" height="200" border="0" alt="" /></a>

J'ai aussi essayé avec un de tes codes pour lire la video FLV avec Neo player, mais en gardant nonverblaster et en modifiant le chemin:

<a href="www.sergesainterose.com/p... rel="shadowbox;height=480;width=640"
onmouseover="changeImages('I_wish', 'images/I-wish-over.jpg'); return true;"
onmouseout="changeImages('I_wish', 'images/I-wish.jpg'); return true;"
onmousedown="changeImages('I_wish', 'images/I-wish-over.jpg'); return true;"
onmouseup="changeImages('I_wish', 'images/I-wish-over.jpg'); return true;">
<img name="I_wish" id="I_wish" src="images/I-wish.jpg" width="231" height="200" border="0" alt="" /></a>

Mais ça n'a pas marché non plus.

Je suis débutant et ma compréhension de tout ça est limitée. Pourrais-tu m'aider stp??

Merci grandement!

Amicalement

Serge

www.sergesainterose.com


266. Le mardi 26 octobre 2010 à 16:19, par Eucaly

Gravatar

Bonjour et merci pour ce comparatif.

J'ai choisi clearbox pour mon site galerie. Ca marche sans problème ... enfin côté fonctionnement propre c'est ok mais j'ai un problème (d'où mon message :rolleyes: ).

Je n'ai pas les miniatures de la galeries, enfin si j'ai la photo par défaut no_image.gif qui se met pour chaque miniature et je ne sais pas du tout où se trouve le fichier gérant ça. je pense qu'il y a une condition dans un fichier qui vérifie si l'image existe ou non mais je n'ai absolument rien trouver.

Aurais tu une piste ou pas? je n'ai rien trouver sur le site du constructeur.

Merci par avance et bonne soirée

267. Le mardi 2 novembre 2010 à 16:55, par 1loup

Gravatar

>Serge: Je n'ai pas trop d'idées en fait. Tout ce que je vois, c'est que maintenant, la shadowbox est initialisée dans le head alors que pour mon pack, il est conseillé de l'initialiser dans le body. Peut-être voir si cela change quelque chose de déplacer le <script type="text/javascript">Shadowbox.init({FadeDuration: 2.9,animateFade: true});</script> juste après l'ouverture du body ?

268. Le mardi 2 novembre 2010 à 17:04, par 1loup

Gravatar

>Eucaly: Pour que les miniatures s'affichent, il faut les créer et les mettre en source :

Si tu mets :

<a href="lien de l'image.jpg" rel="clearbox[nomdetagalerie]">texte pour un lien</a>

il n'y aura pas de miniature, tandis que si tu mets :

<a href="lien de l'image.jpg" rel="clearbox[nomdetagalerie]"><img src="lien vers une miniature de ton image.jpg" alt=""></a>

alors tu auras des miniatures. Mais les miniatures, c'est à toi de les créer et d'en indiquer le chemin, la clearbox ne les fabriquent pas !

269. Le samedi 18 décembre 2010 à 20:05, par truitas

Gravatar

Merci beaucoup pour tous le travail effectué et la mise à disposition de tous.
ci-dessous un lien vers un travail qui ressemble au tien, si çà peut t être utile:
planetozh.com/projects/li...


bien cordialement

270. Le samedi 18 décembre 2010 à 20:29, par truitas

Gravatar

j'oubliais j'ai bien aimé ça a voir: différents types de contenus (texte, video, images) et toutes sortes d'animation avec jquery et css
j'espère ne pas être hors sujet

css-tricks.com/anythingsl...

un site qui recense d'autres sliders:
www.webcssdesign.com/ajax...

271. Le mercredi 12 janvier 2011 à 17:39, par thejoker

Gravatar

bonjour
super article!!

j'ai une question un peu spécifique : je souhaite a partir d'un slideshow (composé à partir de requetes vers BD donc un slideshow dynamique ) lancer au clic sur l'image du slideshow l'affichage de shadowbox dans lequel je souhaite selon les cas ouvrir une url , un pdf etc..

j'ai essayé avec jd.gallery smooth design mais il me faut un <a href avec class="open"> et du coup l'appel de <rel="shadowbox;width=1000;height=700;" href="URL"> ne fonctionne pas...

quelqu'in a t il deja realisé le meme type de combinaison de script?
quel slide show utiliser??? 8-)

272. Le vendredi 21 janvier 2011 à 11:20, par 1loup

Gravatar

>Truitas: C'est exprès que je ne fais pas de lien vers le site dont tu parlais. Demandes-lui donc pourquoi la ClearBox n'est pas dans sa liste. Je trouve qu'il n'est pas objectif.

Les sliders, ce n'est pas tout à fait la même chose. En désactivant le javascript, plus rien n'apparait avec eux tandis que les box, c'est juste une amélioration de la présentation si le javascript est activé mais le contenu reste apparent en cas de désactivation.

>Thejoker: Je ne comprends pas la question, ton usage est trop compliqué pour moi.

273. Le lundi 11 juillet 2011 à 16:53, par GreG

Gravatar

Salut !

Grace à ton comparatif j'utilise Clearbox depuis des années et j'en suis très satisfait ! Malheureusement celui ci ne fonctionne plus avec Firefox depuis sa version 4.0 :( (l'affichage des photos est "décalé")
Si quelqu'un a trouvé une solution pour palier à ce problème, je suis preneur !

274. Le lundi 11 juillet 2011 à 17:09, par GreG

Gravatar

Oups ! Je viens de comprendre que je n'utilisais pas la dernière version qui corrige le bug de FF :-/ Excusez moi pour le commentaire inutile du coup :-|

275. Le samedi 15 octobre 2011 à 12:39, par Claude

Gravatar

Excellent comparatif.

A propos, le site de l'auteur hongrois de clearbox est maintenant en anglais donc plus de problème pour y trouver de l'info.

Petite suggestion: il n'est pas nécessaire de créer une miniature pour chaque image. Si les grandes images ne sont pas trop volumineuses, il suffit d'utiliser la même image pour le lien et l'image réduite. Il suffit de mette une largeur ou une hauteur dans la la balise le la vignette.

276. Le samedi 19 novembre 2011 à 23:52, par Vinche

Gravatar

Bonjour,
Un grand merci pour ce comparatif. J'ai pour ma part adopter clearbox seul dans sa dernière version.
J'ai un petit soucis, à chaque page chargée, il affiche "Clearbox ready" en haut de la page pendant quelques secondes. Est-il possible de désactiver ça?
Mon site est en local pour le moment mais le phénomène est visible là: www.clearbox.hu/demo.html
Ne pas hésiter à rafraichir la page.
En tout cas un grand merci pour se travail.
Vinche

277. Le dimanche 20 novembre 2011 à 07:53, par 1loup

Gravatar

>Vinche: Je suis allé voir de quoi tu parlais mais hélas je ne sais pas d'où cela vient (et comme je n'utilise pas cette version, je n'ai pas ce problème). Voir avec l'auteur de Clearbox peut-être ?

278. Le mardi 22 novembre 2011 à 12:56, par Vinche

Gravatar

@1loup: merci d'avoir pris le temps de regarder. Je n'ai pas vraiment le temps de gérer ça en ce moment, j'essayerais de poster une reponce quand j'aurais régler se problème.

279. Le vendredi 2 décembre 2011 à 14:16, par Vinche

Gravatar

Donc pour désactiver le message "Cleabox ready", il faut modifier le fichier:
/clearbox/config/default/cb_config.js

Modifier en mettant Off au lieu de On:
CB_OSD='off', // turns on OSD
CB_OSDShowReady='off', // when clearbox is loaded and ready, it shows an OSD message

Pour une raison que je ne comprend pas, si on mets off uniquement pour la deuxième ligne ça ne suffit pas.

280. Le vendredi 2 décembre 2011 à 17:44, par 1loup

Gravatar

>Vinche: Merci d'être revenu donner la solution pour ceux qui en auraient besoin et tomberaient ici.

281. Le vendredi 15 juin 2012 à 19:52, par Seb16230

Gravatar

Bonjour, je viens de faire un site internet pour un ami, www.firinga.com.
Je ne suis pas du tout expert en création de site, et j'ai un probleme sur les galeries d'image,
j'utilise les shadowbox, tout fonctionne trés bien mais mon probleme concerne le texte de ses images,
En fouinnant dans le site, dans les archives par exemple " www.firinga.com/recherche... " les images s'affiche sur la droite de l'ecran sous forme de minature (un texte s'affiche au passage de la souri "<a href="xxx" rel="shadowbox" title=TEXTE et SOURCE de l'image"/><img ........./></a>, et en cliquant dessu on lance la shadowbox, le probleme arrive a se moment la, le voudrai que le texte des images qui est assez important s'affiche par exemple sur la droite de l'écran, comment faire? Si vous avez la technique sa serai top.
Merci beaucoup et bravo pour votre boulot sur cette page!

282. Le dimanche 1 juillet 2012 à 07:43, par 1loup

Gravatar

>Seb16230: Non, je ne sais pas faire cela.

Ajouter un commentaire

Calculette

Le code HTML dans le commentaire sera affiché comme du texte, les adresses internet seront converties automatiquement.

Informations supplémentaires :

Ici, c'est chez moi, compris ?
Je ne fais pas de prémodération, le captcha devrait éliminer les spammeurs.
Mais je dis non au langage SMS.
Essayez d'être compréhensible. Je préfère des fautes de frappes, de grammaires, d'orthographes à "KiC Kifè KK".
Pour le reste, ensuite, je fais ce que je veux avec VOS commentaires. Je peux très bien les modifier (je mettrais "Edit") ou les censurer si je l'estime nécessaire.

(Adresse IP enregistrée même derrière un proxy !)

QUoi ?

Bah, un blog... c'est un avis personnel qui n'engage QUE moi (et encore!), purement subjectif etc...

Abonnez-vous à mon fil RSS

Quelques infos sur mon Twitter

Derniers blablas

Images aléatoires

Le choupinou Jake Gyllenhall
7188c445c1.jpg
Photos Persos
DSCN0081.JPG
Des choupinous sexy
I53-05.jpg
Fractales
Mothra Returns.jpg

Syndication / Autres

Logo Free Hugs - Câlins gratuits

Logo Blog sans Pub

Logo Mon blog se nourrit de vos commentaires

Début | Contenu | Menu | Sidebarre | Extra | Recherche
Trombinoscopes