Smoothbox, Thickbox pour Mootools
March 17th, 2007Voici, en avant première mondiale lol, Smoothbox, la conversion pour Mootools du script Thickbox de Cody Lindley, codée par moi-même.
Pour mémoire, Thickbox est un script fonctionnant sous jQuery, et qui permet d’afficher, tout comme Lightbox ou Slimbox, une fenêtre en superposition de la page, tout en faisant apparaître un overlay.
A ce jour, Thickbox est le seul script permettant simultanément d’afficher, de manière unobtrusive :
- Une image seule
- Un groupement de plusieurs images
- Du contenu inline
- Du contenu via Iframe
- Du contenu AJAX
J’ai allégé le code, corrigé quelques bugs, et rajouté un effet de fondu à l’ouverture.
Le script fonctionne avec tous les browsers modernes, à l’exception de Konqueror. Cela dit, aucun script de ce type utilisant un effet de fondu ne fonctionne actuellement sous Konqueror, que cela soit Lightbox v2, Slimbox, Moodalbox, etc …
Le script est unobtrusif dans le sens où si vous désactivez le javascript, tout continue à fonctionner correctement !! 
FR : 
2007-03-19 at 4.05 pm
Great! Tout simplement great!
2007-03-20 at 1.51 am
[…] Popoff, s’est sorti les doigts et nous a concocté Smoothbox, une conversion de Thickbox qui permet entre autres d’afficher […]
2007-03-21 at 4.08 pm
Bonjour,
je trouve ce script vraiment excellent
mais j’ai un petit soucis
voila je voudrais ajouter dans la page qui est affichée dans la “smoothbox” l’effet mootools suivant :
new Accordion($$(’dl#accordionExample dt’), $$(’dl#accordionExample dd’));
j’intègre correctement les bonnes séquences quand je lance la page qui doit s’afficher dans la “smoothbox” directement dans le navigateur, là aucun problème mon script fonctionne nickel
quand le click sur mon lien pour afficher la page dans la “smoothbox” aucun des effets mootools fonctionnent !!
voila voila, es ce que vous savez où placer les effets ?
merci d’avance
2007-03-21 at 5.06 pm
Bonjour,
Cela vous fait quoi comme erreur exactement (via Firebug) ?
Vous chargez votre nouvelle page via AJAX ou dans une iframe ?
2007-03-22 at 9.13 am
Alors
je charge ma page via ajax et dans firebug le code source s’affiche comme ci-dessous
/***************************************************************/
Option utilisateur
Fermer
1
2 // script mootools
3 function move_move() {
4 new Accordion($$(’dl#option_utilisateur dt’), $$(’dl#option_utilisateur dd’));
5 }
6 window.addEvent(’domready’, move_move);
7
/************************************************************/
je pense que l’include de la libraire mootools et la fonction accordion devra it plutot être défini dans la partie TB_HideSelect au lieu d’être dans la partie TB_AjaxContent ? non
2007-03-22 at 9.15 am
je n’arrive pas afficher le code source de le post ci dessus !
2007-03-23 at 2.23 pm
En effet, a mon avis il faut exécuter la fonction une fois que le contenu AJAX est présent, en passant evalScripts à true par exemple.
2007-04-10 at 6.59 am
Boris: Nice job with Smoothbox. Your effects are just what I was looking for and a step up from Cody’s great Thickbox.
When I go to mootools to make and download my own mootools package, what are the minimum components needed to work with Smoothbox? I’d like to keep it as small as possible like jQuery.
Kind regards,
Brad
2007-04-10 at 9.35 am
Hi Brad,
You have to include this components in your configuration :
Core
- Moo
- Utility
Native
- Array
- String
- Function
- Element
- Event
Addons
- Common
- Dom
Window
- Window.Base
- Window.Size
Effects
- Fx.Base
- Fx.CSS
- Fx.Style
- Fx.Styles
Remote
- XHR
- Ajax
Regards,
2007-04-10 at 10.43 am
Hi Boris, your script is really nice!!
Unfortunately i have a problem: I try to add a link to close the box (precisely iFrame version) inside the box itself, but the code doesn’t work. How I can recall the TB_remove function from the inside of the loaded page?
Thanks a lot, Gabri!
2007-04-10 at 10.50 am
Hey Gabri,
If you’re inside an Iframe, you have to do ” parent.TB_remove(); ” to close the box.
Cheers,
2007-04-10 at 10.57 am
Perfect, now works well!! Thanks, Boris!!
2007-04-13 at 4.42 pm
Bonjour,
je teste des plugin pour mon annuaire encore en creation.
Je cherche un moyen d’ouvrir mes sites referencer chez moi avec votre plugin.
Mais j’avous ne pas y arriver, je dois commettre une erreur quelque part. peut on proposer une page non heberger sur son site? par exemple la page de google?
j’ai essayer diverse possibilité et je ne vois pas du tout.
merci par avance de toute l’aide que vous pourriez m’apporter
et superbe plugin
2007-04-13 at 7.58 pm
salut, superbe plugin
2 petits bugs tout de même.
1/ sous internet explorer, lorsqu’on renvois sur une frame contenant une vidéo, la fermeture de la frame ne coupe pas le son, et on a le son de la vidéo qui tourne jusqu à la fin.
2/ sous firefox certains site toujours ouvert sous forme de frame plante totalement, voir même ferme le browser.
environement de test (vista et firefox 2.0.0.3)
si tu veux des exemples concrets, n’hésites pas a m’envoyer un mail, je te donnerais une url de test
bonne soirée
2007-04-13 at 8.15 pm
fredy > On peut ouvrir un site externe via iframe, mais pas par AJAX, car il y a une protection au niveau du browser, ce qui est normal.
lords > Je veux bien une url, je t’ai répondu par mail.
2007-04-13 at 8.51 pm
merci, j’ai envoyé l’url par mail afin de ne pas polluer ton blog, et donner accés a mes version beta a tout le monde de la terre entière.
a bientot
2007-04-18 at 9.49 am
33 plugins pour Mootools que vous devriez connaitre !…
……
2007-04-20 at 2.45 pm
Bonjour,
1. Serait-il possible d’utiliser Smoothbox pour afficher une googlemaps ?
2. Est-ce que Smoothbox fonctionne au dessus d’une animation flash (en plein écran avec wmode transparent) ?
3. Comment passer en paramètres les coordonnées (lat et lng) d’un lieu à afficher ?
2007-04-20 at 2.51 pm
Salut,
En fait, SmoothBox peut aficher a peu près n’importe quoi via l’iframe, ce qui n’est par contre pas possible via AJAX.
Cela sera donc possible d’afficher la page complete google maps, après, si tu veux juste la map, j’ai pas trop essayé, mais sinon il existe un autre plugin qui permet de le faire : GMapsOverlay
Pour l’affichage par dessus du flash dans les conditions que tu décris je n’ai pas essayé.
2007-05-02 at 12.57 pm
Bonjour,
J’ai un problème avec Smoothbox (comme avec thickBox
). Au chargement de la page, j’ai cette erreur (via firebug) :
window.addEvent is not a function
Je charge bien le fichier mootools.js avant smoothbox.js.
Environnement de test :
Mandriva + firefox 2.0
2007-05-09 at 11.22 am
Bonjour Aurélien WERNER,
je n’ai pas la réponse à ta question mais les commentaires ne sont pas un espace dédié à l’aide de “webmaster” en herbe qui ne savent pas faire autre chose que reprendre des scripts déjà écrits, je t’invite donc à te documenter et à apprendre par toi même.
Si tu n’arrives toujours pas à utiliser ces fichiers, dirige toi vers un forum d’aide…
Cordialement whoooeeeuuu!
2007-05-17 at 7.30 pm
How can the IFrame container be automaticly resized per child document contents
2007-06-21 at 1.45 am
Hello! Good Site! Thanks you! okkbluiambtvp
2007-06-21 at 8.45 am
Comment invoquer Smoothbox sans passer par un lien?
je m’ explique : j’ai une page et je voudrais en javascript appeler directement la smoothbox pour afficher un warning au lieu d’ utiliser la fonction alert( ) de javascript.
J’ ai vu que TB_Open ouvre la smoothbox, mais il faut lui passer un pointeur vers l’ element href, hors dans ce cas precis je n’ en ai pas!
Y-a-t-il un workaround simple? Je pensaqis utiliser un lien “cache” tel que:
et appeler en javascript:
var elem = document.getElementbyId(”monlien”);
TB_Open(”titre”,elem,false);
Y-a-t-il une meilleure solution?
Merci!
2007-09-08 at 10.18 pm
J’ai le même problème avec smoothbox/mootools qu’avec thickbox/jquery (et tous les scripts jquery d’ailleurs) : dès que le nombre d’appels sur une page est important, le script bloque au bout de quelques uns.
2007-09-11 at 12.59 pm
Bonjour,
Je découvre JS et ai choisi mootools/smoothbox pour developper. J’ai pris les sources et téléchargé mootools. Mais impossible d’avoir l’effet lightbox. Les images ou pages sont chargées sans le contour noir transparent. J’ai loupé quelle étape?
2007-09-21 at 12.14 am
Salut,
Merci pour ton script bien ficelé.
Jel’ai testé, il tourne très bien…mais malheureusement seul hic comme demandait “dme” lorsque l’on essaye de charger ca sur une page contenant du flash (exemple dans mon cas un menu) le menu reste par dessus et non caché par l’opacité….
Je souhaiterais utiliser ton script pour le développement d’un site en particulier, mais avec ce bug ce n’est pas possible…
As-tu une idée pour contourner le problème ?
Cela provient surement du script “swfobject” qui désactive le cadre gris automatiquement autour du flash…enfin à première vue…sans avoir testé…
Manque de temps je n’ai pas trop le temps d’essayer de mofidier ton code, donc si tu as une soluce, ou que tu veux que je te montre mon exemple, n’hésites pas à m’écrire
2007-09-25 at 4.31 pm
Bonjour,
Un petit mot pour signaler l’utilisation (sur un site en maquettage) ici :
http://87.98.206.148/~evasion/index.php?option=com_content&task=view&id=37&Itemid=45
=> Cliquez sur un des panneaux qui slident et ça ouvre la Smoothox version iFrame (avec un bouton “Close” de la “SqueeBox” et des coins arrondis), et à l’intérieur on a une … SmoothGallery !
Fonctionne sur FF et IE7, après je ne sais pas…
2007-09-26 at 1.32 pm
Bonjour, merci pour ce script.
Pour ceux qui veulent exécuter du javascript en se servant des box Ajax, il suffit de modifier la ligne : var myRequest ….. par :
var myRequest = new Ajax(url, {method: ‘get’,update: $(”TB_ajaxContent”),onComplete: handlerFunc, evalScripts: true}).request();
2007-10-03 at 4.10 pm
Malheureusement Arthur, avec l’applet Javascript pour flash et ton code, je n’ai pas réussis….si tu as une seconde, n’hésite pas à me faire signe par email, je te montrerais ma page en question.
merci
2007-11-04 at 1.59 pm
Bonjour Boris,
Je ne suis pas très forte en javascript, j’ai téléchargé les fichiers requis et je réussi à faire quelques trucs… mais je voudrais les comprendre un peu mieux afin de les adapter à mes besoins car je trouve ça génial.
par exemple, pour afficher une page dans un IFRAME j’inscris le lien comme ceci:
index.php?keepThis=true&TB_iframe=true&height=450&width=600
Imagine toi donc que le “#038″ ne me dit pas grand chose. J’ai pensé… Une couleur peut-être ? et j’ai changé la valeur pour me rendre compte que le iframe changeait de largeur et de hauteur.
Pourrais-tu m’indiquer un lien qui m’aiderait à comprendre les paramètres ? je ne vois pas d’explications dans exemples que tu donnes… j’imagine qu’il s’agit de maîtriser mootools…
Merci pour ton aide précieuse
Émilie
2007-11-04 at 2.01 pm
Curieux… les caractères #038 qui devraient s’afficher après This=true& n’apparaissent pas en html ici… c’est probablement du html. Voyons ce que ça donne maintenant
#038Test
2007-11-14 at 12.16 pm
Bonjour,
j’ai intégré la SmoothBox pour insérer au dessus de mes pages des infos, mais je souhaitais également que le lien puisse être appelé depuis une touche clavier, j’ai essayé ces deux solutions, mais ça ne fonctionne pas, graphiste je ne suis pas très forte en JS, qu’eulqu’un peut m’aider ? Merci. C.
Dans le JS :
$$(”a.smoothbox”).each(function(el){el.onclick=TB_bind});
$$(”a.smoothbox”).each(function(el){el.onkeypress=TB_bind});
Ou dans le lien :
a class=”smoothbox” accesskey=”1″ title=”Actualité mode” href=”#TB_inline?height=400&width=500&inlineId=fashion”>Mode
2007-11-16 at 4.51 pm
Bonjour,
Je souhaiterai afficher mes Tips dans la SmoothBox … Comment puis-je faire ?
J’ai deja les 2 plugins de charger, les Tips dans ma page principale ou tout fonctionne correctement et ma smoothBox où j’apel une autre page et je vouderai donc activer les Tips sur cette page.
Cordialement,
Sid
++
2007-11-23 at 12.15 pm
Bonjour à tous!
Voilà, j’ai intégré smoothbox à modx cms et lorsque je procède à des liens, cela s’effectues ainsi : “index.php?id=55″ hors avec smoothbox la so
uccession des deux points d’interrogation n’est pas apprécié : “iindex.php?id=55?height=480&width=640″. Avec çà chui bien dans le caca!!! Quelqu’un peut-il m’aider???
Cordialement à tous.
Touwal
2007-12-06 at 9.06 pm
Salut,
j’ai un léger probleme avec la smoothbox, j’utilise “swfobject” pour insérer mes fichiers swf, mais quand je l’utilise avec smoothbox le problème suivant se pose :
- le fichier swf apparait au dessus des images affichés par smoothbox.
quel est la raison selon vous?
2007-12-06 at 9.09 pm
ADK Media > Faut set le parametre wmode de tes objets flash (transparent ou opaque), plus d’infos ici : http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523
2007-12-06 at 9.19 pm
Merci pour la prompt réponse, je testerais votre solution…
2008-01-09 at 4.30 pm
Touwal > Essaie avec un & pour la 2 eme instructions au lieu du ? dans ton url .
2008-03-02 at 9.38 pm
Comment faire pour lancer smoothbox sur un input de type submit??
j’ai essayer de faire comme thickbox en utilisant alt=’#TB_…..’ mais sans succes.
Est-ce que quelqu’un aurais une idée…
Merci beaucoup
2008-04-06 at 7.26 pm
Bonjour,
Très très très bien ce plugin ! Bravo !
Je souhaiterais modifier l’opacité du fond pour qu’il soit complètement noir. Ets-ce possible et si oui, comment ?
De même, je souhaiterais enlever toute l’en-tête blanche (qui contient le titre et “close”.
En fait j’ouvre une page iFrame avec background noir et je ne voudrais pas voir les limites de la smoothbox. Tout doit être noir.
Merci pour votre (ou vos) réponse(s)
Ah oui ! Est-il possible d’ouvrir la smoothbox dans un div définie ?
Merci beaucoup pour tout.
2008-04-09 at 11.17 am
Bonjours,
Je suis tout débutant en js, et j’ai vraiment besoin de ce plugin smoothbox.
J’ai essayé de l’integrer mais je n’arrive vraiment pas , rien ne marche.
-j’ai lié la css à mon doc html
-j’ai lié les scripts smoothbox.js et mootools_11.1.js à mon doc html
-j’ai copié collé le code pour faire une smoothbox sur une image
Mais rien ne se passe. Une étape m’a elle echapée?? Avez vous une page avec juste un petit exemple smoothbox pour qui je puisse voir comment c’est fait?
Merci bcp pour votre aide.
a+
2008-04-14 at 4.56 pm
Bonjour Boris,
J’arrive a faire fonctionner le script pour les internautes classiques, c’est super. Merci de le faire partager.
Par contre, je me retrouve avec des pages d’indéxées dans les moteurs de recherche avec tous les paramètres (ce qu’il y a dans l’attribut ‘href’ en fait).
Est ce qu’il y a un moyen pour planquer ses paramètres dans le onclick? en jouant sur le “return” ou est ce que c’est même pas la peine d’essayer?
Merci de ta réponse.
Tuf
2008-04-14 at 8.31 pm
J’ai finalement trouvé un bidouille, j’ai tout mis dans this.rel
avec l’url clean dans this.href
Pas tres sémantique c’est claire mais les paramètres perturbait grave le cms. Les gens sur JavaScript tombaient sur des 404.
2008-04-14 at 8.32 pm
Salut ! En effet ya toujours moyen de bidouiller, c’est cool que tu ai résolu ton problème.
2008-04-25 at 3.33 pm
Salut!
Merci beaucoup pour ton script, il fonctionne parfaitement!
J’ai cependant le problème suivant: quand je met une iframe dans la smootbox et que cett iframe contient du flash, l’affichage du flash bug ou est carrément invisible (si background param sur transparent)!
Savez-vous d’ou cela peux t-il venir? J’inclut mon swf avec swxObject2.0, Est-ce à cause de ce javascript dans le javascript?
Merci pour votre aide, a+!
b1
2008-04-25 at 4.19 pm
Voici un exemple du problème dont je vous parlais dans mon précédent post. Cliquez sur “Example1″ pour afficher le iframe avec du flash.
http://bone.desdeux.ch/temp/smoothbox/
Merci pour votre aide!
a+
2008-04-26 at 1.43 pm
b1 > J’ai pas testé le flash via iframe, uniquement via AJAX ou injection JS
2008-04-30 at 9.05 am
Ok, merci pour ta réponse, je vais regarder de ce côté la. Merci, salut.
2008-06-18 at 3.11 pm
Bonjour,
Il arrive qu’il y ait des décalages dans la présentation de la page avant l’affichage de la smoothbox. Qui pourrais me dire à quoi c’est dû et s’il y a moyen de corriger cela ?
Il est vrai que ce décalage ne dure qu’une demi seconde avant que le site reprenne sa mise en page normale, mais c’est assez étrange et si nous pouvons l’éviter, cela serait bien :D.
Je n’ai malheureusement pas les compétences pour comprendre le script et le corriger.
Merci
@+
2008-06-20 at 10.06 am
Bonjour,
Une avancée pour le problème décalage, il se fait uniquement lorsqu’il n’y a pas de barre d’ascenseur. Quelqu’un sait-il comment agit le script et où il faut chercher et modifier le code pour que cette barre d’ascenseur n’apparaisse pas en provoquant un décalage ?
Je continue de chercher et je vous tiens au courant si je trouve.
@+