Smoothbox, Thickbox pour Mootools

March 17th, 2007

Voici, 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 !! ;-)

Tester Smoothbox

54 Responses to “Smoothbox, Thickbox pour Mootools”

  1. Fr@ncky Says:

    Great! Tout simplement great!

  2. Mootools : SmoothBox et Ajax auto suggest < Fardeen GHULAM Says:

    [...] Popoff, s’est sorti les doigts et nous a concocté Smoothbox, une conversion de Thickbox qui permet entre autres d’afficher [...]

  3. Kenobi Says:

    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

  4. Boris Says:

    Bonjour,

    Cela vous fait quoi comme erreur exactement (via Firebug) ?
    Vous chargez votre nouvelle page via AJAX ou dans une iframe ?

  5. Kenobi Says:

    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

  6. Kenobi Says:

    je n’arrive pas afficher le code source de le post ci dessus !

  7. Boris Says:

    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.

  8. Brad Says:

    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

  9. Boris Says:

    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,

  10. Gabriele Perego Says:

    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!

  11. Boris Says:

    Hey Gabri,

    If you’re inside an Iframe, you have to do ” parent.TB_remove(); ” to close the box.

    Cheers,

  12. Gabriele Perego Says:

    Perfect, now works well!! Thanks, Boris!!

  13. fredy Says:

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

  14. lords Says:

    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

  15. Boris Says:

    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.

  16. lords Says:

    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

  17. Boris Popoff | gueschla.com Says:

    33 plugins pour Mootools que vous devriez connaitre !…

    ……

  18. dme Says:

    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 ?

  19. Boris Says:

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

  20. Aurélien WERNER Says:

    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

  21. El manouche Says:

    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!

  22. Lyubomir Petrov Says:

    How can the IFrame container be automaticly resized per child document contents :-?

  23. ibhdoglrqx Says:

    Hello! Good Site! Thanks you! okkbluiambtvp

  24. Alan Says:

    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!

  25. Alakhnor Says:

    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.

  26. Abstra Says:

    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?

  27. Creatix Says:

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

  28. excellenteBox Says:

    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…

  29. Arthur Says:

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

  30. Creatix Says:

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

  31. Émilie Says:

    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

  32. Émilie Says:

    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

  33. Céline Says:

    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

  34. Sid-Ahmed Says:

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

  35. Touwal Says:

    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

  36. ADK Media Says:

    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?

  37. Boris Says:

    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

  38. ADK Media Says:

    Merci pour la prompt réponse, je testerais votre solution… ;)

  39. Sid-Ahmed Says:

    Touwal > Essaie avec un & pour la 2 eme instructions au lieu du ? dans ton url .

  40. David baillargeon Says:

    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

  41. iDoliprane Says:

    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.

  42. 1debe Says:

    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+

  43. Tuf Says:

    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

  44. Tuf Says:

    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.

  45. Boris Says:

    Salut ! En effet ya toujours moyen de bidouiller, c’est cool que tu ai résolu ton problème.

  46. b1 Says:

    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

  47. b1 Says:

    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+

  48. Boris Says:

    b1 > J’ai pas testé le flash via iframe, uniquement via AJAX ou injection JS

  49. b1 Says:

    Ok, merci pour ta réponse, je vais regarder de ce côté la. Merci, salut.

  50. Kenjin Says:

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

  51. Kenjin Says:

    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.

    @+

  52. kd Says:

    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.

  53. bouticheval Says:

    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

  54. Rija Says:

    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