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 !! 
March 19th, 2007 at 16:05
Great! Tout simplement great!
March 20th, 2007 at 01:51
[...] Popoff, s’est sorti les doigts et nous a concocté Smoothbox, une conversion de Thickbox qui permet entre autres d’afficher [...]
March 21st, 2007 at 16:08
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
March 21st, 2007 at 17:06
Bonjour,
Cela vous fait quoi comme erreur exactement (via Firebug) ?
Vous chargez votre nouvelle page via AJAX ou dans une iframe ?
March 22nd, 2007 at 09:13
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
March 22nd, 2007 at 09:15
je n’arrive pas afficher le code source de le post ci dessus !
March 23rd, 2007 at 14:23
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.
April 10th, 2007 at 06:59
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
April 10th, 2007 at 09:35
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,
April 10th, 2007 at 10:43
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!
April 10th, 2007 at 10:50
Hey Gabri,
If you’re inside an Iframe, you have to do ” parent.TB_remove(); ” to close the box.
Cheers,
April 10th, 2007 at 10:57
Perfect, now works well!! Thanks, Boris!!
April 13th, 2007 at 16:42
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
April 13th, 2007 at 19:58
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
April 13th, 2007 at 20:15
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.
April 13th, 2007 at 20:51
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
April 18th, 2007 at 09:49
33 plugins pour Mootools que vous devriez connaitre !…
……
April 20th, 2007 at 14:45
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 ?
April 20th, 2007 at 14:51
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é.
May 2nd, 2007 at 12:57
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
May 9th, 2007 at 11:22
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!
May 17th, 2007 at 19:30
How can the IFrame container be automaticly resized per child document contents
June 21st, 2007 at 01:45
Hello! Good Site! Thanks you! okkbluiambtvp
June 21st, 2007 at 08:45
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!
September 8th, 2007 at 22:18
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.
September 11th, 2007 at 12:59
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?
September 21st, 2007 at 00:14
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
September 25th, 2007 at 16:31
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…
September 26th, 2007 at 13:32
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();
October 3rd, 2007 at 16:10
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
November 4th, 2007 at 13:59
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
November 4th, 2007 at 14:01
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
November 14th, 2007 at 12:16
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
November 16th, 2007 at 16:51
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
++
November 23rd, 2007 at 12:15
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
December 6th, 2007 at 21:06
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?
December 6th, 2007 at 21:09
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
December 6th, 2007 at 21:19
Merci pour la prompt réponse, je testerais votre solution…
January 9th, 2008 at 16:30
Touwal > Essaie avec un & pour la 2 eme instructions au lieu du ? dans ton url .
March 2nd, 2008 at 21:38
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
April 6th, 2008 at 19:26
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.
April 9th, 2008 at 11:17
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+
April 14th, 2008 at 16:56
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
April 14th, 2008 at 20:31
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.
April 14th, 2008 at 20:32
Salut ! En effet ya toujours moyen de bidouiller, c’est cool que tu ai résolu ton problème.
April 25th, 2008 at 15:33
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
April 25th, 2008 at 16:19
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+
April 26th, 2008 at 13:43
b1 > J’ai pas testé le flash via iframe, uniquement via AJAX ou injection JS
April 30th, 2008 at 09:05
Ok, merci pour ta réponse, je vais regarder de ce côté la. Merci, salut.
June 18th, 2008 at 15:11
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
.
Je n’ai malheureusement pas les compétences pour comprendre le script et le corriger.
Merci
@+
June 20th, 2008 at 10:06
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.
@+
July 22nd, 2008 at 10:15
Bonjour,
Smoothbox fonctionne t’il avec dans des frames ?
Je réalise un site constitué de trois frames et lorsque je lance smoothbox, celui-ci s’ouvre dans une de mes frames. Comment puis-je lancer smoothbox en premier plan.
Merci de vos réponse.
February 23rd, 2009 at 11:07
Bonjour et merci pour ce super script.
Je me posais une petite question : Tu précise le fait que le script est non obstructif et donc fonctionne même si javascript n’est pas activé. Hors quand je désactive javascript les liens s’ouvrent dans une nouvelle page. Y’a t’il un manip à affectuer pour que cela fonctionne (genre un fichier init.js à créer) ou il est tout bonnement impossible d’afficher la fenêtre sans le javascript activé et le fait qu’il soit non obstructif signifie qu’il ouvre tout de même le lien dans une fenêtre extérieur au lieu de ne rien ouvrir du tout
Merci pour cette précision
April 3rd, 2009 at 09:07
Bonjour,
j’utilise noobslide avec smoothbox et ca fait un conflit du genre : Element.Storage has no properties , mootools…2-core.js (ligne 190).
Que dois-je faire?
merci