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