ThickBox - One box to rule them all.
Update: 7/05/06
If you're like me, then your excitement is on a downward spiral as it pertains to the Lightbox technique. I'm not totally sick of the ongoing variations, but almost.
So with that said, why in the world would I be introducing ThickBox? (See the example, which is my own little twist on the Lightbox technique.) Am I a hypocrite? I hope not. My version of the Lightbox technique includes functionality similar to that of the Greybox technique. That is, ThickBox can show html pages as well as images. The html that is shown inside ThickBox is pulled from the server using AJAX (really AXAH). I would like to think that my twist is bridging the gap between Greybox and Lightbox functionality.
Before I get into what it does, I'd like to give a couple of reasons why I felt (and maybe you do too) a ThickBox type solution was needed.
- File size! File size! File size! Prototype & Scriptaculous can add upwards of 100k to a page unless you gzip the js files. I simply wanted a solution that was more light weight, than heavy weight. (Using the compressed version of Jquery, along with my ThickBox code, the total file size is around 20k)
- Lightbox made me feel like I was in a box. I wanted the ability to load (with AXAH) structural markup in the lightbox, as well as images. (A little slice of flexibility over here, please.)
- I needed a small abstract pattern for creating custom dialog boxes.
- And lastly, I wanted to demonstrate the simplicity and power of jQuery .
With my reasoning for creating ThickBox established, lets move on to what ThickBox does and why it's smooth like butter. (Smooth like butter = cool for those of you who don't speak Cody).
First off, why is ThickBox so cool? Well, because it's unobtrusive, simple to use, simple to implement, and more powerful then Greybox or Lightbox alone. Don't believe me. Let's have a look at what ThickBox does.
With ThickBox, and not unlike Lightbox in order to view a full sized image with a caption, all you have to do is create a link, add the image path (src value) to the link, provide a title value, and then give the link a class name of "thickbox". The link would look like such:
<a href="linktoImage" title="Add a caption" class="thickbox"><img src="linkToImageThumbnail" alt="Image" /></a>Now this is where it gets interesting. If you would like to view another html document inside a ThickBox, instead of an image, you simply provide a path to the html (or htm) file. To customize the size of the ThickBox, you supply the width and height on the end of the URL. The link would look like this:
<a href="linkToHtmlFile?height=size&width=size" title="Add a caption" class="thickbox">Link Text or Image</a>To see ThickBox in action make sure to check out the example. The ThickBox script handles the following file types.
- .jpg
- .jpeg
- .gif
- .png
- .htm
- .html
I can change the script if people think another file type should be added. Or, if you are js savvy you can change it yourself.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
Great stuff, Cody. I love the functionality.
I think .php, .asp, and .cfm file extensions should be added by default, just to help out the server-side folks.
Thanks for the solution – it’s a great one.
@Nathan – Thanks Nate, as for the extensions I would hope the server-side folks would avoid using specific server-side extensions on html pages sent to the browser. In a perfect world, in my head, the server should parse html pages for those specific server-side technologies. In most situations I would hope people would call a directory, and if not that then an html file. So with that in mind, I didn’t add them to the default, but I’m definitely on the fence.
Very nice! I can see this having some great uses for web apps – popup confirmations and such. I like the login example.
@Ryan – Hey man, thanks for the comment. I know how tempting it is to just lurk.
Truth be told, the dialog use in web apps will likely be what I use the code for as well.
Looks awesome, can’t wait to try it out.
This is great. Lightbox is growing and morphing everyday.
This is the most complete and compact modal window javascript I have seen so far.
Though one potential problem: I serve my images and pages without any file extension (RoR/CakePHP way). Got any ideas if this messes up the functionality ?
Looks like it’s not working in IE. That’s fine for us FF users, but about 90% of all web users still use IE…
Nice work Codey. Very nice work.
@Dennis & Tyler – Thanks guys.
@Casey – Sorry, it works fine in IE. Glitch on my part. Which I fixed. Sorry about that. If you grabbed the source already, you should update the CSS file and everything will work fine in IE.
Beautiful! Sheer genius! Quick question—I think it was asked above…can I still use this if I’m linking to a file but it doesn’t have an extension ala a content management system?
@Matti – Currently you can only include .htm and .html pages (This is easy to change in the JS.) Thickbox includes html blocks using AJAX. I’m not sure how one might include files from a framework where no file is called.
Very nice!!!! Contratulations :o) and tanks…
Cool.
I’d take it. ;)
Nice! Would be cool if there could be a way to cancel the loading screen though; on a slow connection you might get stuck waiting for the image to load.
@Patrick F. – Good idea, I can see that in the next version.
That is awesome, Cody! Nice work. I think I’m going to have to use this.
It looks there’s a slight bug using it on Safari. When scrolling the page, the thickbox content gets whited out from below. I don’t know if that’s a bug with Safari itself or not. Not a big deal though even if it’s incurable.
Dave, I’ve just noticed that slight bug in Safari too. Only seems to happen with the HTML thickboxes, not the images.
There’s a screenie here: http://www.flickr.com/photos/mmmmike/134436424/
the missing file extension was pretty easy to compensate:
$(“a.delete, a.move”).click(function(){
var t = this.title || this.innerHTML || this.href; TB_show(t,this.href +’/ajax/.htm?height=300&width=300’, ‘page’); this.blur(); return false;});
Dave L & Mike M. – I’m using safari 2.0 and not seeing any issues. What version are you guys using?
@Matti P. – Nice! Are you using Cake or RoR?
Cake. Pretty close to impossible to find hosting for RoR here in Finland. And I am too old to learn an new language :)
Brilliant, can’t wait to look under the hood for myself…well done.
Thats beautiful, great work cody! I will be sure to try this out on a few sites :)
edit:
How would i go about using it with dynamic php? I would love to use it for the prayer card section on a site im developing.
heres a sample of a listing:
http://www.wcmp.org/visitations/17758/Anthony-S-LeBoeuf.html
Great work homey! That’s definitely getting used as soon as possible.
P.S. I should be in B-Town in a few weeks, we should play some shuffleboard!
Just a quick observation. The submit button in your login form example does nothing. The lightbox stays open. Is that supposed to be that way?
I’ll look at the code and see if it is intentionally a stripped down example.
Silly me. No form tag in there even. Awesome work.
For anyone who asked about dynamic pages..
I believe the jquery load function works just find when using a php page as the source.
If you changed the section handling the “urlType ==” to allow for php/php3/php4/php5 as extensions then it should be easy enough to have your script serve up xhtml and insert it.
I am also fairly certaion that you can pass get parameters apended to the src url. The same script could be capable of being ajax or otherwise. I might play with having the ajah content in complete pages, perhaps server side by skipping that part of the template render if dynamic or client side – perhaps grabbing the body node somehow through the dom? Can I do that on remote content without loading the document somewhere? Hidden Iframe perhaps?
Call me crazy, but I can’t seem to find a downloadbutton for Thickbox. :-)
It does seem like an extremely light(box)version though… the pop-”in” loads incredibly fast compared to Lightbox, and doesn’t break. I found that with Lightbox2 the layout of the pop-in looked a bit flimsy sometimes.
Can’t wait to see it working in my own webby!
That reminds me… are you planning on making a Wordpress-plugin by any chance?
With kind regards,
Joram Oudenaarde
This is Wonderful!
Wonderful script, I’ll integrate it into my blog! Thanks for sharing it with us! :)
It seems like all the lightbox scripts only do something after following an href – is there no way to make the lightbox appear after clicking the submit button on a form? And then get the POST info mangled by some php which appears in the lightbox? :-/
Hi Cody, your thickbox is totally great.. though the name will take a bit of getting used to.
If you’re going to continue development on thickbox, why don’t you create a separate section on your site for it?
Thanks for the script!
This looks great.
I’m working on a little JS RPG game at the moment, and need something slick for popping up dialoge boxes and status screens – ThickBox will be perfect :)
I can see this being useful for several things that I’m working on.
Your script works great on the example page. I have tried to implement it on http://www.ellisweb.net/2006/03/google-finance-released/
but for some reason the functionality is not working. I have added the script references in the header, and set the link class to “thickbox”. Anything else you can see that I am missing?
Thanks
Looks very nice, one thing would make it even better:
If JS is disabled, you don’t get a valid html-page but just a snippet of code included.
For including html with ThickBox it would be nice to link complete html-files whith a kind of block marker being stripped by ThickBox.
Example:
[HTML]
...
...
[BODY]
[!—THICKBOX BEGIN—]
[P] here goes the content[/P]
[!—THICKBOX END—]
[/BODY]
[/HTML]
(replace the brackets)
Download?
Sweet piece of coding young man!
Frederic’s idea (comment #38) of marking the imported X/HTML files shouldn’t take much code to integrate using a nifty regular expression i.e.
It will actually take more than one regExp to do it as we are attempting to parse HTML content sandwiched betweend HTML comments (nightmare scenario)
The following will match everything after the<-- THICKBOX_BEGIN -->
content.match(/THICKBOX_BEGIN([\s]+)?(\/\/)?\-\->(.+)/g)[0].replace(/THICKBOX_BEGIN([\s]+)?(\/\/)?\-\->/,"")
But the result of this will have to be ran against another regExp that matches everything up until the<-- THICKBOX_END --> (or <-- TH if your feeling lazy)
You can check out what I mean by pasting this into the FF JS console and clicking the "evaluate" button:
alert("hello<-- THICKBOX_BEGIN //-->blah
blah<-- THICKBOX_END -->".match(/THICKBOX_BEGIN([\s]+)?(\/\/)?\-\->(.+)/g)[0].replace(/THICKBOX_BEGIN([\s]+)?(\/\/)?\-\->/,""))
Aaahh, Textile seems to have eaten half of the above regular expression and the grand finale of my comment, apologies…
Again, great work and a nice introduction to jQuery for the uninitiated.
@frequency decoder – You’ve got to love and hate textile. BTW – thanks for the accolades, means a lot coming from you!
@Frederic – Good idea, I was thinking alone these lines at one point but felt that the files being created for the ThickBox should be left untouched for the initial launch. I wanted to keep things simple and flexible for everyone. If that makes sense… I am however in agreement that it would be better to server the correct DTD and html elements to the browser when js is disabled.
@Yaakov – Do you have the style sheet in place from the example too?
@ Pierre Nel – Currently the functionality you mentioned is not possible with ThickBox, however I will give some thought in coming versions as to how one might invoke ThickBox with an input button.
@ Joram Oudenaarde – I do not see a Wordpress-plugin from me, in the future. However, you might see it from the community over the next couple of months.
@ Abba Bryant – Yup, no form tag…just an example of what can be done.
@All – I can add a zipped download of the example if that will help people…what do you all think?
Looks nice. I think I’ll use this on a redesign I’m working on.
Two questions though, the new version of LightBox can be used to group images. You can then click the “previous” or “next” buttons to go back or forward. Would there be any way of integrating previous/next buttons into ThickBox? (Lightbox does it via a rel=”LightBox[GroupName]” tag.)
Also, how would this work with a link that had more than one class assigned to it? Would it still work if the class was set to “Thickbox Bold Italic”?
ooh, that’s very nice!
any chance we can have more info on how to implement it for us, newbies? :”)
DOWNLOAD ADDED – People requested it, and others are having trouble extracting the code from the example so a zipped download of the example and dependant files were just added to the example page. (link appears at top of page)
Thank you Cody!
That helps a lot :)
Looks interesting. I downloaded the example files and was taking a look at thickbox.js.
I’ve never seen $ notation in javascript before – how does it work?
Great work Cody, I was looking for a Lightbox JS script that would allow me to easily use HTML pages inside the box rather than just an image, so you just saved me a lot of work (not to mention file size with Jquery).
One thing I noticed in IE6 though is that while everything worked fine, scrolling the browser also scrolled the ThickBox as well (whereas Firefox keeps the box centered in the browser window).
Hey Cody, great work on this! I wonder how PDF files would hold up in this? Have you consider adding that extension?
Hi! Nice work!
I am using tightbox for embedding html.
Under FF Win32 and FF Gnu/Linux the shading/modality only works if the document has scroll bars.
If the document has no scrollbars then the grey shade that visually marks the document as inaccessible flashes but disappears immediately.
So the user can open the popup again and again, the popups stack up.
Can anyone confirm this?
cu
Sebastian
@Jason – Take a look at Jquery. The use of $ is an abstraction of sorts from the Jquery code.
@Patrick Haney – Yup, IE 6 (all of them for that matter) does not like the fixed position on the ThickBox div. So in the css I serve up an absolute value for the position to IE. I’m going to try and tackle a solution for the next update. If you figure out a work around let me know.
@Josh – Well, a person could include a pdf in the block of html that is being pulled into the ThickBox. You would have to make the ThickBox rather large depending upon how you were thinking a person would view the pdf file.
@Sebastian – I am not seeing these issues on Win32 FF 1.5. As for Linux, I can’t check that. Strange, I never saw that issue. The overlay was always the most consistent part of the code.
A WordPress plugin has been created. (Thanks anieto2k) Get it here.
This looks great.
Is there a way to make this active from an image map?
Thanks
Amazing! Love it. Looking forward to the next version. Cheers
http://www.johnwiseman.ca
Has anyone figured out how to change the tab order to achieve true modality (sp?).
I have notfound a JS “modal” window that prevents the user from tabbing into the background.
The ideal behavior would be to allow a user to tab around in the modal window without returning to the backgrounded area.
Also, does thick box compensate for IE’s windowless select boxes? Or do they show through the modal window?
Cheers!
Am I an idiot? I dont see the download link…
I can’t wait to use this!
Re: Safari (2.0.3) and the whiting out of the text in an HTML box … It seems to happen when I scroll using the track pad method (two-finger) but it works fine if I use the actual scroll bars.
Other than that it works beautifully. And so much lighter than the other lightbox solutions I’ve tried.
Very nice, very smooth. I dunno if anybody else has asked, but will this have support for Galleries (multiple images) the way Lightbox 2.0 does?
Thanks for kicking something serious.
Added the styles, it is working now.
Thanks for the help and the great functionality!
I found a slight bug. When the loading indicator is spinning, if you click somewhere it breaks in a strange way. Just thought you should know!
Has anyone come up with the code for putting the Close button upper left so it will always be visible? I’m terrible with Javascript, so I haven’t been able to get that to work…
@Chuck – I can’t seem to replicate the bug you spoke of on FF win32 and IE. Are you using Safari?
I just checked ff on win and *nix and have not been able to get it to glitch as mentioned.
Also (being a jquery fan myself) have a mostly working patch the js that can allow you to perform $(“body”) selection on the returned src in the ajax .load function. (basically allowing you to return the entire html document and then select a portion of it from there for insertion.)
When it works right I will post a patch to the jquery mailing list.
Have you asked John Resig about this issue? He might have some pearls of javascript genius for us.
Have you thought about adding formats like .mov, .avi, .flv, .mpg etc?
Yeah I must be an idiot too.
Can’t find the Download link anywhere.
Download link should be backup now. Refresh.
Is ThickBox supposed to be modal? On any of the examples if I click outside the Thickbox it disappears and the overlay goes away effectively putting me back where I started. Thx!
Great job Cody. Like @Ryan said above, its sure will be useful in web apps.
It seems the jquery.js messes up the DWR javascript classes. So, DWR won’t work with thickbox.. Anyone experiencing the same problem?
I have a problem with IE. But concretely with tag select.
I put captures to you.
Firefox:
http://www.quakecult.com/download/confirefox.jpg
IE:
http://www.quakecult.com/download/conie.jpg
Is there any possibility to click on an Link in the Thickbox itself, and this Link is opened in the same Thickbox?
This would be very useful for web applications!
the grey background looks strange(not transparent and doesn’t hide all page[only visible part]) under opera/linux.
@Michael – No, currently Thickbox will allow the user to escape the content shown.
@Marcel Panse – Really, are you using the compressed version?
@Eourus – Yup, I’ll have to add a solution in the next realease for selects.
@Peter Rehm – I’m thinking about functionality similar to this on the next release. It would allow the user move from a Thickbox to another Thickbox.
@Maro – Yup, didn’t check it on opera/linux.
Thanks
@post #20: – I’m trying to link to a page that does not have a .htm/html extension. Where would you paste this code? TIA!
———-
$(“a.delete, a.move”).click(function(){
var t = this.title || this.innerHTML || this.href; TB_show(t,this.href +’/ajax/.htm?height=300&width=300’, ‘page’); this.blur(); return false;
});
———-
Is there a way to have thickbox open a htm file using a image map instead of a href link.
Thanks
Do forms in the thickbox actually work? A different lightbox variation also showed a form in the box in the demo, however in actual use there was no way to get such a form to submit correctly. Has anybody used forms successfully with thickbox?
Excellent work!!!
Is it possible to add a ‘close’ link manually besides the one that’s automatically generated?
Also, in regards to being modal, the outside content scrolls when the mouse is over it. That content should probably be locked while the thickbox is active.
@Mike – Well, yes. A form element can be added to the html calling (AXAH) the html block, or to the html block itself. Of course this is not plug-and-play type stuff. A good understanding of JS is required.
Works fine in Opera 9.0 TP2 =)
I’m loving it, thanks Cody :)
How do you make a slide show with this? Thank you!
On the Safari issue, I’m using 2.0.3 and I’ve got more fun details. :) I use a mouse with a scroll wheel so I tried using the scroll bar instead and had the same results. I also tried the two-finger trackpad scroll and page up/page down — same whiting out.
Not one to be beaten at troubleshooting, I tried everything else I could think of until I concluded that every method that defeated the wipe-out never works consistently. So…. good luck with that. ;) It feels like a Safari bug, not anything wrong with the ThickBox code.
Great work, I think I will use it soon.
Does anyone know how you would contain this in a div ?
I’m having a little trouble with the CSS. It’s conflicting with my site’s current CSS file since a lot of the selectors are the same: p, table, ul, etc. Is there a way for it to co-exsist with another CSS file?
@Burton – Only the styles that begin with TB_ are required. Change, delete, or add too anything else. Unless of course you want to change the styles I created for ThickBox.
I really dig this Cody. I found one quirk. If your jpegs have uppercase file extensions thickbox will not display them. The page goes grey but no image is displayed. Took me a minute to figure out why they weren’t working. I haven’t tried with png or gif, but I imagine it’s the same. Just thought I’d throw that out there in case someone else has the same problem.
@Aaron – Great catch, I in fact did not account for variations in the case of the extension. I appreciate you bringing it up here in the comments.
I have the same problem that the shading/modality only works if the document has scroll bars. But I’m on FF 2.0a1 build 2006042512.
Very neat indeed! And kudos to the evolution of the Greybox, Lightbox technique. :)
I’ve added it to my blog and without changing any code in between tries, sometimes it will work and then it won’t work (opens the pics in a new window), then it will start working again. Go wonder.
This is great!! Even works in internet explorer 6… Although any flash content on the content on the page appears above it?
Yes, working with maps would be cool too… ;-)
Hey, this is great. It’s so much smaller than the new version of Lightbox and the auto-centering features solves a bug that’s in Lightbox (when a picture is larger than the viewing window, the overlay doesn’t work). But here if the picture is larger than the viewing window, there are no scrollbars on the browser itself. Is there someway to turn them on?
This is great.Nice work Cody.
May I introduce “ThickBox” with my Blog for Japan?
(sorry. my comment is poor English.)
@Daisaku – Sure, use what you like.
@Mal – What browser are you using?
I’m using Firefox 1.5 both Mac and PC. The test page I’ve set up is at http://www.maljones.com/painting-koi-rhiannons2.html
Good stuff!
Played around with the script and example a bit and on IE 6, if you scroll down any and open a thickbox, the box is centered on the original view not the current view. So if someone had a link to a thickbox at the end of a page, the thickbox would load at the top. Whether it was visible or not would depend on how much they scrolled down.
Another good feature would be the option to resize large images to fit the view screen. Similar to Lightbox Plus.
This is really great Cody! I would also like to use it with PHP files but I’m not sure how to edit the JS to allow them. Can somebody either explain it to me or send me an updated file so I can use PHP files with it? Thanks
This is really cool and makes sense to use it for html as well.
Few problems:
1. On IE 6 – Sometimes upon refresh the pop up windows does not show and it ends up open a full size window. This is not happened on IE 7 Beta 2.
2. Again on IE 6, the window is not centered when/if the link is on the bottom of the page. It automatically jumps the page up to open the window. Lightbox had a similar problem and they fixed it on their 2.01 release.
But overall, this is a lot better and has greater funtionality.
Thanks for the work.
I managed through some CSS playing to have the content not be absolute, but now when the Thickbox is accessed on roughly 800×600 sized windows, the top of the image is above the top of the page.
Curiouser and curiouser. Almost there and still a great program.
First of all, thanks for this. I love the fact that it also loads HTML.
Two issues:
1) I want to load a page that contains an embedded Flash movie. Upon clicking my link, the modal window appears but the Flash movie does not.
2) Is there any way to ease the transition of the removal of the gray page overlay upon closing the window? The default transition is somewhat jarring.
http://scc04.servehttp.com/istudent/index.php
(Click the login link)
Any idea why the overlay is not working correctly in IE6? I Fixed it in FF using this hack:
html[xmlns] #TB_overlay {
z-index:100 !important;
width: 100% !important;
height: 100% !important;
}
but with IE that did not work. (Which is why I had to turn it into a hack for FF)
Any help or ideas would be great! Thanks.
Nice code! But I find a bug, maybe you can fix in the next version.
If the ThickBox was palced in some URL contain “html, htm, etc.” in the path, it will not display correctly.
e.g.
http://site/html/testtb.htmlwill not work.
I have fixed by my own change of the code, but I guess you would like to improve it officially. :)
cheer, thanks for you great code!
Just in case if some one else meet same problem as me, I paste the bug fix code here:
in thickbox.js:
change:
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm/g;
to:
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm/g;
—
Pls. notice this code is still not 100% correct, because a directory could be named as “xxx.xxx”.
Codey, this is really awesome – thanks for sharing.
Couple of newbie Q’s please. Can the opacity of the background page be changed – it’s too dark for my taste, and is it possible to add text to the title bar?
Thanks again
Apologies Cody – can’t even spell your name – great way to get a response !!
Try opening the thickbox img example in firefox with a window smaller than the image you display. There is no way to reach the close link. :(
Is there any way of making the window behind the content transparent?
Cheers
hey guys, i have the same problem in firefox – take a look at my gallery http://www.swordfish23.de/sw23/misc/ to see what the problem is -> if you resize to 800×600 and click on the first image you can’t reach the close button.
the problem is, that the imagebox has a “position:fixed” and when the image is larger than the viewport, the script is giving this box a negative left-value for its position.
if have modified the code a bit and in my local test’s it worked out for me:
js:
fixedleft = ((w – TB_WIDTH)/2);
if (fixedleft < 0) { fixedleft = 0; }
$(”#TB_window”).css({width:TB_WIDTH+”px”,height:TB_HEIGHT+”px”,
left: fixedleft+”px”, top: ((h – TB_HEIGHT)/2)+”px” });
css:
#TB_window[id] {
position: absolute;
}
well, i believe cody has a nicer lookin’ idea to fix that issue, but this is my general idea for this problem
@Gavin – Yes, change these values in the CSS.
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
@Graham Greensall – Title bar for html pages is currently not possible. I will work this into my next version.
BTW – See my response to Gavin.
@Robert Mao – Great feedback, and example. I will address this in the next release.
@swordfish23 – Yup, I’m thinking along those lines myself, but not sure yet. At any rate I will address the issue in the next version.
Sorry I meant the loaded HTML background transparency.
Cheers
Great Work!!!
I am wondering is it possible to do image set as lightbox js v2.0? If it can do that, I think I will change to ThickBox asap. lol~
Yeah… the one thing that is keeping me from switching from Lightbox 2.0 is the image set functionality.
I’m pretty sure that you can’t do class=”thickbox[setname]” because classes can not contain symbols.
Anybody get .swf or .mov to work in this yet? I can get it to play but when I click on close it forces Safari to quit. Also, if I try it in Mac FF it plays the audio from my movie but not the video. Any ideas?
Hey Cody, sorry to bug you again but did you get a chance to read my post earlier? [BTW. Great code you have come up with. We all really appreciate anyone who gives their time and effort into helping the open source movement. I myself will be one of them very soon. Anyways, this was my previous post but I never got an answer. Thanks again!]—-
http://scc04.servehttp.com/istudent/index.php
(Click the login link)
Any idea why the overlay is not working correctly in IE6? I Fixed it in FF using this hack:
html[xmlns] #TB_overlay {
z-index:100 !important;
width: 100% !important;
height: 100% !important;
}
but with IE that did not work. (Which is why I had to turn it into a hack for FF)
Any help or ideas would be great! Thanks.
@All – Today is my 30th birthday. So, I will likely not catch up with the comments posted here until next week. Sorry, and we’ll see you all next week.
Hope you had a great birthday.
Like #84 Amy, I too need slide show capability. Also, will Thickbox display inline div’s? I don’t want to create separate html files for the “small stuff.”
Am currently using both Lightbox JS (slide shows) and Leightbox (content from inline div’s). Would be nice to have one script that does both.
Hmmm. . . having a heck of a problem, which I assume to be CSS-related, with Thickbox on WordPress. Granted, this is the WordPress plugin developed by this guy, but I don’t know that it’s a specific problem with it being a plugin, exactly.
I’ve setup a test post here.
For some reason, it’s working dandy in IE, but not in FireFox, to my chagrin. Like I said, I assumed it’s a problem with the CSS, somehow, but if you have an idea how to get around this problem, I’m all eyes. Thanks, and thanks also for the great code!
OK, so you strip the URLs. Here’s the link to the test:
http://www.dragonflyeye.net/blog/2006/04/28/testing-thickbox-plugin/
http://www.dragonflyeye.net/blog/2006/04/29/testing-thickbox-plugin-part-deux/
Uh. . . Sorry to keep posting. Hope this doesn’t come across as spam, but I’m working on the issue and finding new things.
OK, so what appears to be the problem is a bit of code in my footer. I know it’s not your business to troubleshoot someone else’s code, but I’m wondering if you can think of any good reason that this code would be a problem.
The code is just a Performancing stats counter. When I remove it, the Thickboxes work fine. I’d prefer not to ditch this code, but I don’t know exactly what the problem is (I was lucky enough just to have stumbled on the problem as it was!). Is there any particular reason that JavaScript code inserted into the footer of a page would inturrupt the Thickbox thing? I cannot imagine why, but then I don’t know a whole lot about JavaScript in the first place.
I really appologise for the over-posting!!!
I’m working on the problem that DragonFlyEye.Net is having with the Performancing code. Right now from what I can tell, there seems to be a conflict in onclick events. I’ll try and continue debugging the problem.
Great script!
Like some other people, i have some problems with uppercase files. Working around it though. =)
Cody: What if I’m too “thick” to use Thickbox? What then?
All kidding aside, this is super slick man.
Oh, and Happy Belated Birthday wishes. Do you feel 30? ;)
Thanks for all the help everyone. I did some local testing here and it looks like swordfish23’s fix (I also applied that to a fixedheight) did the job. Tomorrow I test on a ton of browsers on PC.
I love it, too, but I want to use PHP as well. I hoped to use it with a contact form, but it will not work on PHP. I tried embedding the php in an html page, but no good, it came up blank.
What to do ???
Hello!
Great script!
But when using ThickBox with links to images, firefox can’t read title attribute value.
//add thickbox to href elements that have a class of .thickbox
var t = this.title;$(document).ready(function(){//when the document is loaded
$(“a.thickbox”).click(function(){
‘t’ is always empty,
while in IE it goes well.
Any help?
I’m needing to implement a fix similar to swordfish23’s, except with height (a little help, Mal Jones?). The problem is, I don’t know js. I thought I found the right place to insert sw23’s code, but I must have goofed, because it quit working altogether – just brought up the pic on a page by itself.
Of course, if the user has scrolled down the page a bit, I don’t want the top of the picture to be off the page… so thickbox isn’t quite there for me, yet. But I like its lightweight nature! I don’t want something as bulky as lightbox.js on my site.
I guess I’m eagerly awaiting the next release… or some more detailed help in the comments…
Great job Cody, I was thinking to make something like this, but you’ve done all the work for me :)
In case anyone needs to dynamically load a thickbox (eg you want to show it after an AJAX request rather than when clicking on a link) simply use the function:
TB_show(“test”,”ajaxLogin.htm?height=100&width=250”);
I’m trying to open a video in the thick box. Embeding the video and adding a title to it isn’t a problem, but I want the background of the thickbox to be black, not white. I’ve only been messing with this for a half hour or so. But if anyone can help me out I’d appreciate it.
@Rich: I applied the fix like this:
fixedleft = ((w – TB_WIDTH)/2);
if (fixedleft < 0) { fixedleft = 0; }
fixedheight = ((h – TB_HEIGHT)/2);
if (fixedheight < 0) { fixedheight = 0; }
$(”#TB_window”).css({width:TB_WIDTH+”px”,height:TB_HEIGHT+”px”,
left: fixedleft+”px”, top: fixedheight+”px” });
$(”#TB_overlay”).css(“height”,yScroll +”px”);
It goes right where you put swordfish23’s fix. I don’t know Javascript that well either, but it helped that I know Actionscript some.
I just saw that you said it stopped working. I’d say grab down a new copy of the .js file and check out the thickbox.js file at my site (www.maljones.com/js/thickbox.js). I also had to change the css some, so check out www.maljones.com/css/global.cs.
I’m terrible at explaining this stuff succiently.
The background overlay isn’t working on my Opera 8.51. It’s 100% opaque, with no transparency.
Great work anyways!
I’ve seen a few posts for loading php/flash and my solution was to create a page with just the code for an iframe in it sourcing to the file you want to load (tested with php but not swf).
example site – click the portfolio link:
http://www.metalandglass.com/test/
Great work, Cody. Alot of fun!!! I look forward to the next release…
I should’ve researched first before posting my previous (#139) comment – Opera 8 does not support CSS opacity at all.
I ran into a strange problem where it’ll remember the contents of the html file it loads (it’s not kept in cookies or cache, I cleared both). How difficult would it be to put a button on the top that would refresh the contents of the thickbox?
Disclaimer: I’m using an ajax request to pull the page with the thickbox links, using Scott’s method (#135).
Thanks, Mal. I grabbed your .js file, but the .css file link gives a 404, on both .cs or .css.
I’ll play with it a bit. Maybe I can figure it out now. :)
I am having a strange problem trying to load an .swf file through thickbox. I am able to play the .swf (a video) but in Firefox I cant use the pause/play buttons, and in IE the buttons work but once I click on “close” to close the window, the video closes but the audio continues to play until I refresh the page.
Anyone have any ideas as to what this might be? The .swf buttons working in IE but not Firefox is very confusing to me. I might also add a page refresh to the “close” button so the page refreshes and the audio stops when viewing in IE.
I forgot to add I am loading the .swf by embedding it into an .html file.
Rich: I renamed it thickbox.css inside of the css folder at maljones.com
Great job for this Thickbox. I use it on a site but I have some issues (same than LightBox). When I click on one of my ThickBox link too quickly after the page appear, the box don’t open, instead a new browser window appears. I believe this is a problem with loading time for the js libraries. But anyone know how to force some kind of script to have a ‘wait until loading finish’ on the page. Check this example to see if you got the same problem http://www.developers.ie/event.aspx?s=46 (click on the Register button on the top right).
holly freaking god…
i was totally looking for something like this… you, my friend, have saved me a lot of time… thanks so much
Huh. I thought I submitted this comment already…
Thanks, Mal. For some reason, though, it seems to be working fine without the updated css file. So I think I’ll just leave a good thing alone. :)
Happy birthday…Mine was on May 1st!
I’m having a problem with my styleswitcher (the one using cookies to set a white and a black style) not picking up the new style in the .htm file pulled up via Thickbox. For example, on my website (click my name) there is a “Comments (#)” URL, click that, and note the light style of the thickbox. Then change the style to black (on the upper right) and click the comments link again, still the old style. Even deleting cookies, emptying cache, etc. All to no avail! Safari handles this perfectly, but for some reason this problem crops up in Firefox. Thoughts?
I’ve a problem of auto-centering when the ThickBox is open in IE6 at the bottom of the page.
Click the link below for the example:
http://www.sistelsrl.it/networking/net_passivo/accessori-armadio-pavimento.htm
and click
“Terminale KVM 19” con monitor 17” LCD, tastiera e touchpad”
When I click the link, thickbox is open at the top of the page, without auto-centering. Why?
Cody: AWESOME job. This is a beautiful piece of work. I hope you had a great birthday.
I was having the same problem as Ryan (#121) with FF, but his solution works like a charm! I still can’t get the overlay to work in IE though.
I’m messing with it here: http://gentleproductions.com/test Click on WORK and see how I’ve used it for my t-shirt design portfolio.
Again, AWESOME job. Thank you so much!
Fantastic script Cody! I love the additional functionality and control over lightbox and greybox! Great job!
While my Javascript skills are novice at best, I can’t seem to figure out how to fix IE not auto-centering when opening a Thickbox from a link below the fold of a page. Anyone have any luck on this? I’ve tried to see what the Lightbox script does to fix this issue but I can’t seem to get it working in the Thickbox script.
Thanks again!!!
Excellent job, Cody! Just a quick note to those of you who also use jQuery elsewhere on their site. It seems that if you use the packed jquery.js (downloadable from jquery.com), there is a glitch in the slideDown of images, where the thickbox momentarily displays all the way to the right hand side of the screen.
View an example at http://jdrewitt.com/photos/tbox_js_glitch.php
The quick solution is to use jquery.js from the thickbox example.
Happy ThickBoxing.
Hello. Thanks a lot for a realy handy script. I´ve found a real simple CSS solution for making IE display a fixed div, thus making the thickbox auto-center in an working perfektly in IE to. Follow this url for the solution:
http://www.cssplay.co.uk/layouts/fixed.html
@Mikael – I actually tried this with the example (quickly) and did not get it to work. Do you have a version that works in IE?
I also played around a bit with it and at first i didn´t work but now I have a version of the same files as in your download that do. The files are a bit messed up as I did it in a hurry and tried som other stuff to and im sorry for the lack of comments in the code but I´m shore you will figure out the changes I´ve made i the CSS and the index.htm
preview: http//www.animare.se/thickbox2
download:
http://www.animare.se/thickbox2.zip
@mikael – Nice work, I see where I made my error. Solution even works in IE 5.5. However, currently you get another set of scroll bars in FF.
Hm wierd, i didn´t notice that before. I’m about to implement your fabulous script in my portfolio site and somehow the problem dosn´t apear there. I can’t seem to find a connection as to why i don´t get
dubble scrollbars there. But then again i am a designer and not much of a coder so i usually use my basic actionscript knowlage and the good ´0l trial and error method. But I’m shore you’ll figure were the catch is.
http://www.animare.se
@Graham Greensall
change the line 57 in thickbox.js to something like this:
$(”#TB_window”).append(“”caption“Stäng”);
then i will display the value of the links title attribute in the thickbox titlebar.
This is just a basic idea and you´ll have to style to make it look good.
Oopps! The whole line wouldn´t display… anyway. add the variable “caption” in the html code for the titlebar in line 57 preferably somewhere before the close-link
Awesome! Great work, I love what you’ve done. I’m going to be using it on my site soon to serve as an info box for some things.
Again, thanks a lot!
Two questions.. (Im unsure of what type of licensing this is under)
1. Is there a way to remove the fade effect and just have it go to the shade? I don’t really want the animation, but if its unremovable thats fine.
2. I cant seem to get rid of the right padding or margin in the CSS. Would you happen to know which ID this is under? I removed the left padding and set it to 0, Id like to do the same for the right but It doesnt seem to have any effect with the margin/padding in every section.
Having an issue with the page being loaded not reading cookies. Anyone else have this problem? Across Mac browsers, Safari picks up the cookie no problem, but Camino and FF seem to overlook any javascript call to read cookies. Gecko-based browser problem?
To be more specific, it won’t pick up 2 types of cookies I have, one to remember contact info on my movable type form, and the other for styleswitcher, remembering a previous stylesheet (white/black).
Just a suggestion,
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php/gi; var urlType = url.match(urlString); urlType = urlType.toString().toLowerCase();I modified Thickbox to resize images that are too large for the viewport. You can see it here: http://www.christianmontoya.com/2006/05/08/thickbox-plus/
Oh, I forgot to mention, I hope I correctly honored your copyright. Please let me know if I did anything wrong.
@Montoya – Nope, nice work, I have no copyright share and share alike.
Originally posted by John: Played around with the script and example a bit and on IE 6, if you scroll down any and open a thickbox, the box is centered on the original view not the current view. So if someone had a link to a thickbox at the end of a page, the thickbox would load at the top. Whether it was visible or not would depend on how much they scrolled down.
Is this something you plan to address? Unfortunately, as beautiful as this is, I won’t be able to use it with a “bug” like this one.
Interesting idea!
I had testing it, and for some reasons, the effect won’t work.
The full image i’m linking to from a thumbnail loads up just like usual when it’s pressed. Any ideas?
I have used Thinbox in http://keith.hostmatrix.org/location.htm, but after seeing this Thickbox, the latter is much better.
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php/g;
var urlType = url.match(urlString);
and
if(urlType '.htm' || urlType ’.html’ || urlType == ’.php’){//code to show html pages
Replace this to use ThickBox with php.
I´ve tested it and it works!!!
Cody Congratulations for this amazing JS.
Greetings from Argentina.
@buda – Thanks, and glad you commented with the correct change.
This is a very nice script, but there are some bugs in IE:
if you click on black transparent div while loading is shown the div is hidden, but the loading is still displayed until the image is loaded in the background
then when you click on little image again, two big images are displayed.
and there are some problems with margins in IE with some images (I can’t explain it)
Still this is a great script and with her I start to use jquery for js scripting on my page
good work
Wooot!! Thank you Cody for a great piece of work. I know it’s been asked before but can anyone explain how I can load a .swf into the thickbox ?
lapster mentioned a method calling an iframe but I’m not sure about how to do that.
thanx again!
tim0fee
So would it be possible to do a bit of a mashup and use Veerle’s ‘Flickrness’ section and still use the thickbox for previewing?
Hi,
Great work cody! Just in case anyone else was struggling with this; When loading html content containing an image into the ‘thickbox’, the image appeared with a border that looks odd with some images. Easy fix, – in the global.css, look for the ’#TB_window img’ class and remove the border attributes. The image then loads into the thickbox looking nice ‘n’ clean..
Easy!
@Mikael
Thanks for the suggestions #160/161 re titles – much appreciated
@Cody
Hope you had a great birthday – 30 seems veerrry young from my perspective :) Thanks again for sharing Thickbox – great piece of work.
re #174
I figured it now ;-) which was probably better than someone telling me how to anyway!!
Thanks again for a great tool Cody.
tim0fee
Hi all. I am rookie hack who is a bit stuck incorporating this into a website. I have used lightbox successfully (and easilly) but can’t get my thinkbox to function. Do i need to do anything different than what I would to get lightbox to function (include the script types and a link rel in the header, and duplicate the examples from your website) ???
@Buda
There appears to be a few issues with the changes you made to the script.
One of them is that you don’t actually check for HTML or HTM pages (urlType ’.htm’ isn’t a valid check). Also, the single quotes you use may have been copied incorrectly. The problem with this is that pasted across to a text editor like wordpad, which will accept different styles of quotes, they won’t work. IE, the difference between ’ and ’.
My suggestion would be to use the following code.
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php/g;
var urlType = url.toLowerCase().match(urlString);
and
if(urlType '.htm' || urlType ’.html’ || urlType == ’.php’){
This works correctly and also lowers the case of the extension to prevent problems which causes problems (IE, .JPG to .jpg).
P.S. Please can you make the comment box a little bigger? It’s ridiculously small!
No, it seems that it’s the site which has a problem with different styles of quotes and double-equals (==).
Apologies.
Cody: I noticed that the version of jQuery you included with the Thickbox demonstration is not compressed. Would it work fine with a compressed version?
@Montoya – Yes, but not in safari currently. Or I should say my version of safari (2.0 (214)). This is the only browser that does not like the compressed version that I am aware of.
That’s interesting, thanks for letting me know.
I should mention that I updated Thickbox Plus. The link is the same: http://www.christianmontoya.com/2006/05/08/thickbox-plus/
@Montoya – Again, nice work. I’ll have to play catch soon. If possible, send me a link to the implementation when you are done.
First off, well done on the script.
I’d love for you to add the feature from lightbox where you can create a set of “boxes” using the syntax class=”thickbox[setname]”
That would allow me to show a series of related information in an easy way.
Excellent script, keep up the good work!
Dale
is there any quick fix for the following problem? its really annoying and prevent me to use such a great tool. please someone give me a good news!!
—————————
Comment Posted by Loni2Shoes on May 8, 03:15 PM
Originally posted by John: Played around with the script and example a bit and on IE 6, if you scroll down any and open a thickbox, the box is centered on the original view not the current view. So if someone had a link to a thickbox at the end of a page, the thickbox would load at the top. Whether it was visible or not would depend on how much they scrolled down.
Is this something you plan to address? Unfortunately, as beautiful as this is, I won’t be able to use it with a “bug” like this one.
Is it in some way possible to print the content of the box that appears? The normal print function (in firefox) ignores it as it is outside the regular page source but perhaps it’s possible to specifically print the box itself by adressing it specifically using JS? A “print” button (preferably optional) next to the close button would work very well. Any suggestions as to whether this is possible and what code would be necessary.
Hi there,
Is there a piece of code within the CSS or JS that I can tweak so that I can change the HTML background transparency of the thickbox underneath the content. Not the main background with transparency already, that covers the whole page once the thickbox has loaded.
Cheers.
Cheers
instead of having the user to click on the link to show “thickbox” how can I show the thickbox as soon as the page loads?
Gavin, you can also apply transparency to other elements. You’ll see 3 lines in global.css in #TB_overlay. You can copy these to #TB_window for example and adjust the settings as you want them, e.g. opacity=90 or 0.9 to slightly reduce the opacity of the thickbox to allow the background to slightly shimmer through.
Anyone figure out how to use this with a “Ruby on Rails” link_to? I’ve tried many different ways and it seems to always get stuck at the loading graphic. Pointing to a .htm file in /public works but that kinda defeats the purpose of using rails.
|| THINKBOX INSIDE THINKBOX?? ||
Is it possible to launch thinkbox via a html file that includes thinkbox???
I have thinkbox working fine in html#1, so now I wish to launch html#1 from html#2 by ways of Thinkbox. It is launching, but less some page content and script function. Could this be JS conflict, or have I just source= incorrectly in my tired state of mind?
// ERROR IN previous post //
html#1 is LIGHTBOXED, and I am trying to lauch that through html#2 which is THINKBOXED. Is this possible?
If so, will Lightbox run inside Thinkbox ???
Thanks for this beautiful code. I don’t know how you guys come up with this stuff…
See it in action:
http://www.pingpongmusic.net
Can I do image transition every x seconds with thickbox?
thank you
Can’t seem to get Quicktime properly embedded and playing within a Thickbox in Firefox or Opera. Working just fine in IE and Safari. Anyone have any tips to share?
@Gale: I’m sure you can.
@Dan Atkinson: is there any example ?
This kinda works but it makes everything have transparency within the TB_window. I’m after just the background being transparent, not the content loaded in.
Cheers for your help so far.
RE: Gavin, you can also apply transparency to other elements. You’ll see 3 lines in global.css in #TB_overlay. You can copy these to #TB_window for example and adjust the settings as you want them, e.g. opacity=90 or 0.9 to slightly reduce the opacity of the thickbox to allow the background to slightly shimmer through.
This is some really great work. I already plan to deploy this script to handle a function on the gallery portion of my site. However, like others who’ve posted before me, I’m plagued by the IE problem that keeps the thickbox window above the “fold” when position a link deeper on any page. You mentioned that you’ll fix that problem in the next update. May I ask you to share your best guess as to an ETA for your next release?
How hard would it be to darken only a single div in an existing window, and have the thickbox inset window automatically center within that div wherever it may be on the page? Essentially to make the thickbox apply to a div rather than the body of the parent window? Is there a straightforward mod I can do to make this happen?
Thanks, I love the code!
W hat modification to the code has to be done, that loading image is shown and not loading animation?
Hi –
I was wondering if there is some trick that I’m missing. Following the example
This opens the .aspx target page, but no dhtml effect. I am using a masterpage. I’ve tried linking:
global.css
jquery.js
and
thickbox.js
This opens the Items.aspx page, but no dhtml effect. I am using a masterpage. I’ve tried linking:
I think that the javascripts and css are not being properly included because of the html header section is in the masterpage, not the derived page that I am trying to get the thickbox behavior in. I’ve even tried to programmatically include these files at runtime in my Page_Init(). Have a look:
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
Link3.Href = “Effects/thickbox/css/global.css”
Link3.Attributes.Add(“rel”, “Stylesheet”)
Link3.Attributes.Add(“type”, “text/css”)
Page.Header.Controls.Add(Link3)
Dim Link1 As HtmlLink = New HtmlLink
Link1.Href = “Effects/thickbox/js/jquery.js”
Link1.Attributes.Add(“language”, “JavaScript”)
Link1.Attributes.Add(“type”, “text/JavaScript”)
Page.Header.Controls.Add(Link1)
Dim Link2 As HtmlLink = New HtmlLink
Link2.Href = “Effects/thickbox/js/thickbox.js”
Link2.Attributes.Add(“language”, “JavaScript”)
Link2.Attributes.Add(“type”, “text/JavaScript”)
Page.Header.Controls.Add(Link2)
End Sub
The javascripts and the css do show up in the html source. I’m just a bit confused. Wonder if you have any insight from your apparent success.
This post addresses my previous. Disregard. My own lameness was to blame. When debugging in VS2005 (using Cassini), the IDE inserts the project name in the URI. Was assuming a normal path when calling in the javascripts. Works great! This code rules, Cody!
@ post #79 – I have forms working beautifully on my thickbox. eventually going to move from .htm to .php on those pages since I like all of my pages to be php, but that’s for later.
I am having a bug experience in Firefox (gasp!)....I checked on a windows computer with a much higher resolution than I design for/on, and the overlay only covers 100% of the content, not 100% of the window. So when my coding ends, the overlay ends, leaving a chunk of white space below it. Any way to fix the 100% from the code to the window on this bug? I can give a screenshot if need be.
Thanks again for the great code, I’ve gotten lots of compliments on the implementation of it and intend to give you credit on my ‘about’ page. Thanks again for anyone who can respond about this quirky FF bug. (might also just be a CSS problem so feel free to check out the code for that)
http://www.eightyfour.net
This won’t work for me unless I remove prototype AND moo.fx from my page! Any suggestions to fix?
Hi
How can i use background-image thickbox?
I don’t wanna use overlay
Thank’s
Hey very nice work, but i need help, i call a page via ajax, and in this page have an image, but thinkbox dont work, i think maybe is beacuse the script dont parse this “new” image how i can do to call again the script?
Sorry for my bad english
FYI – A ThickBox update is coming soon.
Oh good stuff! An update!
Thanks, this is a great resource!
seems there is a problem when using link set by innerHTML:
document.getElementById(‘div_link’).innerHTML = ...
It seems that it doesn’t work with asp drop down lists (.net 1.1). The drop down list remains available. Any idea how to get around this?
Hi. This is great. The only thing is that sometimes it´s not working for me, when I´m putting the links to the images in the middle of a page with a load of content, inside several divs.
Instead of working it follows the link as a normal image url, but if I move the same link to the top of the page it works. Weird, isn´t it?
That is happening on FF 1.5.0.3, the same page on IE 6.0.2 it´s working. Any help?
Hi Cody, I think thickbox is great, but I have a little problem.
I took your demo, and included the latest version of prototype before jquery and thickbox, and it breaks in win xp FF 1.5.0.3
Here’s a link to the error:
http://ihasolutions.com/thickbox_error.jpg
Since I haven’t done that much coding in my app yet, I’ll probably remove prototype, as nice as it is.
Nice code, works like a dream in FF-1.5.
Unfortunately it kind of crashes in IE-6.0, either before it shows the picture-box or when I try to close it.
Look here: nikolai.overdalsveien.com/
If someone has an idea, I’m interested.
It doesn’t look like it’s the CSS, but rather something in JS, which unfortunately is waaaay beyond me…
Tnx
\fredM
wow!!!! this is really cool!
Its very easy to use once you understand how to apply it, I am quite a novice at web design.
If you would like to make this more user friendly to all of us novices out there I would suggest to give a 1. 2. 3. instructions.. including when and how to download and unzip file.
I tried lightbox out right before finding thickbox, and your right, download times are soo much faster! Love the functionality, and text option!!!
Is it possible to override javascript alert and confirm with thickbox? Is there a way to do this?
Thanks,
Thomas
I’m having problems when using thickbox together with DWR. When I remove the jquery.js file, everything works fine again, except thickbox of course. Is there any one having the same problem and found a solution for it?
@Marcel Panse: I’ve noticed your comment (#71) and it seems you’re having the same problem. Did you manage to get it working already?
Fine, but if I must use tag html in the box?(table, tr,td and other?)
This is great, you really saved my day! Tried both Lightbox2 and “Lightbox goes wild” but wasn’t really satisfied with the result. This, on the other hand, works like a charm! Once again, thanks.
Keep up the work!
All of this is just a bite from SubModal!
Try out the original…
What if I already have html page to display?
How I can use html text instead of url to show?
Thanks.
Anyone have any ideas for making this work on an image map? I am succesfully using the thickbox on various parts of other websites, but I am having trouble getting it to work on an image map:
i think you should add flash support (.swf files) so we dont have to have the swf in another page (i have an idea on how to do this)
I think this is pretty great. Personal i hate javascript, so I’m glad someone else is doing the hard work… :)
On problem though, in the regexp math. If I’m linking an .aspx file, it matches the .asp extension.
But besides that (it works fine anyway) this is cool. Good job
I’m getting some strange behavior with images and HTML. For images, the thumbnail is displaying below the large image in the modal window. For HTML, in this case an object tag (for Flash), the modal window fits perfectly in Safari but has scrollbars in IE6 and Firefox.
Also, in IE6, the Flash movie continues to play even after the modal window is closed.
And, in IE7 the link to HTML content goes to the HTML page instead of loading the modal window.
See http://harrylove.org/2006/05/09/harry-discusses-the-new-domain-name
This worked great for me, I love the extra control it gives over the size and position of the Thickbox.
One thing I’d really like to see added is the ability to have the Thickbox be a div set to display:none in the HTML.
I’d like to use this for a contact form and really would rather the form be a part of the HTML in the page for accessibility.
I am on Firefox 1.5.4 and the bottom lare image doesnt look right with screen resolution at 1200×1024
Thought I did just let you know…
great script will put it to good use in some of my projects. Thanks for you work!
Hi. I´m new to this…when mouseover the thickbox, I can se the code for “title”. Don´t want that. What to do? Thnks a lot
Just fyi, a couple of bugs reported over at jQuery blog: http://jquery.com/blog/2006/04/24/thickbox/#comment-474
Great!!!!! I think I will use it on my site.
Thanks, man. =]
Does anyone know if there is a way of solving the following problem: When viewed in IE all Flash objects in the page are displayed on top of my thickBox pop up. I want the popUp to be at the top level (above flash objects)
Thanks
Hi,
I want to use TB to display a HTML file with an image-map and tooltips appearing on several areas. Unfortunaly when the HTML is displayed the tooltips doesn’t function. I’m using the Interface plug’in (for JQUERY)for the tooltips. Is there a solution? Thanks
Just wanted to let you know of a little work around I created. If you want to use TB on a page with windowed elements (such as select boxes) in IE- you need to add another layer behind the overlay to cover up the windowed elements otherwise they will show through the overlay and the dialogue box. The solution I found is to create an iframe with a z-index immediately bihind the overlay layer and set the iframe’s width=100% height=100% and alpha (or opacity for FF) to 0. Thanks for the great code.
-c
@Chris – Clever, I like it…thanks for posting this work around.
Can ThickBox be used in conjunction with a livesearch-like function, so that the contents are dynamically updated via a xmlhttprequest??
Great modification. Is it still under the Creative Commons Usage Agreement that the original Lightbox was under?
Apologies i think i got the impression this was a modification of lightbox. Anyway my question still remains, what is the license agreement for this script?
How do I install this?
thanks so much. it’s just what i wanted but didn’t want to spend the time figuring out by hand just now (!).
Great work,
when I load and html file embeded whit some flash content, the flash does not appear, what is the fixe?
An i forgot one question, I´m trying to use TB inside you AHAH code and dosen´t work, it opens the image in another page, is this a conflit of code, I trie too whit ajax tabs from dynamic drive and the error is the same.
regards
Hi!
Just a question regarding select inputs in ie and Chris’ iframe workaround.
I’ve added an empty iframe to the $(“body”).append function.
CSS style for this iframe is exactly the same as for the overlay except all 3 opacities are set to 0 and z-index is 99.
However select inputs are still visible. Am i doing something wrong? Any ideas?
do you test if the css is loaded in your js ?
if so, that’s a very good idea, but maybe you should make an installation manual for dummies like me O:)
How do I install this? :(
I second the request for lightbox 2 “groups” forward and back through images plus the ability to open a box, then open another box from the original box.
I got the same problem with jquery and dwr as Marcel (#71) and Hans (#219)
@Marcel and @Hans – anybody has a solution, most welcome…
I am using the compressed version of jquery.
Just wanted to thank you for the thickbox, great utilisation of jquery!
I have a problem when displaying a html file in IE. Form some reason the ul is not displaying correctly. My style sheet, linked or embedded, has: ul {list-style-type:none;} li {list-style-type:none;} but it displays the lists with bullets. They also have a bottom margin of 10px that does nothing! The a and a:hover attributes are working fine. Any suggestions?
This is just wonderful man, very classy!!!!
:o)
Nice! just that, nice! hehe
Does anybody figured out how to display flash inside thickbox?
Anyone figured out how to overlay flash-elements?
Once the pop-up appears, the flash objects don’t grey out like the rest of the screen…any ideas?
Anyone has experimented problems with cache?I mean, you have to reload two times the page for thickbox works fine.
found it out:
To have the box overlay your flash animation simply set wmode to transparent before exporting it (or add to your html code)
found it on your “update” page, thanks to “faitesvousunnom”!
read more about it here:
http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_15523
ThickBox offers some really useful additions to both Greybox and Lightbox. However, it still does not support inline divs, the one thing that stops me from implementing it. If you want a newer alternative that does just that (and quite a few other things besides), see Ahmed’s IBox: http://www.ibegin.com/blog/p_ibox.html.
@mrrena & Everyone – Inline div functionality has been added to ThickBox. You’ll see it in the next release.
That sounds great—thanks!
I am running thickbox on a page that also has flash files playing on the page. When I click to display a large image the the flash appears over the top of my enlarged thickbox image.
I have tried using z-index’s in the CSS to move flash layers underneath the thickbox image but it didnt work. Can anyone suggest how I get the thickbox image to appear OVER my page and the flash files?
thanks
oops never saw the post above
great work. i hope it works with .php files
Please me help. IE input select is not below photo windows. z-index no accept.
Can this be modded to recognize PDFs? Considering you can view PDFs within FF and IE would be great to throw into thickbox with the loader.
Will this work on a Div Overlay on myspace..?
Can anyone tell me how I can have the JS load before all the images load?
My problem is I have lots of thumbnails, if someone clicks the thumbnail before they all load they get taken to a blank page with the image as the JS doesn’t have time to kick in.
:(
@ Everyone that would like to make their own close link.
Try this, onclick=”TB_remove();”. Add that into the link.
PS. Great script!
Cody, have you considered adding a “is css enabled/working?” check in the js? With css disabled the script should not get run. Currently it does, with pretty bad results …
Just a thought.
Thanks for all the time and effort put into this. It’s appreciated.
Just curious, what is the main reason for using Class=”thickbox” against using what would be recognised as a better method being REL=”thickbox”
Would a future release have this option?
TIA.
Andy
I also would like a way for this to work in Ruby on Rails. I have tried some ugly hacks, like removing the type-matching and just allways going for html content, but still it gets stuck at the loading graphics without any errors in the js console…
When I click on one of my ThickBox link too quickly after the page appear, the box don’t open, instead a new browser window appears. I believe this is a problem with loading time for the js libraries. But anyone know how to force some kind of script to have a ‘wait until loading finish’ on the page.
this issue only happens in FF for mac and PC
thanks
Getting ”$ is not defined” error from thickbox.js
also is there a way to keep the div active it a user clicks the grayed out area?
@LouBBOS – Not sure why you are seeing the js error. I don’t see that on my end. As for the click on the overlay…just remove this code: $(”#TB_overlay”).click(TB_remove);
I can’t get this to work with a php file. Is that right or is it just me?
And what about LightBox’s functionality allowing to group related images?
#272 Comment Posted by diego
I’m getting the exact same error on my site as diego in #272. I can’t get it to happen on the example page though, so maybe this bug only appears on more complicated pages?
Terrif script though Cody, it’s very cool and very nice, and I just hope you can reproduce the error yourself.
@Gonssal – Its coming…
@Jane – If you look at the demo, the link to a Thickbox with no scrolling content is calling a php file.
@diego – Are you using the new version of jquery?
I also have this problem of inputs displayed over the image in IE!
I would use thickbox if it wasn’t of this problem.
Thanks for the help!
This is great, and a lot handier than the standard lightbox!
Downright sexy!
Really cool, though I’d really like to see the option to stay in the ThickBox when you click a link or do a form post.
Also, can you call the ThickBox via a form post in the parent window? It would be nice if I can pass parameters to that window via hidden fields instead of a query string through a regular link.
Thanks!
Hi, this is awesome!
Only thing is, is there a way to avoid conflicting styles without re-doing all my stylesheets? The html page I am linking to has to have styles but they are conflicting with the parent page styles.
Great Work!
I am interested to know how I can pass parameter at the new window: how I can do that?
Can you put the thickbox on a swf ???
Hello, I think that is very great code!! Although I have a problem: I am spanish and the pages that I show in thickbox has accents and other signs: when I show it inside thickbox, instead of this accentuated letters, it shows interrogation sign (?). Do you know how can I solve it? Thanks a lot!!!
It doesn’t work with Konqueror. When I tried it with Mozilla it did of course but I believe overLIB is a more flexible tool. http://www.bosrup.com/web/overlib/
Hi Cody,
FYI, there are 2 #TB_load selectors in the style sheet included with the downloadable example. Great work with all of this.
-Stephen
@Stephen Halsey – Thank you, and nice catch.
Thanks for all your good work for this script. I’m putting it to use in a Plog I’m building.
It works perfectly in IE but in Firefox, there’s a flicker on display, and my pngs won’t load unless they are already in the browser’s cache.
http://www.kdpublish.com/artwork/index.php?level=album&id=1&page=6
Hi Cody,
Great work on ThickBox. I am loving the ease of use.
I am by no means an expert with scripts so this type of thing is wonderful to be able to access.
I am having a hard time getting external sites to open in the ThickBox however. I was able to get a relative link to open. I get the dreaded white box & red X.
Thanx for your advise…
Jennifer (#290),
I had the same problem with Firefox that flikers. I’d say try the last version of jquery instead of the one provided with thickbox (but I got a new bug with the latest!) or try this:
Change, in jquery.js:
———————
// Get the current size
z.cur = function(){
return parseFloat( jQuery.css(z.el,prop) );
};
———————-
for
——————-
// Get the current size
z.cur = function(){
z.el.style.visibility = “hidden” ;
var res = parseFloat( jQuery.css(z.el,prop) );
z.el.style.visibility = “visible” ;
return res ;
};
——————-
Use this at your own risk! But it seems to work for me! Hope this help.
Great job. This is awesome. One thing I can’t nail down yet. Is there a way to just use onClick to call thickbox? Thanks.
First, great work. I love it.
Second, when linking to another directory, Thickbox doesn’t seem to work. For example, I have a file with the script in the root directory but if I link to an HTML file at video/whatever.html it doesn’t load. (Safari gives a question mark for the embeded quicktime file and FF goes straight to the html file, not in thickbox but the QT file works) If I move the whatever.html file to the same directory as other file (in this example the root directory) everything works fine.
Is there a way to fix this?
Also, in Safari, the audio from embedded quicktime files do not stop playing after closing thickbox.
Interesting concept, but if I could give a friendly critique, the transitions are very choppy. It was like trying to a view an animation at 15 fps versus 31 fps. I’m not sure if that’s an issue with this script itself, or simply the examples provided.
I might have solved my previous problem (minus Safari still playing the audio) but now it just sticks on the loading screen. Even when I use the example from your site uploaded straight to my server.
my two problems are found at
http://www.jpegjames.com/thickboxtest.html
&
http://www.jpegjames.com/thickbox-2/
(the second one being the example from this site)
Is there something with my server that I need to set???
Excellent work! I like the inline DIV portion. I use it for displaying announcments on my site. I’m not all that swif with JS and maybe I’ve missed something, but, how do I stop the text from being centered in TB?
Thanks
Disregard the last psot – my bad. Checked my CSS and found the culprit.
Any idea when the lightbox look-alike slide show will be avaialble?
@John Newton – Soon, very soon. I have a working version.
Great job, but I’ve a problem with the italian letters like “à ò è é ì”, when I show them I don’t see the letters but ’?’ .
Where is the problem?
thanks a lot
Hi!
This is a wonderful script. I want to use it on my site, but it contains a frame. In the frame I have a gallery, but I want to apply the script to the whole screen. Can somebody help me ?
Thanks!
Daniel
The examples look really impressive, however I think I might have found a bug: when I include a link in a page such as:
[a href=”test.htm?height=150&width=300]Test[/a]
And ‘test.htm’ contains the only following:
[p]Hello World![/p]
I get a page that places the contents of ‘test.htm’ and the bottom of the page but infinitely increases in height when you try and scroll to the bottom of the page!
Thanks
Ian
Great Work!!! I added the slideshow functionality:
http://www.thespotskate.it/galleria.asp
With a simple script based on Jquery and Ajax calls I replace dinamically the html of divs. If someone is interested ask me. Only one issue, sometimes lightbox doesn’t fire when I click on links… Any solution?
Hello, how i can set when page is load, to open pop-up window with image with thickbox. Thanks.
help me… here my senario.. the link is inside a i frame. when i click on the link i want the thick box to be shown on the top window.. how can i accomplish this??? thanks in advance
@Perko – you can call the thickbox function TB_show onload.
Great little alternative to lightbox. Any chance of just loading a div into the thickbox or even JS to dynamically write the div? I am doing a bunch of CMS dev and do not really want to load external HTML files. In the end I am loading a Flash file that loads an image.
Nevermind. I see this works in the release. Great job guys. What is the license for this? Do ya’ll accept donations?
For those having problems when displaying thickbox in Firefox: the iframe created to hide selects in IE is what makes it fail (or at least it stopped failing when i removed it). If you have no select tags in your page (or even if you have), delete the iframe tags in the $(“body”).append() method in TB_show function.
Cody, i’d like to know if you are working on the slideshow implementantion (and releasing it soon) or should i write it.
Sorry for double comment, but needless to say, if you need help implementing the slideshow thing, send me an email.
I tried the fix by gonssal and it ‘kind of’ works. What I’ve noticed is that when the image to be loaded is already in the cache, it always works. But if I clear my cache it hangs up.
Tried the fix above, and now the first time I click an image after clearing my cache, it hangs up. I abort and then click again and viola!
Then there is the wierdness of the link sometimes acting like it doesn’t have the ‘thickbox’ class assigned to it. I noticed that when my page hasn’t completely loaded then I get that behavior, if I wait a sec, til the whole thing is up, then it works like a charm.
I’ve duplicated the first weirdness on your demo page.
Hope this helps!
Firstly, great functionality you have here cody. I typically work with prototype… but thats an easy fix with a little code reworking :), and i tend to avoid Scriptaculous as i feel its too bulky for minor functionality (at least with general projects), so I like the smaller animation substitute you use here.
I have just noticed a minor bug though with Firefox 1.5 / Opera 9 (with the biggest problem in Opera 9).
There doesnt seem to be any measure in place for the “less-savvy” internet users who double click. In IE6, the problem doesnt “appear” there (but that could just be luck me not noticing it). In FF though double clicking opens a closes the overlay instantly, whereas Opera seems to want to launch 2 versions, which then never close properly without a page refresh.
(the tests I ran were with the picture of wyatt).
While I haven’t yet sat down to work on a proper solution, I would think it would involve disabling the onclick functionality of the links after an initial click and re-enabling it after the overlay is closed. A reference of the link itself could be passed back by the closing action with a method to re-enable the link disabled by the reference… anyway just a thought until I get to look into myself.
Also, on a separate note, for any users having problems with the iframe method, as long as you JS knowledge is decent, then you can always hide the IE-specific code (which is what the iframe code is) with conditional comments. e.g:
/*@cc_on @if (@_win32 && @_jscript_version>4)
this is only seen by IE!
@end @*/
I use this kind of “hack” for a few functions that I have written (that use a very similar iframe hack for IE) and each one works perfectly (for IE as well as FF/Opera etc)
OMG Cody.
Ubelievable.
How do I donate you some money for such an awesome effort??
@gonssal – Thanks for the offer, but I already have it working. Should be out soon.
cool script. how do i get it to play nicely with lightbox v2? my guess is that both are using an onload call, but i’m not a js pro. it might be as easy as this, , but i don’t know what the right onload function(s) are for your script. your script works, but now the lightbox script doesn’t (just opens in another window). can you help?
very nice modal window. i already implemented thickbox on my homepage (ever changing ;-)).
I got a question: let’s say i would like to open a new brwoser window FROM a tb window. My thought was of having the url i wish open in a span with display: none. But how do i get a new elements content and append it net to the TITLE on a new thickbox?
This looks very smart, thanks. One thing I thought I’d mention. I tried a modded script that grouped images which I know you are working on. However if used with images in a table it would only group the rows, not the whole table. Just something to look out for. Thanks.
Its beautiful and everything. How do I get it to react to “lightbox” though? Instead of ‘rel=”thickbox”’ I want it to work for all the old posts as well where I used ‘rel=”lightbox”’. Thanks.
Hi Cody,
i implemented your thickbox ‘component’ into my homepage. thanx ;-))
Very nice. I am using lightbox for my gallerys but have a contact form that I want to put in a thickbox but I am experiencing the same problem as Ian in comment 302. When I took the iframe init code out I see my box but as soon as I scroll it disappears and my page grows exponentially. The farther you scroll, the farther down it gets. I have a hunch it is a conflict in the css. I commented out pretty much all but the TB_ styles and it still does it. Any ideas?
Stephen
I have found the problem. The Thickbox code is being written to the page as html entities. I have no clue why it is doing this but I am sure it is the problem. Any ideas how to fix it?
Stephen
Yes,I think it*s great. With ThickBox it will be possible to get a new experience of interactivty.
Thanks a lot !
Greetings from Germany
I cant get the new “documents” to have black as background color, any idea why?
No longer works with FF. Any thoughts?
Version 1.5.0.5 WINDOWS XP – didn’t work with earlier version either. I have taken off all FF extensions as well.
Has anyone seen this error when implementing?
o.getAttribute is not a function
Let me rephrase, has anyone encountered a problem using thickbox inside a pop-up browser window? That is where I see a getAttribute error.
Thanks
Very, very nice application. But there is always a ‘but’. I want to open a page via thickbox and show a Google Map but the page isn’t showing. Can it be that the javascript used by the Google Map page doesn’t work in thickbox? Do I have to place the javascript in the mainpage or something?
Thanks for the reply!
Cody – (i’m an idiot! seriously) are there issues using thickbox with pop-up calendar calls? can’t seem to get it to work and we’d really like to use it as part of a project… if you want we can past the script, but have hit a wall with this and the ability to use pop-up .js calendar call within…
puh-leaz help!
I have a random strange behaviour in FF. When you click a thumbnail to get the modal window, not always it loads the new image.
Something to do with a tiomeout issue? I
Hi, I have been looking at using this for one of our work sites (quite high traffic ~ 1M page views per month).
However in IE 6 on both our dev machines, the thinkbox JS crashes the browsers entirely (needs task manager loaded to kill the process). In firefox and safari it works fine?
There is no other JS on the page so I am a bit confused! I am using TB 1.2.
Oh yeah, it works in IE7 beta 2 as well, but not IE6!
I am using .aspx page that uses a master page. The problem is that when i click on the tree items in the tree, thickbox does not work for the firsttime. It does work for subsequent clicks. What could be the problem.
Hey, awesome script…
Got a couple questions:
1) I’m calling ThickBox from an AjaxTabsContent script from Dynamic Drive. This script calls in the loaded html’s css via a ‘rev’ tag. Can ThickBox do the same?
2)Can an image be used in place of a caption?
Thanks!
So… is there any way to pass parameters to a URL intended for a TB_iframe??
e.g.
a href=”add_edit.php?&TB_iframe=true&height=600&width=300&userid=2&page=101…etc…” class=”thickbox”
doesn’t seem to work…
@Dizzle
http://codylindley.com/thickboxforum/comments.php?DiscussionID=11&page=1#Item_0
Nice work. I really like the thickbox.
Nice work. Has anyone found a method to display (compare) two separate images side-by-side in a single frame? Is there an existing implementation of this that I haven’t seen?
Thanks in advance,—Mark
Mark – try putting the images into a .htm page and call that using Thickbox.
Top program Cody! I’m using it in my long overdue rebuild.
Hi Cody, love this work of you! And with a small enhancement from “Pure Essence” I don’t even have to change all those image links (http://pure-essence.net/archives/2006/08/20/thickbox-20-auto-detect-image-links/ ).
But (there is allways a BUT) I not only see the image, the corresponding thumbnail is also shown. Curious thing, cause this only happens, when the page is fully loaded.
Any hint for me?
Much impressed by thickbox and have used it to create an image gallery. Wanting to add fairly long comments to images but it messes up the postion of the close button. Have tried playing with the CSS but no luck. Is it possible to remove the close button entirely (it doesn’t seem that necessary). I’m using Thickbox 2.0
Yeah, Thickbox rocks, but I’m having issues with it and the Google Maps API Javascript. I’m trying to troubleshoot it right now, but if anyone has any input it would be great.
Hi, just came across this.. wonderful..
1)will the issue with opening urls with parameters be fixed in the next version
2)when is next version out?
Tnx alot mate
Is there a way to have a page load with Thickbox already activated. I’d like to have a Flash play in Thickbox with the rest of my page grayed out right off the bat. Then the user can click X and browse the site. Is this possible?.. and if so how?
Thanks!
Great job. This is awesome. One thing I can’t nail down yet. Is there a way to just use onClick to call thickbox?
HI, i understand this is great work, but of course… i’m using FF1.5.0.6 on a mac g4 laptop running os10.4.7, and the example demos aren’t working – all that happens is the bottom scroll appears and the more I click, the more space becomes visible to the right. strange, huh?
Hi! Great work, thanks!
In the interest of shaving bytes off the script, I’ve rewritten the image resising part to this: http://phpfi.com/151123
I think it looks cleaner, and it’s a bit smaller :)
I had the same question as Stephan… I would like to initiate thickbox onload.
I’ve had some users that accidently hit back on their browsers when trying to close the thickbox (instead of hitting the Close Button)... is there a way to make it so the user can click back on their browser and it’ll close the browser (or make it look closed by simply loading the initial page without the thickbox on it)?
Thanks and I love the script… wish people would notice the close button hehe
If you try to pass the name of an image file in the query string for an HTML page, this will prevent the whole system from working.
For example, if you want to display the following HTML file in a ThickBox:
/somedir/someFile.php?id=9&filename=DSCF009.JPG
Thickbox will wrongly assume you’re trying to display an image, rather than an HTML file.
To fix this, see line #39 of the thickbox.js file, where the filetype is determined.
I modified it as so:
if(url.indexOf(”?”)!==-1) //If there is a query string involved
var baseURL = url.substr(0, url.indexOf(”?”));
else var baseURL = url;
var urlType = baseURL.toLowerCase().match(urlString);
Is there a way to have thickbox displayed when you move your mouse over a link instead of clicking?
nice! really!
Looks good. thx!
How about a ThickBox, or Lightbox, with Rounded Corners and a drop shadow? =)
I posted a tip for anyone that wants to use thickbox to display quicktime content on my blog: http://coderhythm.com/blog/?p=7. Without a little work, the movie continues to play after the thickbox closes on Safari.
I posted another tip for anyone that wants to use thickbox to display quicktime content on my blog: http://coderhythm.com/blog/?p=7. This one deals with getting Safari to play the movie as soon as thickbox loads the content.
I’ve use lightbox and now want to graduate to thickbox. My problem is this. I’m using the thickbox to call in a page that has a flash movie embeded in it, but i’m calling the box from an iframe. When i do this the thickbox generates within that iframe. Is there a way to break the thickbox out of the iframe so it displays the content across the full browser window and not the inset iframe?
These code is unusable in INTERNET EXPLORER. Every time I click on one of your thickbox my IEXPLORE.EXE process gets about 50MB fatter, past 5 or 6 clicks it turns unusable.
Scottua, don’t use iframes and instead use an include in php or whatever it is in asp.
Safari osx Bug Found.
I am using a js to load a swf to a div for eolas.. maybe not an issue..
but the flash on the main page shows through the thickbox window..
I like this software and I was able to implement it with no problems but I have two questions.
1. Can the prev/next links be positioned on the top of the box in an absolute position (centered)? That way they won’t change location when the box size changes and users can quickly click through if they wish without having to continuously ‘find’ the link.
2. I have no javascript abilities (that’s why I’m using someone else’s code hehe). Is the ‘animations’ code that was removed actually removed or is it merely commented out (as in I could easily enable it again. I think fades or resizing would be nice.
Thanks for a great piece of software!
I read a comment here by pasamelo claiming that iexplore’s memory usage increases dramatically with every click. I checked and I too am seeing a big time memory leak. Every time the overlay is created iexplore memory jumps approx 14mg. When the overlay is closed, instead of releasing the memory, it jumps up again… approx 2mg at close. Once an overlay is created you can click next/previous with no change in memory but you will very quickly run out of memory clicking and dismissing pictures.
i’d just like to ask why thickbox is not supported by FF browsers prior to version 1.5? thanks
Cody – great code really. I used the ‘InLine’ module for Flash objects and HTML and seems to work smooth in Win IE/FF/Opera (except strange border in HTML arround images). I wonder if it’s possible to Combine the ‘InLine’ with ‘Gallery’ module to enable easier navigation – I am using it for flash portfolio and it would be more friendly to preview the samples as consecutive links rather than in open/close/open close drill:) Cheers.
I found a problem with firefox sometimes not showing the background overlay transparency if there was no scroll bar. Firefox would not set window.scrollMaxY and window.innerWidth, so the script would fall back to use document.body.offsetHeight for the height which would be 0px if everything on the page was positioned leaving the body element without anything to render.
Fix is as follows (is only a small edit but works):-
function TB_overlaySize(){
if (window.innerHeight || window.innerWidth) {
yScroll = window.innerHeight;
xScroll = window.innerWidth;
if (window.scrollMaxY || window.innerWidth) {
yScroll = yScroll + window.scrollMaxY;
xScroll = xScroll + window.scrollMaxX;
}
var deff = document.documentElement;
var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
xScroll -= (window.innerWidth – wff);
yScroll -= (window.innerHeight – hff);
} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
xScroll = document.body.scrollWidth;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
xScroll = document.body.offsetWidth;
}
$(”#TB_overlay”).css({height +”px”, width +”px”});
$(”#TB_HideSelect”).css({height +”px”,width +”px”});
}
I was having to deal with conflicts between jquery.js and prototype.js. I’m only using a few functions from prototype.js, so I decided to use pt.ajax.js, which is a lightweight version of prototype.js. The $ function of pt.ajax.js conflicted with something in jquery.js. I fixed the conflict by editing pt.ajax.js and renaming the $ function to “plem” (or anything else that would reasonably work). I would not suggest this if your code uses the $ function in prototype.js.
hello,
is it possible that IE don’t show the active-x warning message?
If you’re dealing with a lot of ajax calls in your pages, using thickbox might become a little tricky. With my project, once my ajax content is loaded, I have to re-parse the document (by manually calling TB_init) to update links in the dynamically loaded content. If you call TB_init twice over the same content, you can end up transforming your thickbox links twice. To avoid this, I modified TB_init like so:
function TB_init(){
$(“a.thickbox”).click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
$(“a.thickbox”).removeClass(“thickbox”); // I added this line…
return false;
});
}
thank you, but this do not help.the warning massege in ie appear as usual. i have only html content on the page
lol the problem is fixed :-) the massege appears only local, on the web not
If it free to use thickbox for commercial use?
Great stuff.. better as other versions.. thnx for your work..
those of you looking for a solution to have thickbox work with area maps, just add the following code:
thickbox.js:
(...)
$(“a.thickbox,area.thickbox”).click(function(){
(...)
on your html page add the class “thickbox” to all your area elements
Ported ThickBox 2.1 over to MochiKit, for those interested:
http://jasonbunting.com/blahg/PermaLink,guid,297d24b0-f5e8-47d1-82e2-1804133fc6bf.aspx
I get errormessage: “Permission denied to get property Window.nodetype” when I use Thickbox on Firefox. Both 1.5 and 2.0.
Any recommendations or solutions?
Best regards from Sweden!
Kind of problem on Windows/Opera9
After loading image, it is shown but not so smooth as in iexplore or firefox. I mean that effect while showing image, not the image itself.
But anyway – great work.
Small question regarding the licence: it mentions both the MIT license and the GPL
So: is ThickBox explicitly dual-licensed and can I choose which one to apply to my usage, e.g. the more commercial-friendly MIT license?
Absolutely stupendous work.
Problem: I see some extra spaces besides the CLOSE link when viewing in IE 6.0
Here’s the JPG link which I captured…
http://ismaili.amin.googlepages.com/THICKBOX.JPG
Question 2: I want a auto close from my form to be made.
Scenario: E-mail signup thickbox auto closes, once successfully send e-mail, else should remain on screen.
I use IFRAME method to display ASPX pages.
Any idea on this?
So does anybody have a solution for the problem with the google maps api?
Guys,
i’m using Thickbox with a php site which is working fine when i call the link manually.
My problem is that the Thickbox should called automatically when my site in which i use the box is loaded, what means that i need a solution like (body onload=”loadTheThickBox”) , but i found no way to solve this problem, any idea?
I try to play a mpg file in the overlay…it works, but after I click [close] the overlay is remove but I can still here the sound of the movie
>>>I get errormessage: “Permission denied to get property Window.nodetype” when I use Thickbox on Firefox. Both 1.5 and 2.0.
I’m getting it too! Can’t figure it out for the life of me. Anyone have an answer?
Same problem: “window.nodetype”
Hey Cody,
Loving thickbox, but i’m having a weird problem in FF: http://poseidon.diywebhosting.ca/~wwwshou/thick.jpg
as you can see, the overlay is cutting off at where the footer/last div is. If i put a overflow:scroll in the body css, it works fine, but adds horizontal and vertical scroll bars.
Strangely, it works fine in IE!!!
b
If you have a problem in IE where the dark overlay appears somewhere up the page (if you’ve scrolled down the page a little), here’s a quick hack that provides a kind of fix.
Add the following to the end of the TB_position() function:
$(”#TB_overlay”).css({top: (arrayPageScroll[ 1 ])+”px”, height: (pagesize[ 1 ])+”px”});
It’s jumpy if you scroll the page, but it seems to work in my IE and Firefox.
Nice stuff on the script, btw.
any solution for the firefox issue?
ref: Permission denied to get property Window.nodetype
I get it too when I try to integrate it as a blog plugin.
baffles me completely. Works fine on the demo’s on this site.
When I will have my design on disk, I will implement there jQuery, jCarousel and of course, Thickbox, because it is amazing and very light script.
If it free to use thickbox for commercial use?
Great stuff man!
Just one remark:
In thickbox.js (in a version I downloaded yesterday) there is the line
$(“body”).append(”<div id=‘TB_load’><img src=‘images/loadingAnimation.gif’ /></div>”);
This implicitly assumes format and location of the loading animation image, the latter being always relative to the html page location. This won’t work where pages are distributed across several directories (unless you put an “images” folder with the gif in it all over ;))
Graybox, for example, uses a javascript variable to store the location of the image, which can be set differently in different contexts (i.e. in different pages).
A more unobtrusive approach may be to first check whether there already is a <div id=‘TB_load’><img …>, and use it if there is one.
You may also combine the two.
Cheers, and have a happy new year :))
— Zoran Isailovski
Me again… ;-)
After thinking it over, I would probably prefer something like
<link rel=“TB_LoadingAnimationImage” href=”...”>
to specify a page-specific loading animation image.
As you might have guessed, I’m trying to avoid having a
<script>TB_LoadingAnimationImage = ...</script>
in a html document. Am I overly puritanistic in this respect?
Really awesome. Thank you for sharing your hard work with the masses.
If loadingAnimation.gif is specified as a background image in the thickbox.css file instead of being inserted using the image tag, it can be referenced with a relative path instead of an absolute path. This would simplify installation a little bit, separate content and presentation, and give some other benefits of using a relative path.
Is there a way to make thickbox work from a hotspot on an image? I’m a .js newbie. All works except link goes to html page not a thickbox
Nice resource, I have added your link on www.ajaxshack.com
I am using this snippet to allow for area (image) map use:
Thickbox.js:
(...)
$(“a.thickbox,area.thickbox”).click(function(){
(...)
But this does not allow for the “gallery” function of Thickbox.
Does anyone know how to add the “gallery” option using the ‘rel=“gallery-name”’ inside an area tag?
Love your script Cody…. keep it up!
Any ideas on how to use thickbox + POST form data at the same time…
Problem: when using POST form data and calling a Thickbox page that then forwards to a seperate landing page (where the POST data needs to be passed) I get an error:
Error: uncaught exception: Permission denied to call method XMLHttpRequest.open
in Firefox and this error:
Security Violation
in Opera….
After scrolling and reading through the whole comments on this page, is it correct for me to conclude that Thickbox can’t go hand in hand with Prototype (without considerable amount of code changes in either) ? I would really like to use TB, but I also need to use Scriptaculous and Behaviour. Any idea ?
Cody, thanks for all your effort to bring this. Hope you had a good New Year.
Ok, I guess I didn’t scroll ‘deep’ enough.
For the benefit of anybody there who wants to use Thickbox (JQuery) as well as Prototype family (Scriptaculous etc), please read the followings:
http://codylindley.com/thickboxforum/comments.php?DiscussionID=354&page=1#Item_0
http://jquery.com/docs/PrototypeAndJQuery/
very nice resource..
I was worried about printing images loaded in the thickbox, with a javascript print command, not any more. Just right click print them in IE or firefox.
Note (@jakob#188 above)
Get the “Print Image”
extension to have the right-click functionality added to firefox https://addons.mozilla.org/firefox/531/
You’ll soon forget that it didn’t have it before.
A javascript print link would still be handy… anyone?
thickbox&jquery… very very very nice job both
Really cool widget, I have a question, I need to add a button in an iframe that closes the TB, I’ve tried loosing focus, but no luck.
I’ve implemented a layer drag’n‘drop idea on my website using javascript and div layers. When i move a layer it seems that the opaque background doesn’t appear anymore when you click on a ThickBox link, any idea how to sort this? Really cool widget tho.
Hey Cody, this is a really cool piece of code, I’m a learning web developer that has bitten off more than he can chew and someone told me about this so I’ve implemented it on my asp site and, even though I still know diddly-squat, I’ve managed to not only get it working but customise it so it looks how I want it to on my site… Anyone interested, have a look at www.wellingtondining.co.nz/test and do a search for “Sahara Cafe” and check out the menu and photos (just silly test photos and data in the photos page at the moment for implimenting this). Once I’ve completed testing it’s going on the live site www.wellingtondining.co.nz !! Thanks heaps for such a useful bit of code… Anyone got any more improvement suggestions for my site then give us some feedback – like I say, I’m learning as I go and probably making lots of terrible beginner site mistakes you pros could tell me off for! lol ;-)
Excellent Widget.. I am using it in my travelogue site for Images :
http://www.wheelsandroads.com
Realy work.
Im translate with text to russian.
Thanks from Russia
Has anyone been able to get thickbox working on a Mac 10.4, with Firefox 2?
If so, can you please post what your fix was?
It’s not working on Konqueror (last version, 3.5.6). A blank page overlaps everything. I tried playing with CSS’s z-index but couldn’t get it working.
I included html tags into the title (links and br)
and, seems like, the thickbox height is wrong in Firefox.
Any ideas?
http://www.featurepics.com/Thickbox/Image-Gallery.aspx
IE – just perfect!
I’ve make a port of Thickbox for Mootools.
I thought it would be cool to have it working with Mootools.
I added a small opacity effect when the window shows up, and on scroll.
Here is the project homepage : http://labs.gueschla.com/smoothbox/
I’m using ThickBox (and another jquery tool, J-Tip) on my site, and for some reason when I access it from a computer outside my network, ThickBox and J-Tip don’t always work. I often have to refresh the page a few times before they work. Any ideas? My html validates.
Hello,
Thickbox is very great! But how can i open an Thickbox with the HTML-button-tag?
I’m trying something like this:
[button name=“zoom” type=“button” class=“thickbox” style=“background-color:transparent; border:0px;” alt=“Vergrößern” value=“1” onClick=“window.location.href(‘http://mysite/mypic.jpg’)”] [img src=”../pix/button_lupe.gif” ]
[/button]
But it doesn’t work?? Whats wrong with the syntax?
Thanxx for Help!
Same problem with Mac Firefox. Gray background is cut to the size of the image and not to the screen itself. Opera, IE, Firefox on pc, all work well!
I used a work around for the problem with flash objects displaying over thickbox.
In the thickbox.js file I added the lines:
$(“object”).hide();
$(“embed”).hide();
into the thickbox show function
and then added:
$(“object”).hide();
$(“embed”).hide();
into the thickbox remove function.
Because TB darkens out most of the page, if you design your right, it’s hardly noticable.
Correction.
The second set should be:
$(“object”).show();
$(“embed”).show();
My bad.
Hello, can any one tell me why this works in ie 6 and firefox but not ie 7.
e-mail me please if you have an answer mike@newspin360.com
http://demo.newspin360.net/echocanyon_tb/Tour_echo.html
Cody,
I’ve managed to rip out ALL my sparse head covering trying to get ‘Thickbox’ to work to a Blogger-uploaded image. No luck so far.
You can take a look at: the example post at
http://terrysplaypen.blogspot.com/2007/05/picture-displays-101b.html
and if you have ANY suggestions I would be ‘over the moon’.
Thanks.
Re: my comment at #418
I found the little gremlin. The URL being called was something like:
http://bp2.blogger.com/ . . . /s1600-h/mypic.jpg
Turns out that the ‘switch’ (at least I think it is a switch) “-h” in the URL was not allowing the image to be shown. By removing the switch I’ve now managed to have Thickbox work as it is designed to.
Next challenge is to find where I can point Blogger (blogpost) members for the relevant ‘js’ files if they can’t be uploaded to Blogger itself. But that’s not much of a problem as I am pointing them at my static site, and I manage to keep up to date with the changes!
Thanks for reading.
Can some one please look at post #417 I have the three links on the bottom of html using thick box for my contact and map and send to friend.
Works great except for IE 7. Please help need to use it right now.
http://demo.newspin360.net/echocanyon_tb/Tour_echo.html
Is there a way to prevent thickbox.css from changing the default padding and margins? or how can I restore the default paddings and margins back once thickbox has been setup?
Hi, first of all i really love this Thickbox Script , it’s still awesome!
I have a small problem maybe anyone can help me:
I’ve tried to open a ThickBox window from a link in a google map bubble – but that’s not working. Any ideas why or how to fix that? Thank you very much.
I happen to be using a different AJAX on my SourceForge project (linked above), and it loads pages into a DIV. Thickbox works on the normal page, but it won’t work on the div where pages are loaded. That’s the problem because… Well, one of the pages which is loaded into the div is the only one using thickbox, and it needs it.
Is there any way for it to go outside of that div?
I’ve been reading and experimenting with no luck of my own. So I come looking for guidance. I have a website with a few products I sell on it through paypal. Currently whenever someone clicks my Add to Cart button i have it opening in a new page/tab. I would love to instead have the paypal cart page load into thickbox though. I just can’t figure out if it is possible how to call it.
Any suggestions? ###CODE###
form target=“paypal” action=“https://www.paypal.com/cgi-bin/webscr” method=“post”
input type=“image” src=“https://www.paypal.com/en_US/i/btn/x-click-but22.gif” border=“0” name=“submit” alt=“payments”
Sorry for the double post. for some reason my comment got cut off
First off all. Awsome script. I use it all the time. My problem is if my url contains get variables the size of the dialog is ignored. I am using the hiddenModalDialog example.
For instance:
somescript.php works fine
somescript.php?var=thisvar
with get var thickboxes will be bugged and ignore my height and width declarations
let me know if it is fixed
I would love to know how to get a .swf with video to work!
Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings.
When clicking a thinkbox link in content loaded via an AJAX call the thickbox link content displays the HTML markup.
If I include:
$(document).ready(function(){ tb_init(‘a.thickbox, area.thickbox, input.thickbox’); });
in the AJAX file the thinkbox will work in FF but not IE, if another thinkbox link is clicked on the same page though the thickbox will be initiated again and display twice.
Has anybody got thickbox working nicely with AJAX generated content?
Thank you orixilus for your coding. I already add that code, and it works!
thanks again.
———————-
those of you looking for a solution to have thickbox work with area maps, just add the following code:
thickbox.js:
(...)
$(“a.thickbox,area.thickbox?).click(function(){
(...)
on your html page add the class “thickbox? to all your area elements
Also getting the error: “uncaught exception: Permission denied to call method XMLHttpRequest.open” on both Mozilla 1.7.8 and Firefox 2 on Windows XP SP2. The files being called are on the same server within the same directory, so they shouldn’t be seen as external files. Four other people who have posted comments also seem to have the same problem. Any idea what the issue is with this error message?
I found a way to show the box on page load.
I added the following to the head of the page:
<script language=“JavaScript”>
<!—
function showBox()
{ tb_show(“Important message”, “box.php?KeepThis=true&TB_iframe=true&height=400&width=600”, false);
}
—>
</script>
Then changed the <body> tag to:
<body onload=“showBox()”>
At least if worked for me in Opera.
Hi all. Was wondering if you can pass variable from parent to child (thickbox).
Example: (using IFRAME)
I use the A href to call an ASPX page (I also insert additional variables that I need on that page, so I have the usual setup parameters for the thickBox but I have a few of my own as well, i.e. an ID for example)
but when I try and use any request variables then is nothing in them. Any suggestions.
I’m sure a few people have asked this but I am unable to find an answer.
I need to use Thickbox, but I would like Lightboxes prev/next button functionality.
Has anyone managed to do this yet?
Hi Cody. Great stuff. I’ve been using the prototype window library up to now (http://prototype-window.xilinus.com/) but I’ve recently found a few problems with it. Your approach seems to offer the same functionality but in a slicker, more compact format (and hopefully one that works properly). ;)
I’d like to update some content on the page FROM WHICH the thickbox was launched (i.e. the original page), as a result of what happened in the thickbox. With the protoype window library, there are callbacks you can hook into for OK/Cancel, so that you can fire off an ajax request. Is there a tried and tested technique for doing this with thickbox?
Hi, thanx for your work!
I use the thickbox on my blog. It works very fine.
I have got two questions. How can I translate the text (Image, next, prev, close) in the thickbox?
How can I allign the thumbnails on the page of my blog( http://www.lafebbre.ch/2007/09/02/nadia-e-ale/ )?
Sorry for these silly questions but I’m not really a programmer…
Thanx for your time.
Albert
Hi,
Is somebody how can tell me how to refresh the calling page when closing the thickbox “popup” ?
Regards.
- phil –
What I did to refresh the page when the thickbox was closed was, in TB_remove() function, I added another function “TB_closeCallBack();”.
............
function TB_remove(){
$(”#TB_imageOff”).unclick();
$(”#TB_overlay”).unclick();
$(”#TB_closeWindowButton”).unclick();
$(”#TB_window”).fadeOut(“fast”,function(){$(’#TB_window,#TB_overlay,#TB_HideSelect’).remove();});
$(”#TB_load”).remove();
// call back
TB_closeCallBack();
return false;
}
function TB_closeCallBack(){}
............
And in the page I use thickbox,
function TB_closeCallBack(){
window.location.reload(true);
}
Channa
Channa,
I am attempting to implement what you said and I am unable to ge tit to work. I added the code to the thickbox.js file:
..........................
function tb_remove() { $(”#TB_imageOff”).unbind(“click”); $(”#TB_closeWindowButton”).unbind(“click”); $(”#TB_window”).fadeOut(“fast”,function(){$(’#TB_window,#TB_overlay,#TB_HideSelect’).trigger(“unload”).unbind().remove();}); $(”#TB_load”).remove();
// call back TB_closeCallBack(); return false; if (typeof document.body.style.maxHeight == “undefined”) {//if IE 6 $(“body”,“html”).css({height: “auto”, width: “auto”}); $(“html”).css(“overflow”,”“); } document.onkeydown = “”; document.onkeyup = “”; return false;
}
function TB_closeCallBack(){}
.........................
I beleive that is the correct way to do it. Then I added:
.........................
function TB_closeCallBack(){
window.location.reload(true);
}
To the page that loads the thick box and I haven;t had any luck with the page refreshing. Any Ideas?
..........................
I fixed the problem I was having, I used a lower case TB in one place. I am still have an issue with Firefox 2.0, It doesn’t reload the page. It does reload the page in IE 7 and IE 6 though.
I’m having a style related problem when including the thickbox css file to my application. It makes all my dropdown menus to shrink in width, so that they don’t show the full text of the option with the maximum length.
I was looking to put this comment in a thickbox main site. But the site http://jquery.com/demo/thickbox/
don’t seem to have any option for putting comments or questions. So, I’m just leaving it here with a hope that someone will answer!
Hi,
I want to pass a parameter in thickbox url..
like this ..
TB_show(‘Login to Continue’,‘login_box.php?return=posting.php?f=2&g=5&height=170&width=250’,null);
thickbox is taking only 1 parameter. i want to pass more than 1 parameter..
how is it possible??
Please help ..
Thanks
Ashish.
Hi Cody,
I love this script by the way. And I really want to keep using it, but I’m getting this error and I can’t find any solutions out there for it.
It even conflicted with an Ajax Login plugin for wordpress I was using for Firefox. Just made it totally broken. That’s fine because I’ll use the standard meta plugin to keep Thickbox.
My question is this:
How do I get the runtime error:
’style’ is null or not an object
To go away in IE6?
I’d also eventually like to bea ble to use the Ajax Login plugin with it too in wordpress 2.2.
http://jonas.einarsson.net/ajaxlogin
I just wanted to say something about this conflict with this plugin becaue others out there might be having the same issue and there might be an easy resolution? Do you now of one?
A way to clear the runtime error for IE6 would be awesome?
Thanks Cody. I really appreciate it.
Byron
nnbm\jhkm
Would be cool if there could be a way to cancel the loading screen though; on a slow connection you might get stuck waiting for the image to load.
Is ThickBox supposed to be modal? On any of the examples if I click outside the Thickbox it disappears and the overlay goes away effectively putting me back where I started. Thx!
If the document has no scrollbars then the grey shade that visually marks the document as inaccessible flashes but disappears immediately.
:o)
I am “forcing” my thickbox to load iframes rather than letting it figure out if its a image, ajax, iframe… i am unable to use a width, height, etc to my URL.. so no ?=‘stuff after the questionmark’
Inside my thickbox.js I have setup a FIXED width and FIXED height. What I want to know is… is there a way to define that fixed width and fixed height in the body of a new page… and have that page resize the thickbox that the page resizing loads into..
let me explain easier..
webpage with a Link “A” that opens a thickbox..
you click “A” and the box opens..
INSIDE the thickbox, you click another link, the thickbox refreshes with the new link “B” clicked via the first page “A”.
I want to know if you can put code in “B” that tells the current iframe to resize to a new size? or can you put code in “A” that tells itself to resize to a new size when you click the link to goto “B” from inside “A”.
hope this makes sense… might require a new function.. i know you can do it with resizing images… so why not be able to do it with resizing pages and put the sizes you want inside the head of the new pages, or body, or somewhere… any suggestions??