Smoothbox, Thickbox for mootools
May 15th, 2007Author : 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.
You can go there to see which components you’ll need to run the script.
Smoothbox’s blog post (French)
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
HTML
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
Gallery Images
Demo
HTML
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="plant 1" /></a> <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="plant 2" /></a> <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="plant 3" /></a> <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="smoothbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="plant 4" /></a>
Inline Content
Demo
HTML
<a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="smoothbox">Show</a>
iFramed Content
Demo
HTML
<a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="smoothbox">Example 1</a> <a href="ajaxLogin.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="smoothbox">Example 2</a>
AJAX Content
Demo
HTML
<a href="ajaxOverFlow.htm?height=300&width=300" title="add a caption to title attribute / or leave blank" class="smoothbox">Scrolling content</a> <a href="ajaxOverFlow.htm?height=480&width=640" class="smoothbox" title="add a caption to title attribute / or leave blank">No-scroll content</a> <a href="ajaxLogin.htm?height=100&width=250" class="smoothbox" title="Please Sign In">login</a>
FR : 
2007-05-19 at 12.47 pm
Great work
this is a really nice script
thanks a lot for sharing it
2007-05-19 at 11.43 pm
thanks a lot, it’s nice to only need one framework and I happened to need moo tools.
2007-05-20 at 12.44 pm
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 :))
2007-05-21 at 1.51 pm
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.
2007-05-21 at 2.06 pm
@orfaon,CssProdigy : Thanks, that’s cool if you appreciate it
@Rod : Nice idea, maybe in a future release
2007-05-21 at 2.59 pm
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)
2007-05-21 at 3.15 pm
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 ?
2007-05-21 at 3.26 pm
There you go! That fixed the issue. I was using IE7 and adding a valid strict doctype was the answer.
2007-05-27 at 7.49 pm
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.
2007-05-31 at 8.58 am
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?
2007-05-31 at 7.04 pm
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.
2007-06-01 at 8.55 am
The underscore “typo” is probably for IE. Other browsers ignore it.
Btw thanx for sharing!
/T
2007-06-01 at 5.41 pm
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
2007-06-02 at 4.41 am
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?
2007-06-02 at 8.26 am
Sorry for the false alarm. I re-downloaded MooTools and it’s working now. Thanks, this is perfect!
2007-06-04 at 9.31 am
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 !
2007-06-04 at 4.21 pm
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?
2007-06-12 at 2.58 pm
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?
2007-06-12 at 3.01 pm
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 !
2007-06-12 at 4.15 pm
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.
2007-06-12 at 4.33 pm
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é.
2007-06-12 at 4.35 pm
@ Reece Conrad > I think the flickering problem you were speaking about was the one that Alan has pointed out. It should be fixed now.
2007-06-17 at 6.26 pm
How to bring dynamic content into the Smoothbox ?
PHP, POST!, Submit per form, AJAX ?
Is this possible ?
2007-06-18 at 1.37 pm
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!!
2007-06-22 at 9.21 pm
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!
2007-06-26 at 9.37 pm
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
2007-06-27 at 4.34 pm
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 ?
2007-06-27 at 4.38 pm
guix > Tu peux faire cela via des iframes.
2007-06-27 at 6.02 pm
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.
2007-07-03 at 11.37 am
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
…
2007-07-12 at 8.51 pm
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?
2007-07-12 at 9.43 pm
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?
2007-07-18 at 4.14 pm
[…] 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 è […]
2007-07-26 at 12.55 am
Working great.
Thanks.
2007-07-27 at 4.24 pm
Mike B > For Inline / Ajax content : TB_remove()
For iframed content : parent.TB_remove()
2007-08-08 at 10.33 am
BUT, for this fantastic script, how can I use javascript to open it as Smoothbox does.
Thanks.
2007-08-09 at 11.37 am
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?
2007-08-09 at 11.41 am
benn > You can set the opacity with javascript, it’s the only valid way that I know : $(’TB_overlay’).setStyle(’opacity’,0);
2007-08-09 at 11.45 am
you are fast bratka!
so this should work
$(’TB_overlay’).setStyle(’opacity’,0);
is that right?
2007-08-09 at 11.45 am
not takong code smart
scri
$(’TB_overlay’).setStyle(’opacity’,0);
/scri
right?
2007-08-11 at 6.26 pm
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.
2007-08-13 at 10.28 pm
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!
2007-08-14 at 11.59 pm
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!
2007-08-15 at 12.26 am
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!
2007-08-16 at 2.38 pm
Brian S > I think your fix is quite good. Not everyone needs it, so I dont plan to add it to the script though.
2007-08-16 at 2.39 pm
Alakhnor > You can use the “< " and ">” keys on the keyboard for that (on a qwerty keyboard)
2007-08-17 at 12.20 am
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?
2007-08-17 at 1.44 am
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..
2007-08-17 at 9.19 am
prasad > You can use the attribute target=”_top” on your links, this should work
2007-08-17 at 10.36 am
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
2007-08-20 at 2.45 pm
I think smoothbox not works with Mootools 1.11. I have same problems. Somebody is able to fix it?
2007-08-20 at 7.44 pm
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
2007-08-20 at 7.47 pm
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.
2007-08-29 at 5.24 am
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
2007-08-29 at 12.25 pm
thanks a lot, this script is amazing!!!!
2007-08-29 at 4.23 pm
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.
2007-08-29 at 9.44 pm
Can’t switch beetween pictures in Opera 9. Bad…
2007-08-29 at 10.00 pm
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];
2007-08-29 at 10.54 pm
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 ???
2007-09-02 at 7.23 am
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
2007-09-02 at 7.34 am
Its good! and useful too!
Thanks a lot!
2007-09-02 at 4.22 pm
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
2007-09-02 at 4.30 pm
It works just fine.
Appreciate ur help
pomp
2007-09-03 at 11.04 pm
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
2007-09-04 at 3.10 pm
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.
2007-09-04 at 3.17 pm
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
2007-09-05 at 6.25 am
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
2007-09-06 at 3.45 am
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).
2007-09-10 at 5.14 pm
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
2007-09-11 at 7.17 am
THANK YOUUUUUUUUUUUUUUU!!!!!!!!!!!!!!!!!!!!!!
WITH THIS SMOOTHBX I CAN USE MOOTOOLS+MGMEDIATHICKBOX + SMOOTHBOX!!!!!
WILL YOU MARRY ME?
LOL
2007-09-13 at 7.54 pm
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.
2007-09-13 at 7.55 pm
I mean “now.”
2007-09-13 at 10.44 pm
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
2007-09-13 at 11.15 pm
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.
2007-09-15 at 9.05 am
Is the compatibility profile for Smoothbox identical to that of Thickbox, or does it work in different browsers than its predecessor?
2007-09-17 at 10.16 am
Great work, thanks a lot
2007-09-18 at 2.05 pm
Bonjour,
vraiment bien cette … xièmeBox
Tout d’abord : merci !
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
2007-09-18 at 2.31 pm
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…
2007-09-18 at 11.17 pm
[…] SmoothBox http://gueschla.com/labs/smoothbox/ […]
2007-09-19 at 12.55 pm
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
2007-09-19 at 10.24 pm
[…] Enlace / Peso: 15kb / Framework: jQuery / Descargar / Otras versiones: Slightly ThickerBox , Smoothbox, […]
2007-09-20 at 1.10 pm
Smoothbox is causing huge memory spikes in IE whenever the effect runs. Is anyone else having this experience?
2007-09-26 at 1.26 pm
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????
2007-09-26 at 4.46 pm
Hi all,
If there a way to have a 3000ms timeout on a box? (Auto fade out?)
2007-10-05 at 4.28 pm
ponsfrilus > Yes, you have to deal with setTimeout or .delay and TB_remove
2007-10-11 at 6.13 am
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.
2007-10-12 at 2.19 pm
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
});
});
});
});
2007-10-14 at 7.51 am
@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.
2007-10-18 at 11.02 am
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?
2007-10-19 at 12.10 am
Nevermind, I found the solution!
http://forum.mootools.net/viewtopic.php?pid=28328#p28328
2007-10-19 at 4.12 am
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?
2007-10-20 at 1.35 am
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/
2007-10-31 at 4.51 pm
I also made a change to have my page XHTML Valid:
In TB_parseQuery ( query ) function i did
var pairs = query.split(/[;&(&)]/);
Regards,
2007-10-31 at 4.52 pm
in my last post: & = query.split(/[;&(&\amp;)]/);
2007-11-02 at 6.48 am
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
2007-11-05 at 5.11 am
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
2007-11-06 at 4.30 am
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;
});
}
2007-11-07 at 7.19 pm
Thanks a bunch for this awesome script! well done!
2007-11-09 at 7.04 am
opacity does not work with ie6. Any solutions?
2007-11-09 at 12.35 pm
memory leaks when i click an image using ie7 in this page. Do you know any solution?
2007-11-09 at 9.23 pm
Is this still not working in mootools 1.1?
2007-11-09 at 9.26 pm
amrish > It’s working, example => http://assistancefree.fr
… > It’s working for me on several computers.
Erik Hansen > Thx for sharing your mod !
2007-11-09 at 9.27 pm
ktml > Your link to the mootools forum about the “garbage destructor” is useful, thanks !
2007-11-09 at 9.29 pm
I just get a loading screen, my content disappears instantly after displaying full width at the bottom of the page.
2007-11-09 at 9.31 pm
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
2007-11-09 at 10.13 pm
The loading image stays on the page after I click away from it too, I can’t seem to figure it out.
2007-11-11 at 7.09 pm
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.
2007-11-13 at 12.38 pm
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!
2007-11-14 at 1.57 am
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!
2007-11-14 at 11.53 am
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
2007-11-15 at 10.03 am
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.
2007-11-19 at 12.08 pm
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 !
2007-11-26 at 4.52 pm
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
2007-11-28 at 4.41 pm
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
2007-11-30 at 7.33 am
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!
2007-12-02 at 2.35 am
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?
2007-12-03 at 1.44 pm
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
2007-12-03 at 9.17 pm
@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.
2007-12-04 at 3.30 pm
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
2007-12-17 at 2.46 pm
Hi ,
when i open popup with smooth box my popup control gets locks or readonly.
some time parent page also
2007-12-18 at 8.23 am
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?
2007-12-18 at 1.55 pm
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
2007-12-19 at 6.46 pm
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
2007-12-21 at 5.16 am
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?
2007-12-31 at 5.22 pm
Great Work!
God Job!
Excelent Script!
2008-01-04 at 2.45 am
[…] Smoothbox, Thickbox for mootools […]
2008-01-06 at 8.44 pm
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.
2008-01-07 at 2.44 pm
Is there a reason why live validation from http://www.livevalidation.com doesn’t work if using the lightbox?
2008-01-08 at 8.32 pm
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!
2008-01-14 at 9.13 pm
[…] 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 […]
2008-01-22 at 6.31 am
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);
}
2008-01-22 at 6.31 am
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);
}
2008-01-23 at 11.48 pm
Thanks !..
2008-01-25 at 8.35 pm
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
2008-01-28 at 2.43 pm
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
2008-02-08 at 10.14 am
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
2008-02-08 at 10.28 am
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
2008-02-17 at 10.10 pm
Perfect !!
This saved my dayy
2008-02-19 at 1.31 am
Smoothbox (and Thickbox) are the best clones of Lightbox!
Thanks for sharing Mr. Popoff
2008-02-21 at 1.50 am
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!
2008-02-26 at 11.15 am
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?
2008-03-06 at 7.27 am
THE BEST SCRIPT forever and ever. Great!
Thanks so much!
El script es excelente la verdad te pasaste!
2008-03-08 at 12.34 pm
[…] http://gueschla.com/labs/smoothbox/ […]
2008-03-10 at 7.42 pm
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.
2008-03-21 at 9.15 pm
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
2008-03-26 at 9.46 pm
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.
2008-03-26 at 10.36 pm
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
2008-03-26 at 10.50 pm
tahir > Just add the embed element with any method (ajax, inline, iframe …), or use swfobject
2008-03-26 at 10.57 pm
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.
2008-03-27 at 6.15 pm
[…] Smoothbox : Smoothbox is the thickbox for mootools javascript framework. link […]
2008-04-01 at 10.32 am
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.)
2008-04-01 at 10.33 am
Just run TB_init() after you AJAX call.
2008-04-04 at 9.27 pm
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
2008-04-09 at 5.08 am
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
2008-04-12 at 4.11 pm
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?
2008-04-14 at 2.54 am
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
2008-04-22 at 4.24 pm
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
2008-04-22 at 4.33 pm
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…
2008-04-22 at 4.35 pm
Hey, I’ll look into this when I’ll have some time, stay tuned !
2008-04-23 at 6.07 pm
[…] image (les pinailleurs diront que c’est un lien… hem) : http://gueschla.com/labs/smoothbox/ (cliquez sur l’image sous “single image […]
2008-04-26 at 5.19 pm
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 !
2008-04-28 at 6.58 pm
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 !
2008-04-30 at 9.38 am
Any luck with mootools 1.2 ?
2008-05-01 at 2.25 pm
Hi, thanks the plug in is great.
a little question.
is it possible to use videos from myvideo.de ?
2008-05-04 at 7.19 am
Wonderful rewrite. Thanks…
IS THERE ANY WAY to pass a url variable to the page opened via iframe? No luck so far. (Thanks!)
2008-05-04 at 12.41 pm
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
2008-05-06 at 2.47 pm
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