Smoothbox, Thickbox for mootools

May 15th, 2007

Author : Boris Popoff
Based on Cody Lindley‘s Thickbox, MIT License

Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.

For the description and the features, you can go to Thickbox’s website, as they are basically the same.

The main difference from a user point of view is that I’ve added some effects when the box shows up and on scroll.

Update 23/06/2008 : I have updated smoothbox.js, now it is compatible with mootools 1.2. If you needs the old one, you can still download it there. Sorry, no class for the moment, i dont have enough time :-(

Edit : Well it seems to be all messed up in IE, I’m going to see what’s going on, for now it’s safer to use the older one.

Update 16/08/2007 : Now Smoothbox uses only 100% W3C Valid CSS :-) Opacity is now set with Javascript and not in CSS. An IE CSS hack has been updated to use * html instead of _attribute.

Update 12/06/2007 : When you used the iframe and followed some links, the smoothbox was flickering on each page loading. This is fixed.

Download

Single Image

Demo

Single Image

HTML

Single Image
');
?>

Gallery Images

Demo

plant 1 plant 2 plant 3 plant 4

HTML

plant 1
plant 2
plant 3
plant 4
');
?>

Inline Content

Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

HTML

Show
');
?>

iFramed Content

Demo

HTML

Example 1
Example 2
');
?>

AJAX Content

Demo

HTML

Scrolling content
No-scroll content
login
');
?>

351 Responses to “Smoothbox, Thickbox for mootools”

  1. orfaon Says:

    Great work :)
    this is a really nice script :)
    thanks a lot for sharing it :)

  2. Josh Says:

    thanks a lot, it’s nice to only need one framework and I happened to need moo tools.

  3. Rod Says:

    one thing (found on another buggy plugin) : possibility to have a “fullscreen” box (iframe or Ajax or Inline) … which takes 100% of height and size of the body screen (maybe with some little margins :) )

  4. CssProdigy Says:

    Good great script, i’ve been looking for a lightbox style effect for inline content instead of just images. I needed one for movies. There are like 50 different types of lightboxes out there. There’s the original lightbox, theres slimbox, leightbox, iBox, Greybox, Greybox Redux, and tons more. But this one is simple and straightforward. Good job.

  5. Boris Says:

    @orfaon,CssProdigy : Thanks, that’s cool if you appreciate it :-)

    @Rod : Nice idea, maybe in a future release ;-)

  6. Scott Says:

    Okay I’m really confused for some reason, I got it working great on Firefox, safari, etc … but for SOME REASON (cough cough) it’s not working on IE? Your site works great in IE – what am I missing? (link)

  7. Boris Says:

    With Mootools, the first thing to do is to use a valid strict doctype. In my firefox the smoothbox of your page is not well positioned because of that. In which version of IE do you have the problem ?

  8. Scott Says:

    There you go! That fixed the issue. I was using IE7 and adding a valid strict doctype was the answer.

  9. Steed Says:

    I have a problem with implementing the smoothbox and that is trying to find a way to implement the code. I already downloaded the components needed but I can’t seem to know what are the links I need to put in the “head” section of the page.

  10. Reece Conrad Says:

    I noticed that the iframed content sometimes flickers when it loads in Firefox. I had seen this when I tested it, but I thought it was something I did wrong. However, now I see the same thing on your site. Doesn’t happen anywhere except on iframe content loaded in smoothbox. Also, it doesn’t always happen. It usually won’t happen the first time you run the script in Firefox, but on subsequent attempts, it does. Any suggestions?

  11. Reece Conrad Says:

    I just noticed that in smoothbox.css, there is a typo on the very last line.
    An accidental underscore on “_margin-bottom”.

    I don’t know if this is what was causing the problem in Firefox, but it could be related since the css element that typo is on is for the iframe content.

  12. Tdude Says:

    The underscore “typo” is probably for IE. Other browsers ignore it.
    Btw thanx for sharing!
    /T

  13. Moroswitie Says:

    Are you planning on including the “modal” option that thickbox has, (it means you need to close the windows with a close funtion) pressing outside the window will not work

  14. Cliff Says:

    This doesn’t seem to be working for me with MooTools 1.1. I’m getting the error “Fx.Style is not a constructor”.

    Any ideas?

  15. Cliff Says:

    Sorry for the false alarm. I re-downloaded MooTools and it’s working now. Thanks, this is perfect!

  16. Boris Says:

    Steed > You need to include mootools.js, smoothbox.js, and smoothbox.css

    Reece Conrad > Thanks for the report, I’ll look into that.

    Moroswitie > OK, maybe in the next version !

  17. Reece Conrad Says:

    I’ve got a small request…
    Is it possible for the overlay to appear first, and then the loading gif?

    I don’t know enough about js to make the changes myself, but I assume this is possible. Any suggestions?

  18. Alan Says:

    Juste un petit souci que j’ai rencontré :
    La fonction TB_showWindow() est appelée á chaque rechargement de page, donc si vous ouvrez une iframe dans la smoothbox avec un form, lorsque vous cliquez sur submit, le fading de transition (Fx.Transitions.sineInOut) est rappelé et l’effet est désagréable car c’est asynchrone… En clair vous faites un submit, ca affiche le resultat et tout d’un coup, le fading est executé…

    J’ai changé le code pour ne faire exécuter la transition que la première fois mais peut-être y-a-t-il une meilleure solution?

  19. Boris Says:

    Salut Alan,

    Eh bien, tu as bien fait de changer le code, en effet j’avais remarqué ce problème, et je compte le corriger quand j’aurais un moment !

  20. Alan Says:

    Pour ceux qui sont interessés, voici la solution (tres simpliste) que j’ai implementée:

    Dans smoothbox.js, rajouter une variable globale (au debut du fichier) :

    doneOnce = 0;

    Puis changer la fonction TB_showWindow() (l.259):

    function TB_showWindow(){
    // $(“TB_load”).remove();
    // $(“TB_window”).setStyles({display:”block”,opacity:’0′});

    if (doneOnce==0) {
    doneOnce = 1;
    var myFX = new Fx.Style(‘TB_window’, ‘opacity’,{duration: 750, transition: Fx.Transitions.sineInOut, onComplete:function(){if ($(‘TB_load’)) { $(‘TB_load’).remove();}} }).start(0,1);
    }

    }

    PS: merci pour le script, en tous cas, je peux te dire que je l’utilise pour le site web de mon entreprise dont je suis obligé de taire le nom mais qui est tres connue.

  21. Boris Says:

    Merci à toi pour le bout de code !

    Mais avec ta solution, on ne pouvait pas fermer et ré-ouvrir la fenêtre, l’overlay ne disparaissait pas.

    J’ai adapté ton code, c’est corrigé maintenant (fonction modifiée + ligne 291 ajoutée) :-)

    C’est cool de savoir que tu utilises mon script pour le site de ton entreprise, cela fait toujours plaisir quand son travail est utilisé.

  22. Boris Says:

    @ Reece Conrad > I think the flickering problem you were speaking about was the one that Alan has pointed out. It should be fixed now.

  23. Alfons Says:

    How to bring dynamic content into the Smoothbox ?
    PHP, POST!, Submit per form, AJAX ?

    Is this possible ?

  24. ditman Says:

    Is there any way of getting this script to open links in “parent” page when clicking something inside an iframed page?

    So links on iframed page would NOT load inside the smoothbox :)

    Thanks!!

  25. Reece Conrad Says:

    Thanks again for all of your work. I’m so glad you developed this script, espcecially after I found that Thickbox was causing a problem with slow page loads on one of my testing machines. I put smoothbox in instead, and it worked like a charm. Thanks again!

  26. Raffe Bergwall Says:

    Thanks a lot for a really great script!

    But; I’ve changed a bit in it – removed the resizing, all close buttons are now at the top and made two different window-positions depending on the content of the window (top 95px or vertical center).

    Look at it here: http://www.tramsmail.se/tramsfiler/

    Have nice day, Raffe Bergwall

  27. guix Says:

    Salut, la seule chose qui me manque dans ta box c’est la possibilité de créer des wizards… c’est-à-dire d’ouvrir une box, de mettre des liens à l’intérieur de celle-ci ou des formulaires, sur le click ou l’envoi le contenu de la box devient celui du lien cible ou de l’action du formulaire.

    D’autres box le font :
    -prototype :
    http://particletree.com/features/lightbox-gone-wild/
    http://wildbit.com/demos/modalbox/
    -mootools :
    http://forum.mootools.net/topic.php?id=682#post-3047

    Serait-il difficile d’ajouter cela à smoothbox ?

  28. Boris Says:

    guix > Tu peux faire cela via des iframes.

  29. guix Says:

    Avec des iframes, c’est un peu lourd, et je suis pas sûr du tout, vu que mon wizard sert surtout à insérer des choses dans une textarea : j’ouvre une box, la remplis en php avec plusieurs écrans s’echaînant avec des GET et des POST, puis à la fin j’écris dans ma textarea, tout ça sans poster la textarea bien sûr vu qu’il s’agit d’un éditeur de page un peu hybride texte/graphique.

  30. Matias Says:

    I had a strange problem with the positioning of the box when using inline content.

    This link

    didn’t work because the TB_HEIGHT was NaN in TB_Position function.

    I got it working by adding dummy query parameter to the url

  31. Mike B Says:

    I used the “Inline Content” version and I’m seeing unwanted grey borders around image that I placed in the smoothbox. The text content shows up fine. Any ideas how to fix this?

  32. Mike B Says:

    I’ve found the solution in the css file. There’s setting to put borders around img. Another question, I’m trying to add a link in the content that will close the box. This is in addition to the “close” link on top. How do I do this?

  33. diploD » Blog Archive » Il flah a volte stupisce.. come javascript! Says:

    [...] stupefacenti. In molti conoscono Mootools-Moo.fx, Prototype-Scriptaculous, jQuery e derivati: Smoothbox, Thickbox, Modalbox, MOOdalbox, Slimbox e chi più ne ha più ne metta.. L’ultima scoperta è [...]

  34. Eyal Says:

    Working great.
    Thanks.

  35. Boris Says:

    Mike B > For Inline / Ajax content : TB_remove()
    For iframed content : parent.TB_remove()

  36. Tunick Says:

    BUT, for this fantastic script, how can I use javascript to open it as Smoothbox does.

    Thanks.

  37. benn Says:

    I love the script and it helped me much in my task
    but
    filter:alpha(opacity=0); not valid css

    is not css valid
    how can we fix this?

  38. Boris Says:

    benn > You can set the opacity with javascript, it’s the only valid way that I know : $(‘TB_overlay’).setStyle(‘opacity’,0);

  39. benn Says:

    you are fast bratka!

    so this should work

    $(’TB_overlay’).setStyle(’opacity’,0);

    is that right?

  40. benn Says:

    not takong code smart

    scri
    $(’TB_overlay’).setStyle(’opacity’,0);

    /scri

    right?

  41. Alakhnor Says:

    Hello,
    Your plugin looks great. I’ll try it any time soon.
    Just one point: arrow keys doesn’t seem to work in the image gallery.

  42. Brian S. Says:

    Hi, great script.

    One suggestion – would you mind adding a ‘src’ attribute to the initial creation of the IFRAME in smoothbox.js. Basically the problem is that in IE 6 under https: you’ll receive a “this page contains secure and nonsecure content”. I’ve added a fix on our end but it’d be great to see this rolled into the script.

    Anyway, how I corrected this for our needs was to change the line that creates the IFrame to:
    new Element(‘iframe’).setProperty(‘id’, ‘TB_HideSelect’).setProperty(‘src’,'blank.html’).injectInside(document.body);

    That seemed to do the trick. I’m not sure if there is a more elegant solution but just a suggestion.

    Thanks for contributing a great script!

  43. Chad Says:

    I’m using the gallery images feature and I’m seeing a flicker whenever I click on the next and previous buttons. It looks like the image loads in the top left and then moves back to the center. This only happens in Firefox 2.0.0.4 and works fine in IE (strangely enough). Here’s my page: http://www.chadvernon.com/blog/stills/ Any help would be greatly appreciated. Thanks!

  44. Chad Says:

    I seemed to have fixed it by adding a TB_position(); call in the buildClickHandler function above the TB_show call around line 168. Thanks! Great script!

  45. Boris Says:

    Brian S > I think your fix is quite good. Not everyone needs it, so I dont plan to add it to the script though.

  46. Boris Says:

    Alakhnor > You can use the “< " and ">” keys on the keyboard for that (on a qwerty keyboard)

  47. prasad Says:

    Im trying to use submit button on your soomthbox, upon clicking submit, the navigation should go to the page which contains the smoothbox. but what hapenning is its opening the page in the smoothbox .

    Is there anything you can suggest me to fix this problem?

  48. prasad Says:

    Is there any way of getting this script to open links in “parent” page when clicking something inside an iframed page?

    So links on iframed page would NOT load inside the smoothbox

    Thanks!!

    same question as ditman! :)

    great script btw..

  49. Boris Says:

    prasad > You can use the attribute target=”_top” on your links, this should work :-)

  50. Snivels Says:

    Hi guys, i’ve added the mootools and all the included files here to my page. I’ve mad a div called ‘myOnPageContent’ with some text and added the link

    Show

    It is not working, nothing happens when i click show. I’ve added the mootools 1.11.js file, the smoothbox.js file, the smoothbox.css file but it doesn’t seem to work. Please help

  51. Merlinux Says:

    I think smoothbox not works with Mootools 1.11. I have same problems. Somebody is able to fix it?

  52. Rick Baskett Says:

    Im having a different problem. When I click on a smoothbox link, it shows the smoothbox with length 100% and no content, then it disappears, then it does the fade to black and then shows the proper sized smoothbox with content. Everything works great, except for that initial display of the smoothbox, we could definitely do without that :)

  53. Rick Baskett Says:

    Also how about hiding scrollbars and flash content (not sure if it does) since even using your example, it scrollbars in firefox display through the black background layer of the smoothbox.

  54. Olivier Says:

    Hi. I’m using the smoothbox to display a hidden div which contains two inputs for username and password and a submit button. When I click in the submit button I would like to get those values (to send an ajaxRequest) but it seems I can’t access them using the simple document.getElementById(‘username’). If someone could help me with this it would be great. Thanks

  55. Uglyman Says:

    thanks a lot, this script is amazing!!!!

  56. Michael Says:

    This worked great! I had first attempted to use JQuery + Thickbox3, but it conflicted with my use of MooTools. You saved the day with this rewrite of Thickbox!! Nicely done.

  57. grimen Says:

    Can’t switch beetween pictures in Opera 9. Bad…

  58. Michael Says:

    Bug report: the var “queryString” should only look at the string after #TB_inline. If the existing page has anything in the querystring, an inline content Smoothbox open will fail (and place the resulting content at the very bottom of the page, under all existing content).

    I’ve verified this bug on this page by adding “?test=x” to this URL. Upon reload, your inline content examples fail to work correctly.

    My solution is to update the “var queryString” line to the following:
    var queryString = url.split(‘#TB_inline’)[1].match(/\?(.+)/)[1];

  59. Ptomos Says:

    cogratulations, great job.
    this script is great and simple but I have observations to make about them:

    - when you are in the gallary for instance and you press tab you still can change the value of the fields (input’s) and/or submit or postback (submit buttons, dropdowns etc).

    - why do you close the window between loadings ???

  60. pomp Says:

    Can we pass some values from the modal page to basepage and vice versa ? a code snippet for the same would be of great help.

    thanx
    pomp

  61. ArulJane Says:

    Its good! and useful too!
    Thanks a lot!

  62. Boris Says:

    pomp > Yes you can :

    http://developer.mozilla.org/en/docs/DOM:window.parent
    http://developer.mozilla.org/en/docs/DOM:window.frameElement

    Ptomos > 1/ Yes it’s a browser behaviour, It can be overridden, but it would be kind of an ugly hack though.

    2/ I think it’s nicer ;-)

  63. pomp Says:

    It works just fine.
    Appreciate ur help

    pomp

  64. Dragan Says:

    Here with we would like to thank you for your script and informe you that we combined smoothbox and moviebox and created Joomla Plugin
    you can find it here

    http://www.demo.youjoomla.com/moviebox/index.php

    Best regards Youjoomla.com Team

  65. pomp Says:

    I am getting a javascript error saying “Object does nto support this property” when closing the popoup on iframe mode at line marked with *.

    function TB_showWindow(){
    $(”TB_load”).remove();
    * $(”TB_window”).setStyles({display:”block”,opacity:’0′}); *

    this error only occurs only on IE and no on firefox.

    Also the shadowed image size is limited only to teh visible area, as a result half the is covered and rest half remains clickable.

  66. pomp Says:

    I m getting a javascript error “Object does not support this property or method” at the line marked with * on IE, this error does not come on firefox
    function TB_showWindow(){
    $(”TB_load”).remove();
    * $(”TB_window”).setStyles({display:”block”,opacity:’0′}); *

    Also in my case only visible area of the page is darkened with the image and the rest of the page remains clickable.
    How can i change the sixe of tehis image.

    pomp

  67. Nishant Says:

    Dear Developer,

    Bug report : Your script is gre8, fantabulous work done here, i found one bug :( when i use the lightbox for loading .html file, and if i have used “DIV” tag inside the .html file, it works perfactly in FireFox but in IE DIV tag is display after the content finished. Though i specify “DIV” tag’s position to absolute and i gave left and top values as well. What is the problem. In your example script’s .html page, if we add “DIV” tag and if we place it over content, same problem occures in your example as well. What is the probelm here ?

    Thanks,
    Nishant

  68. Jacob Says:

    Same as Michael – except that for me, everything is pushing off the bottom, not just the inline. There is a querystring in the url so I’m hoping that that’s all it is. I’ll delve a little deeper later, unless someone else comes up with something (I couldn’t get Michael’s fix to work for me).

  69. Aden Says:

    Bonjour, j’ai trouvé votre site via une recherche sur google, je trouve que vous avez fait un bon travail et je vous en courage a continuer, vous êtes sur le bon chemin.

    Bon passant à l’action :) j’ai utiliser le script de la galerie et celui de inline content ca marche à merveille, par contre celui de Ajax content ça na pas marché, la page se bloque au chargement et rien n’apparait !

    Pourriez vous m’éclairer un peu plus.

    merci d’avance

  70. Nemesis Says:

    THANK YOUUUUUUUUUUUUUUU!!!!!!!!!!!!!!!!!!!!!!
    WITH THIS SMOOTHBX I CAN USE MOOTOOLS+MGMEDIATHICKBOX + SMOOTHBOX!!!!!

    WILL YOU MARRY ME?
    LOL

  71. Jacob Says:

    I know believe the problem to be with tables in general. I’ve got two test pages with nothing more than tables on them and the popup box always pushes out to the bottom of the table.

  72. Jacob Says:

    I mean “now.”

  73. Jacob Says:

    Nevermind… it’s not tables. I was having a problem with TB_HEIGHT being NaN. I’m not providing a height in the link – maybe that’s the problem. I added:
    if(isNaN(TB_HEIGHT)) TB_HEIGHT = 0;
    into both TB_position() and TB_positionEffect()…

    Hope that helps someone.

    jj

  74. Jacob Says:

    Ack! Nevermind again. Don’t use my ‘fix.’ Now when I scroll I can never reach the bottom of my popup because it’s off the screen. I guess I’ll have to provide a height.

  75. Adam Messinger Says:

    Is the compatibility profile for Smoothbox identical to that of Thickbox, or does it work in different browsers than its predecessor?

  76. Frédéric Says:

    Great work, thanks a lot ;)

  77. pascal Says:

    Bonjour,
    Tout d’abord : merci ! :-) vraiment bien cette … xièmeBox
    Ma question concerne l’utilisation “Inline” et les CSS.

    Ex :
    - J’ai une div :
    Blablabla…

    - Et donc en CSS :
    #myDiv {width:100px;height:auto;}
    #myDiv p {background:#ccc;}

    A l’appel de la box, aucun de mes styles n’est pris en compte… En revanche si je met les styles directement dans les code et les balises, c’est ok, genre :

    Blablabla…

    Il semble que, à la moulinette du code javascript, tous les styles disparaissent et son remplacés par des #TB_ …

    Y’a t’il un moyen de contourner ceci ?

    Merci

  78. pascal Says:

    Bon, n’étant pas patient /-) j’ai fouiné dans le code et j’ai ajouté ceci :

    // prevent javascript error before the content has loaded
    TB_WIDTH = 0;
    TB_HEIGHT = 0;
    MyClass = ”; /* “+caption+”close“;
    }

    - Ensuite l’appel par la balise devient :
    Show

    Et, ça marche… enfin pour le moment… :-)

  79. Lightbox clones round-up at ajaxflakes.com Says:

    [...] SmoothBox http://gueschla.com/labs/smoothbox/ [...]

  80. Ruben Says:

    Hi,

    thanks a lot for your script, but I can’t make it work with mootools 1.11. If I downgrade to 1.1, it works.

    Thanks again

  81. Colección de clones de Lightbox para todos | aNieto2K Says:

    [...] Enlace / Peso: 15kb / Framework: jQuery / Descargar / Otras versiones: Slightly ThickerBox , Smoothbox, [...]

  82. Adam Messinger Says:

    Smoothbox is causing huge memory spikes in IE whenever the effect runs. Is anyone else having this experience?

  83. mauro Says:

    I’ve a problem when I use smoothbox into a div loaded by an ajax call (created by mootools lib)….
    You can say me why????

  84. ponsfrilus Says:

    Hi all,
    If there a way to have a 3000ms timeout on a box? (Auto fade out?)

  85. Boris Says:

    ponsfrilus > Yes, you have to deal with setTimeout or .delay and TB_remove

  86. Matt Kime Says:

    does anyone have a fix for working with inline ajax forms?

    when the requested div is inserted into the thickbox popup div, events added in the mootools manner (.addEvent) no longer work.

  87. Metal3d Says:

    Hi,
    We use smoothbox into Copix, but we need to add 2 lines on you code.
    Only to know when the box is opened and close, we have added fireEvent on TB_showWindow and TB_remove.

    This to have possibility to get elements inside the box with mootools and add some effects.

    Example:

    window.addEvent(‘TBwindowshow’,function(){
    $$(‘#TB_ajaxContent a img’).each(function(img){
    img.setStyle(‘opacity’,0.5);
    var fx = new Fx.Styles(img,{duration: 500, wait: false});
    img.addEvent(‘mouseover’,function(){
    fx.start({
    ‘opacity’: 1.0
    });
    });
    img.addEvent(‘mouseout’,function(){
    fx.start({
    ‘opacity’: 0.5
    });
    });
    });
    });

  88. Don Says:

    @Boris Popoff,
    Great script.
    Thanks alot of sharing it.
    At the start I had some problem on my template using ajax loading effect, but I fix it.

  89. ktml Says:

    I am experiencing memory leak in IE6. Every time close a box, it doesn’t release the memory! The memory usage just keep raising and raising… anyone have any idea how to fix it?

  90. ktml Says:

    Nevermind, I found the solution!

    http://forum.mootools.net/viewtopic.php?pid=28328#p28328

  91. Eliurkis Says:

    I’m having problems using smoothbox in IE with the elements of a form.

    In this case is a ‘select option’ which displayed above the window smoothbox generated, here can see the problem. (http://dev.deepinphp.com/downloads/example.jpg)

    What could be the problem?

  92. ktml Says:

    Unfortunately, in IE, form elements are always on top of any other layer (yes stupid i know).

    I haven’t tried, but this might shed you some light:
    http://shepherdweb.com/2007/02/14/z-index-ignored-for-select-element-in-ie-6-workaround/

  93. Metal3d Says:

    I also made a change to have my page XHTML Valid:
    In TB_parseQuery ( query ) function i did

    var pairs = query.split(/[;&(&)]/);

    Regards,

  94. Metal3d Says:

    in my last post: & = query.split(/[;&(&\amp;)]/);

  95. meta Says:

    If i want to focus on new window, without click new window.
    If i made scrolling new window, i must click new window first and scroll with keyboard. Can i made my new window that no click first, thx

  96. Erik Hansen Says:

    Boris,

    Thank you very much for this script. I have been needing a “Thickbox” type script for a website based on Mootools. This will save me a lot of time.

    Do you have any plans to fix the Flash and Scrollbar issues? If not, I may create a fix for it and send it to you and post here.

    Thanks again!
    Erik

  97. Erik Hansen Says:

    Ok, so I added functionality to this script to hide flash elements when the Smoothbox is activated and reveal it when the Smoothbox is hidden. (Thanks to the Mootools based Slimbox for this code) Here is a link to the file: http://www.xponix.com/files/js/smoothbox.js

    I added a call to a new “TB_objectHide()” function at line 42 (within the TB_show() function:

    //Hide all flash and “select” objects
    TB_objectHide(true);

    I added a call to a new “TB_objectHide()” function at line 277 (within the TB_remove() function):

    //Hide all flash and “select” objects
    TB_objectHide(true);

    I added this function at line 39:

    function TB_objectHide(open){
    var elements = $A(document.getElementsByTagName(‘object’));
    elements.extend(document.getElementsByTagName(window.ie ? ‘select’ : ‘embed’));
    elements.each(function(el){
    if (open) el.lbBackupStyle = el.style.visibility;
    el.style.visibility = open ? ‘hidden’ : el.lbBackupStyle;
    });
    }

  98. Riaan Says:

    Thanks a bunch for this awesome script! well done!

  99. ... Says:

    opacity does not work with ie6. Any solutions?

  100. ... Says:

    memory leaks when i click an image using ie7 in this page. Do you know any solution?

  101. amrish Says:

    Is this still not working in mootools 1.1?

  102. Boris Says:

    amrish > It’s working, example => http://assistancefree.fr

    … > It’s working for me on several computers.

    Erik Hansen > Thx for sharing your mod !

  103. Boris Says:

    ktml > Your link to the mootools forum about the “garbage destructor” is useful, thanks !

  104. amrish Says:

    I just get a loading screen, my content disappears instantly after displaying full width at the bottom of the page.

  105. amrish Says:

    Once I get this to work I’m going to work in a few features I worked into Thickbox.

    * percent based sizing
    * variables for fade

  106. amrish Says:

    The loading image stays on the page after I click away from it too, I can’t seem to figure it out.

  107. amrish Says:

    Is there a place where we can discuss this program that is easier?
    I’d like to get it up and running, been working on it, but that issue keeps happening.

  108. Webdawson Says:

    Hi there, first of all -> awesome script – one question.
    I have images in this format (i can’t change the names, they are from an crm export) 1180-lang2#aplan_fromanywhere_8.jpg

    The Problem is the # in the link name – if i change it in the links to %23 the script works perfect in IE7 and Firefox and even local in IE6 but on the server it doesn’t work in IE6 – because of the # in the name.
    I’ve tried every Lightbox Script out there but it’s always the same result. Is there a way to solve this?
    Thank you so much!

  109. prasad Says:

    Hey boris,

    Im having problem getting focus on a field in a smoothbox, im using onload(), but sometime it works and somethin its doesnt, is there any way to do this? Do you have any suggestions?

    Thanks a bunch!

  110. 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 :
    Mode

  111. CÉLINE Says:

    Hi, somme body can help me? I’ld create shortcuts to call the SmoothBox function. I’ve tryed this but nothing appears when I use the keyboard. I’m a compugraphics and not JavaScript expert, someone can tell me what can I do?

    I’ve try this
    $$(”a.smoothbox”).each(function(el){el.onclick=TB_bind});
    $$(”a.smoothbox”).each(function(el){el.onkeypress=TB_bind});

    and too, a onkeypress event inside the link, but it’s wrong too :-(
    Thanks a lot
    C.

  112. Leo Says:

    Hello,

    First of all, thank a lot for your nice script. It avoid the use of the old looking standard popup !

    I’ve got a bug under Safari for Mac (not for PC), after having implemented several smoothbox links in the same page. The first link fires OK but the followings don’t seem to understand the class “smoothbox” and display the popup.htm in a new window as if Javascript was disabled. This bug only appears under Safari. Ths page works great under IE 6-7, Firefox and Opera. This is so frustrating ! Do you have a light of solution ?

    THanks !

  113. Jazz Says:

    nice work been looking for a good lightbox on mootools, Ive been using slimbox but that doesn’t allow anything apart from images and lytebox which was almost perfect but isn’t mootools…anyways i was just wondering if there was a way to make smoothbox look more like the traditional lightbox. Cheers

  114. Gerald Says:

    Hi all, and thanks a million for all the hard work on such a great script! Has anyone tried to make this script act like a javascript popup helptip style, knda like the Snap Shots or WebSnapper stuff. What i want is for the link to activate the smoothbox effect “onMouseover” specifically the No-Scrolling url style. for example

    No-scroll content

    when you mouseover a link like that it activates the smoothbox effect without having to actually click it??? Thanks to anyone that may be able to advise me on how to modify the code to acheive this :)

  115. Pierre Says:

    Hi there,

    @Leo > I also have an issue with Safari (Mac), first smoothbox fires OK but others will keep loading with the content of the first one…
    Works like a charm in FF and IE.

    Any idea?

    Cheers!

  116. Nathan Says:

    Hello,

    I’m having the same problem as amrish in firefox where the loading graphic won’t disappear and the problem that Leo is having in safari on OSX where multiple html items will only show the first html item when clicked. Anyone make any progress on any of thees bugs?

  117. Emir Says:

    Hi this is great what you’ve made. I have one question though is it possible to use this script when page loads so without clicking one div loads with some content I write? thank you for any answers

  118. Nate Says:

    @Pierre: It’s a safari rendering or caching bug. Oddly enough, it only seemed to a happen to me when I pressed refresh on the page, if you reload the whole page by clicking on a link it seems to go away. To fix the problem I added this line right after line 227:

    $(“TB_iframeContent”).src = urlNoQuery;

    This forces the iFrame to actually have the right content in it. This DOES mean you are telling the browser to load the iFrame content twice, so you might want to point the initial iFrame load to a small junk file to save on bandwidth.

    @Nathan: Try this for fixing the loading graphic: After line 296, which is the one that removes TB_HideSelect, add this line:
    if ($(‘TB_load’)) { $(‘TB_load’).remove();}

    If the loading graphic didn’t go away when it was supposed to, this will make it go away when you fade the box out. I added this change to my version because I know there are some folks out there that double-click links, and if you double-click these smoothbox links it’s possible to put them in a funny state.

  119. Andres Says:

    Buenos dias,

    Gracias por el script. tengo problemas enviando el focus al primer campo del formulario. alguna solucion o sugerencia te agradeceria.

    he intentado con onload (). la pagina sola se ejecuta bien pero cuando agrego el efecto mootools no lo ejecuta.

    Gracias

  120. Ram Krishna Says:

    Hi ,
    when i open popup with smooth box my popup control gets locks or readonly.
    some time parent page also

  121. Mr Bill Says:

    does anyone have some examples of posting from a form inside of a modal to another modal?? And how do you pass the form variables?

  122. Kash Says:

    after:
    if(url.indexOf(‘TB_iframe’) != -1){
    urlNoQuery = url.split(‘TB_’);
    $(“TB_window”).innerHTML += “”+caption+”close “;
    } else {
    $(“TB_window”).innerHTML += “”+caption+”close“;
    }

    add:
    if(window.webkit)
    $(“TB_iframeContent”).src = urlNoQuery;

    to fix safari reload-iframe cache bug

  123. gabriel Says:

    Boris,
    I want to start a Smoothbox from a js event like onclick of some function so do you know i do this ? there are some forum ?

    regards

    gabriel

  124. ray Says:

    Hi Boris,

    I am using Smoothbox to call an AJAX form from inline content.

    When I open the inline form with Smoothbox, everything looks fine.

    However, when I submit the form, instead of showing the contents in the Smoothbox, it refreshes the entire window for the submitted results.

    Is there anyway you can help me?

  125. Robson Says:

    Great Work!
    God Job!
    Excelent Script!
    :D

  126. Webmaster 38 » Blog Archive » Smoothbox, Thickbox for mootools at ajax scripts compound Says:

    [...] Smoothbox, Thickbox for mootools [...]

  127. Jeff Says:

    I love your script, but I have a small issue I’ve been unable to figure out, as I’m not a javascript person. How can I center the loading image? I’m using a loading bar that is 220 pixels wide. Anyone have a fix? Thanks.

  128. Pietr Says:

    Is there a reason why live validation from http://www.livevalidation.com doesn’t work if using the lightbox?

  129. Rob G. Says:

    Silly question. When creating a gallery. Is there a way to remove the blue bars around the smaller link images?

    http://www.specsounds.com/drop.html

    Thanks!

  130. Multibox de la Phatfusion - cea mai recenta generatie de lightbox : din cotidian Says:

    [...] MooTools, dar noutatea adusă în plus faţă de predecesorii săi ( MOOdalBox, Slimbox, Smoothbox etc.) este efectul de zoom ce pleacă din link şi că poate afişa streamuri flv, mov, rm, wma şi [...]

  131. Andrew Winter Says:

    Looks like in IE smoothbox gets kick started to early from time-to-time and TB_bind doesn’t get applied to all anchor tags with class smoothbox.

    To fix this I replaced

    window.addEvent(‘load’, TB_init);

    with

    if(window.ie){
    window.addEvent(‘load’, TB_init);
    }else{
    window.addEvent(‘domready’, TB_init);
    }

  132. Andrew Winter Says:

    Sorry I meant I replaced

    window.addEvent(‘domready’, TB_init);

    with

    if(window.ie){
    window.addEvent(‘load’, TB_init);
    }else{
    window.addEvent(‘domready’, TB_init);
    }

  133. hakan Says:

    Thanks !..

  134. ibaguereño Says:

    EXCELENTE MI AMIGOOOO!!

    I was looking for this exactly component for Mootols >DDD great and thanks a lot!!! I-m integrating it in the Zen Cart with the Zen Magick, check later http://dev.imaginacolombia.com

  135. Raffe Bergwall Says:

    I really love thos box, but I have a problem with the “release” of a movie played in the box. In IE it dosn’t stop from playning when close on popup. How do I correct that?

    http://www.tramsmail.se/fil.php?id=9882

  136. Lennart Steinke Says:

    Hi,
    I made some small changes to smoothbox, allowing the enduser to set some options w/o having to edit the .js himself.
    Basically, I made some numeral constants variables (like min and max alpha for the overlay and content) and allowed to disable the feature that automatically closes the content if the bg-overlay is clicked.
    Since there was no contact email, I’ll simply post a link to the modified .js ;)

    http://www.steinke.net/smoothbox.js

    The changes are rather small, but it would be cool if you could add them to smoothbox.

    To use, simply do something like:
    TB_setCloseOnOverlayClick(false); // don’t close if clicked outside of the content
    TB_overlayMaxAlpha=0.001; // don’t show the overlay layer

  137. Hennie Says:

    Hi Guys,

    Can someone help me please i can get Ajax Content to work in IE but i am unable to get it to work in Firefox, can anyone please give me a hand

  138. Igor Says:

    Perfect !!

    This saved my dayy

  139. Exmortem Says:

    Smoothbox (and Thickbox) are the best clones of Lightbox!
    Thanks for sharing Mr. Popoff :)

  140. syzygy Says:

    this is a great script, but i have one problem. if the browser window is vertically smaller than the smoothbox window, one can keep scrolling down indefinitely. is there a way to fix this? thanks!

  141. Chris Says:

    Hi there,

    i use form elements in a hidden div. The form recognize that there are elements (select boxes, text input and so on …) but doesn’t save the entered values if you cklick on close of the smoothbox. Is there a way to save the entered values in smoothbox?

  142. Eduardo Says:

    THE BEST SCRIPT forever and ever. Great!

    Thanks so much!

    El script es excelente la verdad te pasaste! :D

  143. Slideshow gallery per il vostro sito o blog « Grafica Says:

    [...] http://gueschla.com/labs/smoothbox/ [...]

  144. anver Says:

    There is a problem for me while using this script. The page has a flash movie embedded on it. I think that the problem. When i scroll the content everything messes up. I’m trying to display an iframed content.

  145. tahir Says:

    How can i put flash in smoothbox ?
    will i have to link with html page or direct with swf file?
    can anyone provide me the code?
    any help would be really appreciated it.

    thanks

  146. Aaron Says:

    Great idea porting this over to use the mootools library. There are some issues with flash embedded content and cross browser issues with IE6 (Surprise!) though. Honestly, not trying to knock your work, but I think the CSS component of this should mimic the original thickbox CSS as closely as possible. Having WC3 approved 100% valid CSS is great, but just not practical. Them’s the breaks.

  147. Boris Says:

    Aaron > I used flash content in the smoothbox several times, and no problems, on high traffic production sites with all browsers. I guess you have to check your code ;-)

  148. Boris Says:

    tahir > Just add the embed element with any method (ajax, inline, iframe …), or use swfobject

  149. Boris Says:

    syzygy > No fix for the moment :-(

    ray > Yes thats normal, if you want the form to be submitted in the smoothbox, the simpliest way is to use the iframe. But with some lines of JS, you can do this with AJAX too.

  150. Web 2.o Round up Modal Window Lightbox Effect Library Says:

    [...] Smoothbox : Smoothbox is the thickbox for mootools javascript framework. link [...]

  151. Pietr Says:

    There is a problem when you dynamically load content via AJAX into a div or span. If you have a link with the smoothbox class inside, it is not possible anymore to use the smoothbox, as it seems that the new element is not being regcognized as a smoothbox element. The link is just opened in the current window, and not in a smoothbox. How can this be circumvented? (A sort of “reindexing” of the smoothbox elements would be required I think.)

  152. Boris Says:

    Just run TB_init() after you AJAX call.

  153. Rick Baskett Says:

    Hi Boris, I added Eric Hanson’s mod

    http://gueschla.com/labs/smoothbox/#comment-2114

    for select elements and flash movies, although it doesnt seem to work for selects with me, but it does with flash which is a problem. I also added semicolons where they were needed in your script so that scripts like packer etc can pack the smoothbox code, which actually results in the 11.3k script being compressed to 5.2k. If you would like it, please email me and Ill get it to you, and by all means feel free to incorporate it into a future release. We all like compress-able scripts :)

  154. Habit Says:

    Hello
    How can I open a link like this: /Downhilll/index.php?option=com_phocagallery&view=phocagalleryd
    &catid=1:test01&id=1:&tmpl=component
    ?
    Also how must i write the height and weight parameters in this string?
    I wanna have a IFrame or scrolling content….
    Thanks

  155. Vincent Says:

    Thanks for this great script. I am not here just to say this, I also have a question:

    I am using the AJAX-implementation of Smoothbox. Inside the page that is loaded in the Smoothbox there is some javascript. This script isn’t executed though. Is there a way to run the javascript in a Smoothbox once it is opened?

  156. Martin Says:

    Im loading a photo galery with smootbox into a div with mootools…the problem is that when i click to open smoothbox the picture is open into the window like a normal href

  157. ioustinos Says:

    Hi there,
    This is exactly what i need as i am quite familiar with thickbox but i had to have mootools for this widget tha i am using (http://widgets.rabidlabs.net/ratings/v1.4/).
    Problem is that this version of the widget uses mootools 1.2

    Smoothbox gives me an error with mootools 1.2, i downloaded the full version to be sure and it doesn’t work. What can i do?
    thanks

  158. ioustinos Says:

    This is the error i am getting
    (new Element(“iframe”)).setProperty(“id”, “TB_HideSelect”).injectInside is not a function
    TB_show(“”, “http://www.cosmicsoda.com/modules/default/rating.php?height=220&width=400&id=ratable894″, false)smoothbox.js (line 47)
    TB_bind(Object $extended=true page=Object client=Object)smoothbox.js (line 34)
    [Break on this error] new Element(‘iframe’).setProperty(‘id’, ‘TB_HideSelect’).injectInside(document…

  159. Boris Says:

    Hey, I’ll look into this when I’ll have some time, stay tuned !

  160. et la lumière fut… at Les envolées d’un poireau Says:

    [...] image (les pinailleurs diront que c’est un lien… hem) : http://gueschla.com/labs/smoothbox/ (cliquez sur l’image sous “single image [...]

  161. Emilie Says:

    Je découvre smoothbox,
    merci Boris, ça m’a l’air génial !
    Mais la version 1.1 de mootools n’est plus d’actualité, j’ai tenté la 1.11 sans résultat.
    J’attends avec impatience la nouvelle version de ta smoothbox !

  162. Maxime Brusse Says:

    Salut,

    J’ai déjà implémenté ta smoothbox, elle est assez sympa !
    Par contre, sur IE6, lorsqu’elle passe au dessus d’une balise , on voit la dropdown à travers !

    Des petits screenshots :
    Avant : http://tinyurl.com/5htox5
    Après : http://tinyurl.com/6foaeb

    As-tu une solution à cela ?
    Merci d’avance !

  163. ioustinos Says:

    Any luck with mootools 1.2 ?

  164. sigo Says:

    Hi, thanks the plug in is great.
    a little question.

    is it possible to use videos from myvideo.de ?

  165. GDC Says:

    Wonderful rewrite. Thanks…

    IS THERE ANY WAY to pass a url variable to the page opened via iframe? No luck so far. (Thanks!)

  166. Lasse Says:

    I get this error: window.addEvent is not a function from firebug.

    I’ve set up this test site, if any could please give me a hint as to what is wrong, I don’t get it?

    http://lassemoos.com/moos_gallery/bjkj_test/GALLERY/admin/test.html

  167. Jean CARTIER Says:

    Script super sympa, merci !

    Même souci que Maxime Brusse.

    En plus, lorsque j’ai un objet Flash, que l’on soit avec IE ou FF, il passe en premier plan, par dessus la photographie à afficher.

    Sous IE, les menus déroulants sont en premier plan (devant la photographie).
    Sous FF, pas de problèmes avec les menus déroulants.

    Any ideas ?

    Cordialement

    Jean CARTIER

  168. Matt Says:

    Hi,

    Firstly, thanks for the great script, used it on a couple of sites now and on the most part it is working fantastic.

    However, on pages where I have flash in the content, I used Eric’s fix which works fine, except that the flash doesn’t reappear upon closing the lightbox?

    Any ideas?

  169. Matt Says:

    No problems, figured it out:

    This line of the fix:

    I added a call to a new “TB_objectHide()” function at line 277 (within the TB_remove() function):

    //Hide all flash and “select” objects
    TB_objectHide(true);

    needed to be set to false instead. I.e:
    TB_objectHide(false);

  170. Stefano Says:

    Hello Boris!

    thanks for this cool code.
    I published on my blog of course a link to this, but also instructions on how to upgrade your code to be used with Mootools 1.2beta (without the compatibility package):

    http://digitalemagine.com/wordpress/archives/24

    ioustinos, emilie, this might interest you?

    cheers
    Stefano

  171. Stefano’s Blog(s) » Ajax Modal Popup Dialog with Mootools 1.2beta (ThickBox, Moodalbox, Smoothbox) Says:

    [...] you use Mootools, as I do, you can choose between Moodalbox and SmoothBox. They seem quite equivalent. I wish CNET ClientSide would integrate Moodalbox instead of the [...]

  172. Boris Says:

    Thanks Stefano, great work :-)

  173. Priyesh Says:

    Hi there, I have installed this with oscommerce, however the screen goes deem but the login box is not centered, its somewhere on the side, same thing happens in IE7 and firefox, could anyone kindly guide me on how to correct this with maybe a bit of details on exactly what to do…

    Secondly, when the page goes deem, my livehelp image (PHPONLINE) does not go deem, This is flash run, how can i make it go deem too.
    You guys are great…!!

  174. Help Developer - CSS, Dreamweaver, Gimp, HTML, JavaScript, PHP, VB.NET, Visual Studio, Wordpress Tutorials » Blog Archive » Top 10 Ajax Lightboxes Says:

    [...] Smoothbox | More Details [...]

  175. Блог Волотко Дмитрия - Это нормально © :: Entries :: Top 10 Ajax Lightboxes Says:

    [...] Smoothbox | Страничка [...]

  176. Adam Says:

    The box works great. My question is, why does the flash banner appear over it? I’d like the smoothbox to be the over everything. make sense?

  177. Boris Says:

    Adam > http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15523

  178. Adam Says:

    and you’re awesome. I haven’t tried it out yet but i’m sure it’ll work. thanks!

  179. Mike Says:

    Is there anyway to print the box? I added a print button but it comes out as a blank sheet when printed?

    Thanks

  180. Jean CARTIER Says:

    On line 292, I comment : $(‘TB_HideSelect’).remove();

    This solves the select box problems

  181. Lance Says:

    Is there a way to html instead of links? Thickbox allows one to do that, but doesn’t seem like smooth box allows that. In my situation, I need to show some dynamically generated content passed by javascript, so using a is essential.

    Thanks

  182. cátia Says:

    Hi,

    I’m having a problem with the ajax content. It’s not working. I’ve got the following error: “ajax is not defined”. Am I missing something?
    Thanks for the script.

    Cátia

  183. Rowela A. Says:

    How about loading a video instead? but anyway this tutorial is very useful..! thanks a lot!

  184. egfil Says:

    Hello,
    My english is not very good. I placed a login form, but I would like the calling page to reload after login succes. When I click on close, the session is not opened…
    Thank you for your help.

  185. shreg Says:

    In my site stats, I am seeing a lot of 404 errors on “/js/+urlNoQuery[0]+” page, since I have put smoothbox in place…
    Is it due to a uncompatibility with specific browsers?
    Because I tested my site under IE7 and FF2, and it works great.

  186. Adam Says:

    @ Boris,

    I seem to still be having the problem. Check it out. http://www.exclusivelybimmer.com – Click the contact us. The box is still popping up under the flash movie, though I’ve made it transparent. Any other ideas?

    Thanks,
    Adam

  187. Oliver Says:

    It looks like the script is broken by Opera 9.5 while it used to work fine with Opera 9.2x, nothing appears anymore.

  188. Christian Schenk Says:

    Hi everybody,
    I’ve added Smoothbox to the WordPress ThickBox plugin. I hope that this helps adding this great piece to your blogs.
    Cheers,
    Christian

  189. Matthew C Smith Says:

    This is exactly what I need, but it’s not working with the new MooTools 1.2. Any plans to update it?

    Thanks! Great work!

  190. Adam Says:

    sorry guys, the link is http://www.exclusivelybimmers.com

  191. Kurt Says:

    Great product. One question – Is it possible to change the caption of an iframe when linking from one iframe to another?

    The title bar is not rewritten when I pass a new page to the iframe, from an anchor tag with the title attribute in place, from an already open iframe.

    Any help appreciated.

    Thanks,

    Kurt

  192. NextDrink.de Erkan erline.eu Says:

    For everybody who needs to load the Smoothbox link via Mootools AJAX.
    You just have to execute TB_init(); again like:
    [...]
    onComplete: function() { TB_init(); }
    [...]

    Then it works fine.
    BTW: GREAT WORK!

    Greets from Hamburg

  193. Martin Winkel Says:

    Hi,

    I found it not working with MooTools 1.2, so I did some editing resulting in:

    (don’t know if I edited anything else in the past, should work with other elements to (using copy instead of moving)). I couldn’t find your mailaddress on your site, so I post the code here. I hope it’s useful for someone.

    [...]

  194. Boris Says:

    Hi Martin.

    Thx for you contribution.

    I made an updated version of smoothbox for mootoos 1.2 several days ago, I just took the time to make it public.

    @ Oliver : The new version works with Opera 9.5

  195. Nono Martínez » Clones de Lightbox Says:

    [...] prettyPhoto, Prototype Window, RoeBox, Shadow Box, Slightbox, Slightly ThickerBox, Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox [...]

  196. Hüseyin kişisel günce - En iyi 10 Ajax Sunumu Says:

    [...] Smoothbox | detaylar [...]

  197. Web Grafi 2.0 » Blog Archive » Colección de clones de Lightbox para todos Says:

    [...] Enlace / Peso: 15kb / Framework: jQuery / Descargar / Otras versiones: Slightly ThickerBox , Smoothbox, [...]

  198. Peggy Says:

    Bonjour,

    j’utilise smoothbox pour aficher un pdf. Le pdf s’affiche bien mais pas la barre de titre avec le close. il semblerait qu’elle soit bien là mais cachée car quand je passe la souris à l’endroit ou doit se trouver le close, le pointeur se change en main. Comment faire pour l’afficher ?

    Merci

  199. Philipp Says:

    Hello Boris,

    great work, thanks so much! I wonder if you still read the comments here.. I would have liked to e-mail you directly, but I couldn’t find your mail address.

    Anyway, I would like to kindly ask if it would be possible to implement the possibility to use percent based sizing like it has already been done for the Thickbox (see here: http://codylindley.com/thickboxforum/comments.php?DiscussionID=381&page=1#Item_0)? That would be so great and would make Smoothbox the perfect bet in combination with the Modx_CMS…

    Any answer would be greatly appreciated! Thanks in advance, Philipp

  200. Javascript图片展示类库比较 » 网页设计室 Says:

    [...] Smoothbox [...]

  201. Roger Says:

    Very usefull thank you im very glad !!

  202. Mat Pat Says:

    Bonjour,

    J’ai lu tous les posts ici et ailleurs, mais je ne parviens pas à mon but :
    j’ouvre une box dans une iframe avec un lien dans celle-ci. Je voudrais que ce lien ouvre une autre box (iframe également), mais à la place de la précédente, pas dedans ni en dessous etc…
    J’ai presque réussi avec TB_show mais le problème reste la suppression de la première box.

    Si quelqu’un est passé par là… je vous remercie d’avance

  203. morganfardo Says:

    Hi!

    the plugin in working fine in safari but is open in new window in firefox and IE7. Does anybody can help me with this problem?

    thanks,

    Morgan

  204. Fabien Says:

    Hello

    Thanks for the script.
    I need to display a popup right when the page is loading.
    For that I use the following script :

    TB_show(“caption”,”reference.html”);

    It pop ups correctly but the opacity layer is then fixed when I scroll down the window…
    Could anyone help me ?

    Thx

    Fabien

  205. Frank Says:

    Boris,
    First of all I’d like to say thank you for creating Smoothbox, the compliant CSS is really a big bonus!

    I do have one quick question though. I wish to cut down the MooTools library to as small as possible (using the core builder).

    So far I have worked out I can cut: “Utilities – JSON”, “Utilities – Cookie,” “Utilities – Swiff” and “Request – Request.JSON” without any problems. I can also cut the rest of the “Request” components if I don’t mind loosing AJAX.

    Is there anything else that can safely be cut from the MoolTools library? Thank you in advance for your help ^_^

  206. BenBen Says:

    Bonjour à tous !

    Je ne suis pas expert en JS, mais j’utilise l’excellent SMOOTHBOX de Boris. Seulement voilà. Je voudrais récupérer une variable (jusqu’à présent je faisais dans la tradition en la passant par $_GET ou $_POST) dans l’iframe de la smoothbox…

    En clair, je cherche à afficher un contenu dans l’iframe qui est issu d’une SGBD MySQL et extrait de cette SGBD en fonction de la variable (l’id en l’occurrence).

    Quelqu’un aurait-il une idée ??

    Merci d’avance

  207. 10 Adet Ajax LightBox Scriptleri » Anthony Burak DURSUN Says:

    [...] (Web Sitesi) (Download) 7-) SmoothBox                           (Web Sitesi) (Download) LightBox ++                         (Web Sitesi) (Download) [...]

  208. Stephan Says:

    Great Work!
    Works as good as Thickbox I used before. But Smoothbox is CSS2.1 valid.
    Thank’s for sharing!

  209. beermemarge Says:

    Thanks for the script.
    I had some trouble passing parameters for use in iframes. Looks like the match was not catching correctly to get the baseURL if a ? is present. I grabbed the code from thickbox and seems to work ok.

    // check if a query string is involved
    //
    //var baseURL = url.match(/(.+)?/)[1] || url;
    var baseURL;
    if(url.indexOf(“?”)!==-1){ //ff there is a query string involved
    baseURL = url.substr(0, url.indexOf(“?”));
    }else{
    baseURL = url;
    }

  210. janus Says:

    is there anyway to load an image gallery in a iFrame but when clicked not only get the iFrame but the whole browser screen darkened by the thickbox/ smoothbox?

  211. Boris Says:

    janus > Yes, http://developer.mozilla.org/fr/docs/DOM:window.parent

  212. corin Says:

    The updated version of smoothbox is creating a solid (non-transparent) overlay in IE7 only. Is this something that could be fixed by reverting to your older version? And would I also need to revert to an older (1.1/1.11?) version of mootools as well?

  213. Boris Says:

    corin > Yes, yes

  214. corin Says:

    thank you. however, after more testing, it seems the problem is only occurring on my php (linux) host, and not my normal static server. i created a “smoothbox test site” and uploaded identical versions to both servers – the overlay just bombs on the php server.

    i can’t imagine you would have any idea why this might be?

  215. greg Says:

    Hi,

    Before I start try to use your wonderful tools in my website, I would like to know if it possible to use it to display a google map using an iframe.

    Thanks in advance for your answer.

  216. liliwol Says:

    Salut et merci pour ce script bien pratique!

    Un truc me chiffone depuis plusieurs heures… Comment faire un lien dans la frame smoothbox pour que ce lien s’ouvre en lieu et place de l’actuelle.

    J’ai utilisé TB_show(), ça m’ouvre bien ce qu’il faut et où il faut, mais ajoute un bloc vide au dessous de la frame!

    Une idée?

  217. mootools.jsでCSSのパラメータの値を取得する | hayasaka修行ブログ~裏目人生脱却計画~ Says:

    [...] SmoothBoxとは今流行のJSライブラリを利用してた画像エフェクトの名前です。 [...]

  218. saturnino Says:

    Salut,
    il est super ce script, ce qui me plait c’est de pouvoir charger aussi bien une image qu’une page. Le seul hic c’est qu’il ne semble pas prévu de gestion de boutons “suivant” et “précédant” pour les groupes de pages ou bien les groupes combinés d’images et de pages. C’est vraiment dommage.
    Je suis en train d’analyser ton script afin de pouvoir implémenter cette fonctionnalité.

  219. Boris Says:

    saturnino > Si, la navigation via le clavier est géré, via les touches > et < , mais sur clavier US (tout comme le thickbox original). Si tu veux utiliser les flèches à la place en effet ça prend 2 secondes à modifier ;-)

    liliwol > Tu es obligé de passer par du JS en utilisant le mot clé “parent” , http://developer.mozilla.org/fr/docs/DOM:window.parent

    greg > Yes

  220. saturnino Says:

    Boris je ne suis pas sûr que tu ai compris mon problème:

    Je souhaite passer d’iframe en iframe avec le même principe qu’un groupe d’image.

  221. liliwol Says:

    Boris > Pourrais tu expliquer les paramètres de la fonction TB_show() stp? (Juste le paramètre rel en fait.)

    Pour le mot clé parent, je ne vois pas trop où et comment l’utiliser…
    J’ai essayé du window.parent.TB_Show(), du window.parent.location.href, etc.. mais ça ne va pas.

  222. Stephan Says:

    Hi,

    Smoothbox doesn’t work with Safari4 Developer Preview on Mac OS X (v10.4).
    If I click on a smoothbox-Link, the loading animation appears, the site is “disabled” for user actions. But the content won’t show up and I’m not able to abort . You can just reload the site to escape from this situation.

    Is there a solution?

    Thanks in advance,

    Stephan

  223. Web 2.0 Round up Modal Window Lightbox Effect Libraries « Jonsunhee’s Weblog Says:

    [...] Smoothbox is the thickbox for mootools javascript framework. [...]

  224. iceberg Says:

    is there api that lets me open not through href ?

  225. Ozgur Says:

    I think I noticed a small bug in the demos. If you click outside the content area while the pictures (or whatever content) is still loading and the progress bar is visible, the content area and the shading is removed while the progress bar remains visible.

    Looks cool. Thanks,
    Ozgur

  226. Timothy Says:

    Thank you kindly for making this script available. It works wonderfully.

  227. Tom Says:

    I’m puzzled by the first line of TB_bind:

    function TB_bind(event){
    var event = new Event(event);
    // do stuff with the *new* event object
    }

    Why do you create a new event object which wraps the old one?

    Thanks,
    tom

  228. Boris Says:

    To add the Mootools Event methods to the native browser event object. But since the event is added with Mootools’ addEvent, it’s useless now (the event object has already the mootools methods). I guess It was necessary with older versions of mootools.

  229. T Says:

    I needed a way to do some execute some specific action before showing the popup. This can be achieved by adding a new parameter to the url and read it in TB_show:

    var onBeforeShow = params['onBeforeShow'];

    Then, if it exists, the parameter will be evaluated before calling TB_showWindow(), e.g.:

    var handlerFunc = function(){
    TB_position();
    if (onBeforeShow) {
    eval(onBeforeShow + “(‘TB_ajaxContent’)”);
    }
    TB_showWindow();
    };

    If onBeforeShow=alert then the code to be exeucted is ‘alert(‘TB_ajaxContent’)’. A specific javascript function could then be used to edit the div, add additional stuff, or do anything you like.

  230. Timothy Says:

    Thank you so much for this wonderful plugin.

  231. tho Says:

    Great code!!! Which parts of mootools do I need? You had that informations for your old version but you dont give them for the new version ._. and I dont know which mootools parts I need.

  232. Smoothbox, Thickbox och Lightbox | Allt om färdiga open source lösningar för webben Says:

    [...] gång man skulle öppna en bild så ploppa den upp i en popup eller tog över hela sidan. Detta har Smoothbox, Thickbox och Lightbox löst genom ett javascript som tonar ner hela sidan och öppnar bilden [...]

  233. » Sexy Lightbox 2 Says:

    [...] Mostrar HTML basado en Smoothbox [...]

  234. Kogu23 Says:

    It’s possible to use this script with generated PHP GD (watermark) images ?

    Ex.: When I show images like this -> [...]watermark.php?scr=someimage.jpg[...]
    smoothbox works ONLY if I use IFRAME :( (

    What can I do when I want to use smoothbox with watermarked ON FLY images ?

  235. Nick Wilcox Says:

    Great posting and article. One question

    How do I launch popups from flash using Smoothbox? We currently use thickbox and mootools but get incompatibilities.

    current ActionScript

    ExternalInterface.call(“tb_show”,”Alaska”,”salesrep.aspx”,false);

    Would would need to change to run this through SmoothBox?

    Thanks!!!!!!!

  236. 56 个AJAX图片展示框架(Galleries, Slideshows and Lightboxes) | 梦疑大师的博客 Says:

    [...] Smoothbox Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.For the description and the features, you can go to Thickbox’s website, as they are basically the same.The main difference from a user point of view is that I’ve added some effects when the box shows up and on scroll. [...]

  237. Pete Says:

    Having a problem in Firefox 2 and IE7 – If you have a link to an image that does not exist, the loading gif shows up along with with the modal background. However, clicking off of it to stop it leaves the .gif on the screen whereby I would assume it should become hidden again. Relatively minor because it’s obviously more important that your iamges appear :)

    Great work, love that it’s compatible with mootools.

  238. » Blog Archive » ed infine Smoothbox Says:

    [...] Explorer 6! Misteri misteriosi…Comunque, alla ricerca di una soluzione, ho scoperto invece Smoothbox, leggero come Thickbox da cui deriva, ma che si appoggia ad un’altra libreria… e [...]

  239. Mandragora Says:

    A signaler un petit problème avec Mootools 1.2.1 et SmoothBox (enfin cette version) avec IE 7 lors de l’utilisation d’un contenu autre qu’une image…
    Suis-je le seul à avoir ce bug ??

  240. Sandbird Says:

    Hi, I found smoothbox through another application and it looks great!
    I have a problem in Firefox-Mozilla though.
    In some pages on my site, when i click a button the seethrough pixels fills the screen but the box popups up at the bottom of the screen hidden from the viewer. If i scroll down using the middle button i can “catch” it a bit, but then it just hides again under the taskbar.
    I cant find why it is doing that…I’ve been trying 4 hours to figure it out :(
    Can someone tell me why ?
    Thanks

  241. Ben Says:

    Hi there,

    just a quick one, in IE7 the background is solid black? not transparent?

    any ideas

    cheers

    ben

  242. spamor Says:

    Bonjour et merci pour ce script !
    Je rencontre un bug avec IE7 : j’appuie sur mon bouton “contact” et le formulaire n’apparaît pas, par contre, ma page glisse vers la droite de l’écran…

    Sur Firefox le comportement est normal, le formulaire apparaît sur fond grisé après la transition.

    Je suis sur wampserver windows

  243. 56 Scripts For Galleries, Slideshows and Lightboxes « LanceZhang’s Blog Says:

    [...] Smoothbox [...]

  244. Albert Says:

    Thnx for this one, I use it for Iframe-technology
    Have one “bug” though: when you use an URL with parameters (like http://mysite.com/document.asp?id=4&test=2)
    I appended &TB_iframe=true&…. etc to it, but when your script checks for url.indexOf(‘TB_iframe’), it splits the URL on ‘TB_’ which leaves an ampersand as last character on the URL.
    I needed also an anchor, which made it unworkable: ?id=4&test=2#anchor&

    I solved this in your script as follows:
    if (urlNoQuery[0].substr(urlNoQuery[0].length-1,1)==’&’) urlNoQuery[0]=urlNoQuery[0].substr(0,urlNoQuery[0].length-1);

    Maybe you should find a permanent solution ;-)

  245. markoh Says:

    This is just too slow in IE7. Same machine, Thickbox/jQuery samples load instantly, these ones here take seconds. Also CPU activity goes way up close to 100% for literally 5 seconds or more while for Thickbox only to 20%. And this is a new Core2Duo laptop. I know jQuery is a bit faster in general, especially in IE but not that much. On the other hand, testing in Chrome works perfectly – very instant and more smooth effects.

  246. Marian Says:

    A simple workaround for the parameters problem with mod_rewrite. I use it on my cms to add comments for articles.

    Add in .htaccess

    RewriteEngine on
    RewriteRule ^add_comment_([0-9]+)$ addcomment.php?id=$1

    generate the links to the iframes like add_comment_1221?keepThis=true&TB_iframe=true&height=440&width=500
    (1221 is the value for the id parameter to be passed of course)

    read inside the iframe the id with: $_GET[id];

  247. Corne Says:

    Hi. I’m trying to use smothbox but it’s opening my images in a new window. How can I fix this.

  248. @Corne Says:

    Your script is not working. Either mootools.js is not loaded, or smoothbox, or both. Check the paths. Use a tool such as Firebug to find the bug quicker.

  249. html entity Says:

    I’ve got the same problem, but strangerly on my Localhost (WAMP running)
    it works, and online it opens only the image (no layer effect…)
    ;-(
    An other question: my website works with frame scaffolding so i’m looking for a script which is able to lay the image over all frames… Does anyone know about one like that???
    Please write me.
    But at least wou’re script is really nice and I think i’ll enjoy it anyway…

    best regards your entity
    pascal{dot}gujer[at]hispeed(dot)ch

  250. richoid Says:

    This is great! But…

    I see a bunch of requests for a simple way to pass a parameter, but don’t see a clear answer. I tried the thing ‘beermemarge’ wrote, above, but it didn’t help (changing the ‘var baseURL’ code). I couldn’t make heads or tails of some of the other references… not being great at JS.

    Any clues you can give me?

    My ultimate goal is to pop open a window when someone clicks a radio button or checkbox (or something that looks like one) and have a new PHP-generated form pop up based on the parameter (changing content based on the parameter). I’m using $_GET(‘stuff’) to receive the value in the target page.

    Thanks!

  251. Искусство и программерский dzen » Диалоги для Mootools Says:

    [...] диалоговых окон с фотографимяи или картинками. Страничка [...]

  252. Karlo Says:

    Please i need help!
    I use smoothbox but i need to use the “OnLoad” event for loading a Flash animation while loading page….please help me..how should i do?

    Thank you

  253. Ajax Lightbox Örnekleri | Ertuğrul Haskan Says:

    [...] : Standart lightbox örneğine benzeyen bir lightbox örneği. Web Sitesi ‘ni ziyaret edin. Download etmek için [...]

  254. Vinz FDC Says:

    Hi,

    (sorry for my bad english)
    First I really like this gallery, so, thanks to the dev who work on !

    Well, I just wanted to add a link under some images in the gallery images to refere to them …

    I tried, and, it works, so I post my “how to” :

    First, open smoothbox.js and your HTML file (ex: index.html).

    In your HTML file copy/paste the “a href” as in this website explain, so :

    Ok, now, just add ‘name=”www.celavi.fr” ‘ in the ‘a href’ , like this :

    That’s all for your HTML file.

    Then, in the smoothfile.js file, go to the line 33, delete the “caption var” line, and replace by :

    // get caption: either title or name attribute
    var caption = this.title || “”;
    // get link: either title or name attribute
    var lien = this.name || “”;

    ‘lien’ means link in french, so you can replace by “linkUrl” or any other variable, BUT NOT ‘link’ !

    then, in the line 39 (around), you add again your new variable, like, this :
    TB_show(caption, lien, this.href, group);

    ok ?
    Same manipulation on line 45.

    Go to line 89, and under :
    caption: “”,

    Add
    lien: “”,

    Go to line 101, and under :
    caption: image.title,

    Add
    lien: image.name,

    In line 176, you should get this :

    Now, add your new variable, like this :

    And last point, in line 177, find something like :

    “” + caption + ”

    And replace by :

    “” + caption + “” + “” + lien + “

    Ok, that’s all, I hope I didn’t forget anything … and hope this help !!!

    thx,
    bye bye

  255. Alessandro Says:

    I’m trying to use a login form opening it in a Smoothbox (I’ve followed your example and it works correctly): I’m encountering a lot of problems, as I’d need to close the Smoothbox window when clicking the submit button, or better to close the Smoothbox if the login is successfull (I’d try to manage this with an AJAX script that should close the window on success).
    Can you please show me some code to close the window without a closing link?
    Thank you in advance

  256. James Says:

    This is driving me crazy but how come I can’t get it to work in IE or Safari? It seems just to work in Firefox? I am using a strict doctype and I have all the components. It’s currently at http://www.iprontoweb.com/eco . Any suggestions?

    Look forward to your help,

    James

  257. James Says:

    oh, it’s the comments button.

  258. James Says:

    sorry I mean contacto!

  259. James Says:

    It’s ok, I’ve solved the issue, just my own lazy scripting error!

  260. Javascript Effects to Boost your Website | php genious Says:

    [...] Name:Smoothbox [...]

  261. Sirius Says:

    I just tried Smoothbox, but find I can no use it without implementing few modifications to suit design concept:

    - fully disable page background opacity effect and animations;
    - make image container dragable;
    - to open the container of theSmoothbox up on the page(or just near the top) instead of having it centered vertically.
    Dont know how to adjust for this. I think it very easy. Any help?

    Thanks

  262. Smitty Says:

    I’m having trouble with IE6 (no big surprise) and SSL. When you click a link to open a smoothbox a security error pops up suggesting that the page is no longer secure. This does not happen in Firefox. Does anyone have a suggestion on how to correct this problem?

  263. Mika Says:

    Hi,
    Thx for that great “box” but I got a strange problem when I’m use it in Firefox 3, it works great in IE 7.

    The problem with firefox is that won’t create an iframe, so when I click on the img Firefox shows it under my page, so there’s a big blank under the “conteneur” and I have to scroll down to see the img, and the funny way of it, is that it’s work well but not on an iframe.

    So please could you help me? Thx

  264. lucho Says:

    upss add this script
    http://gueschla.com/wp-content/themes/default/mootools-1.2-core-yc.js

  265. javo Says:

    AWESOME SCRIPT!

  266. Fab Says:

    Bonjour,

    Petit problème avec le INLINE HTML, impossible de transmettre le HEIGHT, donc pas de calcul pour le positionnement en TOP (sauf en copiant le code source depuis firefox sur une nouvelle page html, biiizzzzare). J’ai cependant trouvé la solution en ajoutant à la ligne un “&” devant height à la ligne suivante :

    Show

    Ce qui donne :

    Show

    Problème de parse ?

    (N’hésitez pas à me répondre sur mon mail si besoin)

  267. Fab Says:

    Bonjour,

    Petit problème avec le INLINE HTML, impossible de transmettre le HEIGHT, donc pas de calcul pour le positionnement en TOP (sauf en copiant le code source depuis firefox sur une nouvelle page html, biiizzzzare). J’ai cependant trouvé la solution en ajoutant à la ligne un “&” devant height à la ligne suivante :

    <a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent" title="#" class="smoothbox">Show</a>

    Ce qui donne :

    <a href="#TB_inline?&height=300&width=300&inlineId=myOnPageContent" title="#" class="smoothbox">Show</a>

    Problème de parse ?

    (N’hésitez pas à me répondre sur mon mail si besoin)

  268. Rodrigo Brazil Says:

    Gostaria de agradecer, me ajudou muuuito!!!

    Translate: I only wanna thank you. You helped me very much!!!

  269. Landman Says:

    YEAH!!!!! You guys officially rock for creating this script. I’ve been searching and had loads of trial and error!

    Thanks sooo much!

  270. smudge Says:

    This stuff is great. I’ve seen a few alternatives but your examples with all the content variations is even better.

    I can’t see how you make the call to an html document work in WordPress.

    HTML

    <a href=”#TB_inline?height=300 is your example, but how did you setup the page? Is it a private page and you are using permalinks? Did you just create a static page and save it to the root dir and call it from there?

    Keep up the great work.

  271. smudge Says:

    Do you have a guide on how to install it? I can think of a few ways but knowing the simplest direct would be great. Keep up the great work.

  272. smudge Says:

    Can you pull a page with SSL into the smoothbox?

  273. Rija Says:

    Bonjour,
    j’utilise noobslide avec slimbox et ca fait un conflit du genre : Element.Storage has no properties , mootools…2-core.js (ligne 190).
    Que dois-je faire?
    merci

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

  275. Jason Says:

    I tried the fixes that have been posted here to handle Safari’s cache problem with the iframe version. All it does for me is disable the javascript effect and open in the full window (not the popup).

    Is there any new information on why Safari screws up the iframe technique when the page is reloaded? I want to use links within the popup that take users to another page within the same popup. The ajax method doesn’t seem to handle this.

    Thanks for your help. This is a great script if it will work consistently in all major browsers.

  276. Daniel Says:

    Hi,

    I’m having a little bit of trouble with smoothbox and mootools. When the smoothbox pops up the menu sort of leaks through so that the buttons are still clickable. I would appreciate any help…also if there is some sort of fix please send it to my email…if thats ok :D

    Thanks!

  277. Webagentur Says:

    Thank you … this tutorial has me very helped.

  278. Sirtin Says:

    Bonjour.

    J’ai rendu mon blog compatible aux normes W3C et le validateur me met tout en vert, sauf pour la partie CSS du plugin “Ajax edit comments” à cause de l’application AJAX Thickbox, qui a un mauvais code CSS. J’ai donc deux possibilités: soit désactiver le plugin mais ce serait fort dommage pour les lecteurs, soit corriger les erreurs du CSS.

    Après une recherche sur le Net, je tombe sur ce forum: http://ajaydsouza.org/index.php/topic,25.0.html où un membre conseille de remplacer Thickbox par Smoothbox qui, lui, est valide CSS. Super je me suis dit !

    Mais… J’ai beau chercher, je ne vois pas du tout comment remplacer Thickbox par Smoothbox ? Où dois-je agir ? Si vous pouviez m’aider, ça me dépannerait vraiment !

    Merci d’avance.

  279. Igor Says:

    Hi,

    I was wondering if you could tell me how could I fix the brief appearance of scrollbars when smoothbox content is loaded. See http://www.igorbrezhnev.com/clients/siterev3/ – when one of the thumbnails on the main page are clicked the browser window shows scrollbars for a brief moment and then shows the smoothbox content.

    Thanks!

  280. JBM Says:

    Bonjour,

    D’abord, Bravo, c’est la plus belle des “box” que j’ai vu jusquà maintenant..
    Ensuite, deux questions me taraudent :

    - Avec quelle version de mootools le script fonctionne t-il ?
    - Quelle est la méthode, la syntaxe pour ouvriri une smoothbox à l’ouverture d’une page ?

    Merci d’avance

  281. Javier Says:

    Hello Boris. I experienced that if I use [a href="#" class="smoothbox"]link[/a] AFTER TinyMCE editor, the class not works, simply works as a normal link.
    However, if I hold the same link BEFORE TinyMCE editor, your class works fine.

    What could be doing TinyMCE that your class not works fine?. Is there a modification to achieve this?

    Thanks!!

  282. Javier Says:

    I highlight that only suceed in IE7 (as always…)

  283. Виктор Меньшиков Says:

    А если не тайна, автор блога откуда родом?

  284. Linda Says:

    I’m using Smoothbox and MooTools to create the overlay effect when one clicks an image/link to open up a new “page/overlay.” It works great with HTML pages but there is a problem when I link to a PDF. I do get the “overlay” effect where the background is grayed out but the “top gray bar with the CLOSE link” is not there. As a result, I have no way of closing out the overlay to get back to the main page.

    I have a similar problem with the overlay when I try to link to a HTML page where I have a PowerPoint presentation converted into a movie with Camtasia.

    Any ideas what might be going on? Has anybody else have this problem where the gray bar with the CLOSE does not show?

    Thank you in advance. :)

    Linda

  285. Thinking Outside The LightBox – TOP 10 PICKS By Gregory Milby www.syrbot.com Says:

    [...] Smoothbox is another extremely light-weight lightbox script. The setup is quick/easy – it’s not bulky or clunky, and only requires 2 files to operate (css & js, and images of course). [...]

  286. Филипп Смирнов Says:

    Я подписался на вашу РСС ленту, но посты почему-то в виде каких-то квадратиков :( Как это исправить?

  287. Steve Says:

    Hi,

    I seem to be having a problem with iframes in Firefox 3. When the iframe starts to opem you briefly see a snap shot of the previous page. The loader image does load but is shown for only a split moment between this odd image repeat and the correct page loading.

    This does not happen in IE and it does not happen in Chrome.

    Any ideas?

  288. lars Says:

    hi,

    i would like to use a smoothbox on an image map. I tried it with the normal explanation (), but this don’t works.

    can me help somebody?

    so long
    lars

  289. lars Says:

    ahh i have found a solution! i’ve added some lines
    at the beginning of the file:

    function TB_init(){
    $$(“a.smoothbox”).each(function(el){
    el.onclick = TB_bind
    });
    //new code
    $$(“area.smoothbox”).each(function(el){
    el.onclick = TB_bind
    });
    }

  290. Dv Says:

    This is a great tool, thank you! My question is I basically need to click on the link, have the pop up come up and then load the page. I need to be able to see any errors on the pop up page as they are displayed (I keep the buffer flushed so content is displayed to the new page as the php script runs). The current way it’s working is the whole page is loaded then the pop up comes up with all the content all ready displayed. Thank you.

    -Dv

  291. Matt Says:

    I love this application, I just wish it would load faster upon clicking. Any ideas on how to do this? The smoothboxes on my webpage load very slow!

  292. 10个最佳Mootools Lightbox效果脚本收集| Ajax| 前端观察 Says:

    [...] Smoothbox [...]

  293. 10个最佳Mootools Lightbox效果脚本收集 Says:

    [...] Smoothbox [...]

  294. book | Beat Pro Says:

    [...] Smoothbox, Thickbox for mootools » Gueschla.com [...]

  295. 10 incredible Free Lightbox Scripts using Mootools | BlogingBloging Says:

    [...] Smoothbox | Demo | [...]

  296. Nice Says:

    I love this application, I just wish it would load faster upon clicking. Any ideas on how to do this? The smoothboxes on my webpage load very slow!

  297. juliens Says:

    Hello,

    I’m trying to remove the slide from bottom left to center effect when pressing next or previous link but didn’t succeed.
    Could someone one tell how to do that ?

    Regards

  298. Eric Jackman Says:

    I am assuming the proper way to create a smoothbox window from javascript without using a link is to call the TB_show() function passing along the desired variables for caption, url, and rel. Is this the best way to do this or is there another way?

  299. Safari Glitch Says:

    If anyone’s still struggling with the Safari iFrame cache problem, I found an easy fix on this page: http://codylindley.com/thickboxforum/comments.php?DiscussionID=682&page=1
    worked for me… cheers.

  300. Ludwig König Says:

    I lobve this work! I used this one so often for great useful things. thanks a lot for this wonderful work! so many website projects could be realized. guys like you keep the webdesign at a high level that matters!

    greets from germany

  301. aletail Says:

    For anyone who is using this for html content you may run into an issue if you have a query already attached to your url:
    http://www.somewhere.com/somfile.aspx?id=123123#TB_inline?height=165&width=365&inlineId=popup_ccv

    It will cause the window to not center itself vertically and will throw an error in ie. The fix I came up with:

    line 225
    replace:
    var queryString = url.match(/\?(.+)/)[1];
    var params = TB_parseQuery(queryString);
    with:
    var queryString = url.split(“?”);
    var params = TB_parseQuery(queryString[queryString.length-1]);

    Not sure if that is the best solution, but it has worked well for me so far.

  302. Sexy Light Box, Best lighbox tool for your blog & website. | guidesigner.net Says:

    [...] Smoothbox , Thick box for mootools [...]

  303. François Says:

    Bonjour,
    tout d’abord merci pour le script.
    Je voudrai que quand on clique sur le bouton Fermer de la smoothbox, ça rafraichisse la page.
    Donc j’aimerai intégrer un refresh() après closeWindowButton mais je ne sais pas faire, je ne maitrise pas du tout le javascript.
    Est-ce que quelqu’un pourrait m’aider à modifier le code ?
    Merci d’avance.

  304. Daniel Says:

    Thanks for such a great script it works really well.
    Are there any demos on how to use the Modal version of Smoothbox?

  305. En samling av mina 10 favorit Lightbox script baserade på Mootools « Real Blogg Says:

    [...] Smoothbox [...]

  306. Smoothbox: Thickbox for mootools | Ajaxdump Says:

    [...] Smoothbox using MooTools [...]

  307. lion63 Says:

    j’ai essaye le le script smoothbox ca marche très bien , J’ai un p’tit problème je veux passer la viriable $matricule au script detail.php mais j’ai toujours cette erreur

    l’erreur est : Notice: Undefined index: $matricule in /var/www/html/lmdst/detail.php on line 3

    voici mon script :

    matricule

    merci a la cooperation

  308. SBosS Says:

    Hi,

    First, thanks for this great job :)

    I would like to know how to change the url of the parent window by clicking a link in my Iframe.

    I try things like, parent.location(‘url’) … but it doesn’t work.

    When I click on my link, I want to close the iframe and replace the url of my parent windows.

    Please help :)

    Thanks

    (french people can answer in french, this is not a problem)

  309. ShadowBox, Ligthbox y demás script de contenido multimedia « DeCabeza.net Says:

    [...] nyroModal prettyPhoto Prototype Window RoeBox Shadow Box Slightbox Slightly ThickerBox Slimbox Smoothbox SubModal Suckerfish HoverLightbox Redux SWFbox Thickbox TinyBox YUI based [...]

  310. hoda Says:

    i used this,but what i need it to pass data in url
    and i inline it doesnt work with me
    could u please help

  311. Sasi Says:

    Im using this smoothbox script with mootools in zend framework…..
    how to implement it…i got an error like Url match is null…in the line no 225 in smoothbox.js

  312. WebGrid Says:

    Are there any demos on how to use the Modal version of Smoothbox?

    There is a modal version in thickbox (look at my webpage: http://www.webgrid.com for example)

    Is this supported in Smoothbox?

  313. Dirk Schmitz Says:

    I used milkbox but there is no way to show an iframe. Smoothtool is a very good motool plugin for showing pictures and show other webpages.

    Cool

  314. jignesh Says:

    hi

    please let me know how to remove a close option in iframe thickbox

    Thank’s

    Jignesh

  315. Lightboxクローンの比較 « DOTAPON Blog Says:

    [...] Smoothbox [...]

  316. illimbMum Says:

    testing medical devices [url=http://rxdrugs24x7.com/product/tamiflu.html]Order tamiflu[/url] watsonville ca drug rehab centers [url=http://rxdrugs24x7.com/product/ovral.html]health clubs in california[/url] home health care key messages
    http://rxdrugs24x7.com/product/aciphex.html

  317. Egyptian Papyrus Says:

    Thanks It’s really great tool

  318. Agentur seitlich Says:

    We love your script very much! We work so often with this one. It is lightweighted, it is powerful and it brings all the features we need for nice presentations of images, html content, multimedia data like videos and animations. and it has a well interface for communication with servers (buzzword: ajax). It is a real good base for implementing own ideas like “pimp my smoothbox”!

    We love your script!

  319. 10个最佳jQuery Lightbox效果插件收集 | 网页前端设计爱好者 Says:

    [...] Smoothbox [...]

  320. Techie Talks Says:

    PDF viewing is made possible by jquery and I hope there is a plugin downloadable so wee need not to rely on something else.

  321. Bockerl Says:

    Wow, that are very interesst gallerys. Has me very helped.

  322. HEEL LIFTS Says:

    Excellent work. You have gained a new fan. Please keep up the good work and I look forward to more of the same excellent posts.

  323. deeve Says:

    Hi, many thanks for the script! Just one request; how do you enable the easing motion that occurs in a jQuery Lightbox when the box initially resizes to accommodate the size of an enlarged image? Is this effect possible in Smoothbox?

    Thanks.

  324. murali Says:

    hello…………

    Hi, many thanks for the script! i am looking for this script from 2days. now i got it. but i am facing one one problem in this. actually i used “iframe example1″; when i am clicked the link image will displaying total page. smoothbox not appearing. i tried a lot. but this is not getting. plz tell me where is the problem in my code.

    Thanks.

  325. Ike Myle Says:

    How can I make the scrollbar disapered when open a popup iframe (url)? It is anoying and my iframe height is fixed.

  326. zekia Says:

    Hi Boris and thank you for this script. I’d like to ask you a question here. I’m trying to use Smoothbox in my website but in Firefox there seems to be a strange behavior when I click on the link that loads the iframe code. My warp div seems to move to the right and then it returns to its normal position. It happens only in Firefox.

    My wrap div is absolutely positioned and I don’t know if that causes the problem.

    #wrapper{
    width:620px;
    height:600px;
    padding:0;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-310px;
    z-index:0;
    }

    Should I give you a link to my website and take a look of it?

  327. kyle Says:

    Any easy way to get rounded corners on the border of TB_window?

  328. John Weis Says:

    Thanks so much for the code! Works great and provides a great experience!

    I did have one problem that I fixed, and I thought you might want to hear about it…

    When launching the smoothbox from a page such as /index.jsp?val=true , the TB_parseQuery method does not the handle multiple query strings well…

    you can add this line underneath the var params = { }; statement and it will handle it just fine, without breaking any other functionality

    // if the url that we are on contains a query string, then we need to strip the first string out…
    query = query.substring(query.lastIndexOf(‘?’) + 1);

  329. JT Says:

    Have you fixed the dialog creating itself outside the form tag? I made some tweaks that I can send if your interested.

  330. jQuery插件收藏 Says:

    [...] Smoothbox Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.For the description and the features, you can go to Thickbox’s website, as they are basically the same.The main difference from a user point of view is that I’ve added some effects when the box shows up and on scroll. [...]

  331. tom Says:

    I get an error-message on your site
    http://gueschla.com/labs/smoothbox/ :

    ” Warning: Unknown(/home/bpopoff/gueschla.com/myShare/myShareWP.php): failed to open stream” …

  332. Satılık Villa Kemer Says:

    Thanks a lot. Very Usefull

  333. Becoming familiar with jQuery | Wrought Hosting and Design Says:

    [...] which caused a few problems with the jQuery scripts already on the site. I went through mootools Smooth Box, Thick Box all with no avail kept coming across a problem. I then did a little reading and found [...]

  334. 五色六彩 Says:

    [...] Smoothbox [...]

  335. Teo Says:

    Does it works with google maps ?
    I would like to add google maps in a lightbox, in mywebsite…

  336. Kanwal Says:

    hii…i hve problem in calling function TB_init(){

    $$(“a.smoothbox”).each(function(el){

    el.onclick = TB_bind;

    });
    }
    can anyone help to execute that function properly

  337. Kanwal Says:

    and when i clicked image it didnt open in smoothbox…

  338. Kanwal Says:

    following function created prob m trying alot to execute it $$(”a.smoothbox”).each(function(el){

    el.onclick = TB_bind;

    });
    pls help……….

  339. Sean Macdonald Says:

    how do i launch a smoothbox window programmatically?

  340. Garret Dominicus Says:

    Hey, I came across this article while searching for help with JavaScript. I have recently switched browsers from Chrome to Firefox 3.2. Just recently I seem to have a issue with loading JavaScript. Every time I go on a page that needs Javascript, my computer doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is very appreciated! Thanks

  341. 40种Lightbox效果收集 - Loo Design Says:

    [...] Smoothbox [...]

  342. 20个最佳的Lightbox效果收藏,基于MooTooTools or jQuery | CssRainbow.cn Says:

    [...] Smoothbox [...]

  343. riple Says:

    nice tutorial.. thanks

  344. Ertuğrul Haskan » jQuery Lightbox Örnekleri Says:

    [...] : Standart lightbox örneğine benzeyen bir lightbox örneği. Web Sitesi ‘ni ziyaret edin. Download etmek için [...]

  345. Bridget Says:

    Hello – I love the script, however I spent a few hours trying to figure out why form validation was going haywire. Seems that smoothbox CLONES the element for the overlay window… why?!?!?

    Now you have duplicate ID’s and obviously this will not work…. ?

  346. Светодиодная лента Says:

    Working great. Thanks.

  347. Automatically Generate a Photo Gallery from a Directory of Images: Updated | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! Says:

    [...] to generate thumbnails for the gallery using PHP. I’ve also implemented a MooTools lightbox: Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your [...]

  348. Automatically Generate a Photo Gallery from a Directory of Images: Updated Says:

    [...] to generate thumbnails for the gallery using PHP. I’ve also implemented a MooTools lightbox: Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your [...]

  349. Automatically Generate a Photo Gallery from a Directory of Images: Updated | Shop Rate Says:

    [...] to generate thumbnails for the gallery using PHP. I’ve also implemented a MooTools lightbox: Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your [...]

  350. The Official ASATO Site » Blog Archive » 20 amazing lightbox use JQUERY or MooTools Says:

    [...] Smoothbox [...]

  351. Orlando Website Design Says:

    I’m having a little trouble with some other Javascript running on my site, but I think i’m going to figure it out here today. Thanks for the great alternative to ThickBox!

Leave a Reply

You must be logged in to post a comment.