Thickbox Plus (Updated Again)
Another Update: GUYS, YOU SHOULD TOTALLY GO TO CODY'S SITE AND GET THE LATEST VERSION OF THICKBOX, HE TOTALLY ROCKED IT WITH FRESH NEW CODE AND LOTS OF BUG FIXES (and he included my little bit too)! Head on over to Thickbox 1.0. NOW!
Update: I said I wouldn't, but I updated Thickbox Plus. It now closes when you click the image and I fixed a bug where the loading GIF remains if Thickbox is closed before the image loads. Make sure to download the new ZIP package to get these changes.
I'm currently working on an AJAX powered site and I needed a Lightbox-style script that could handle photo albums in an attractive way. At first I went with Lightbox 2.0 but then I came across Thickbox. Thickbox is the kind of script I like; it's much lighter than Lightbox 2.0, and in an AJAX powered site that is heavy enough as it is, lighter is always better.
There was just one problem; if an image is larger than the viewport, it goes off the page when loaded by Thickbox. This called for image resizing, which wasn't too difficult to add. Lightbox + image resizing = Lightbox Plus, so it's only natural that Thickbox + image resizing = Thickbox Plus.
I also modified Thickbox by wrapping the "TB_launch" function so I could use it in my AJAX calls. In the end, the total modifications amount to 1.1 kb of extra space, weighing in at 4.97 kb total (you can compare Thickbox Plus to the original Thickbox to see just how little I had to change). Combined with jquery at 33 kb, the total is still far less than all the files required for Lightbox 2.0.
What's left is to make Thickbox handle groups of images just like Lightbox 2.0, so you can navigate an album without closing the image you are viewing, but this might not be necessary for my current project. There might be other things to add (it's not perfect), but for now I'm going to share the current script with everyone so Javascript geeks can tinker with it and make it their own. There's a lot you can do with this little script (and so much more you can do with jquery), so take a look at it. I'll update this entry as I make changes myself.
Visit the example page or download the whole package as a ZIP. Enjoy!
1 Trackbacks/Pingbacks
- Pingback: Thickbox plugin for Wordpress at Dan Atkinson on May 22, 2006
Hi,
The picture resize function doesn't seeem to work on the 'example page'. I am using IE6.
Would it be possible to port this to a wordpress plugin?
Would it also be possible to allow the image to be closed by just simply clicking anywhere on the image. Its a function that I liked in the original Lightbox.
Thanks,
Josip
Interesting concept and playing with it could be fun. Now to just find a project to use it in
Nice work!
Josip: The resize is not dynamic. Make you window small and then click on one of the images. It should be contained when you open it. It most definitely works because I've tested it in IE 6.
Porting to a Wordpress plugin: I'm too busy right now for that.
I do not want to have the image close by clicking anywhere on the image, because I want to retain the option to right click the image and download it. The option is a must. Although, it wouldn't be hard to modify Thickbox to make it work the way you want.
karmatosed: Like all Javascript, use only when necessary
Cody: Thanks!
Ye the resize function did work when the IE window was already small. Sorry I assumed it was like Lightbox Plus as that was dynamic and resized the image regardless.
I am using lightbox with the function of clicking anywhere to close the picture and I still can right click on the image and save it.
Sorry I am not familiar with Javascript. Is it possible to add that function when you have time?
Thanks
Josip
Josip: I would like to add the function, and work on other improvements as well, but I will be totally swamped with other projects from now until who knows when. If I do get a chance it will probably be sometime in late June. That's not nearly soon enough.
What I hope is that this demonstration will get popular and noticed by the development community and other geeks will make their own modifications and share their scripts too. It's really not hard to do, especially with jquery available. Hopefully one of them will add the functionality you are looking for. Sorry I couldn't be more helpful.
When I implemented the code from the .zip file, thickbox plus would not work.
The solution was to rename thickbox_plus.js to thickbox.js to get everything working. Great work! Thanks!
My mistake. Turned out having any javascript code in the body of the html seems to interfere with Thickbox. Solution add the includes at the bottom of your page.
Phil: That just means there is a conflict between the load event for Thickbox Plus and the Javascript you have in your page. A better solution would be to change the way you load your existing Javascript, maybe using one of the methods provided by jquery or a similar function… but it all depends on what that code actually is. At least you found a way to make it work.
And if you change the name to thickbox.js, then you are using the original script by Cody, which has a more direct method of loading (and doesn't resize images); I wrapped that method in a function for a reason.
This is a test comment.
looks great! nice additions to the original. couple of points:
(1) i completely agree that we should close the box onclick anywhere… for images. for text stuff or forms or something that wouldn't work!
(2) secondly, if you close the image quickly, or before it has loaded, then the loading gif doesn't go away. ever. something to look into?
what the eff? I'm Phil #3 here now?
This is an outrage. I am outraged.
Outrageous.
oh PS really nice work, Christian!
Hey, I can't help it if you all got the same name.
Very nice work, I hadn't seen this implemented this well without the use of flash, congrats! will definately keep this in mind for future projects!
Miguel: Cody and all the other jquery developers deserve all the credit for Thickbox, I just added a small feature. And if you are interested in developing fancy effects with unobtrusive Javascript, definitely take a look at jquery. It's amazing how easy it is to integrate its effects with existing code.
I very much like that example - rather cool indeed
Another great script, just got flash video embedded using an intermediary iframe (the direct html callup method meant that the flash play controls didn't work in firefox, but worked ok in IE!).
I am also trying to set up a bookmarked help page using thickbox +, however the resultant page doesn't load at the bookmark, but just at the top. Any ideas?
May go and try to add the array aspect of lightbox 2 for my flash movies. Keep the good work up!
Chris: Nice job on the flash video, though I think I've heard of other techniques mentioned in the comments at Cody's blog. As for a bookmarked help page, I think you would have to work in some JS to scroll Thickbox to the position of the bookmark… it might be tough. And adding support for arrays is exactly what I wanted to do, I just won't have time to do it for a while.
Excellent work! I've been looking to resize images this way.
One thing I might suggest is the addition of '.toLowerCase()' in line 36 of thickbox_plus.js:
var urlType = url.toLowerCase().match(urlString);
I slapped this in after using some piccies which had the extension '.JPG' and the script didn't pick it up. It works now with that.
Also, I created a Wordpress plugin which is fairly easy to do (needed to rename the link to the close animation gif.
If anyone wants a copy of the plugin, please feel free to contact me from my webpage (leave a comment).
You can also see some pictures which utilise the thickbox plus plugin.
Cheers again.
slick.
Dan: That sounds like a good idea. I'll add that in sometime.
I should mention to you guys that I've found some quirks with Thickbox. It has problems when the same image is found twice on a page, or when it is loaded twice for the same content. It's not to hard to reproduce these problems, and I don't know if I'll be able to fix them, but I'll at least try to share some examples of these problems when I get the chance.
There also seems to be another problem…
If a picture is opened in Internet Explorer, then it opens at the top of the page, and not in the current window, whereas in Firefox, if I click a thickbox link halfway down the page, it'll open halfway down (like it should).
That's a known problem, it has to do with the fact that IE does not support position:fixed. Maybe the solution is to run som JS that forces IE to accept it.
I am having troubles loading an swf-embedded HTML file into Thinkbox (standard version). What is the trick to get this working - I have it opening, sizing accordingly, and loading the bg colour of the swf. But it wont "play" the file. Testing through dreamweaver off C Drive was completely successful, so i'm wondering if I have just set up my directory incorrectly? Any help would be much appreciated.
I know there are some issues with certain browsers where an SWF won't play if it is loaded in certain ways. Do look through the comments on Cody's blog and you'll find some comments from people who managed to load SWF content (just search the page for SWF). Maybe that will help you.
This is what I have been looking for. What I miss now is the browsing and cathegories ability. Do you plan to implement it as well?
Trupik: I hope to, I just can't promise that I will be able to anytime soon.
Good work! Only one question: if I have a code like this
:: Image preview :: I see sample.jpg and also :: Image preview :: in the popup window…. Is it possible to view only the image?
Thanks
Thomas
Than I am really looking forward to it. I would suggest a little diffrenece from LightBox 2.0. The ability to browse all images in one cathegory is just fine, but it would be great to have an option to give lightbox a list of images and let lightbox show them when user clicks on next and prev - without having the thumbnails of those "following" images on the page.
Trupik: You could already do that by hiding the thumbnails on the page with CSS.
If I toggle stylesheet in Firefox, links don't work! why?
Thomas
Thomas: You are changing the stylesheet with Firefox? As in, using the browser to do it? If Firefox doesn't reload the page when it changes the stylesheet, but somehow does update the content, there's a good chance that the JS that launches Thickbox is not being refreshed. I don't know if there's anyway to fix it; I would have to see an exampe page so I can see exactly what's happening.
Ah, I see now. If you turn off the stylesheet, Thickbox still works, but it does not have the CSS it needs to display correctly. It's CSS dependent.
Would it be possible to add the function where you can click on the animation image to close it off. If it freezes during loading or your on a slow connection and dont wanna wait for the picture to load. You have to press F5 to get rid of the loading animation page which is annoying.
Thanks
That sounds like a good idea, I'll try it when I get a chance.
Josip: Check out Cody's new version and see if it works for you.
Christian,
I'm not 100% sure, but I think Cody has also updated his version to fix the bugs you also fix in the new thickbox plus.
P.S. My plugin for Wordpress is live at:
http://www.dan-atkinson.com/wp/index.php/110/thickbox-plugin-for-wordpress/
I’m trying to do something like this:
TB_show(“test”,”ajaxLogin.htm?height=100&width=250”);
when I first load a page or when I reload a php page to display an error without clicking on an href, but I have some js errors… How can I do this?
Thanks
Thomas
Thomas,
You should be using it as a normal link (a href) with class="thickbox".
Have you tried this? If so, what are the errors?
Is it possible to override javascript alert and confirm with thickbox? Is there a way to do this?
Thanks,
Thomas
Thomas: You'll have to study up on JS more to solve the issues you are having. Sorry I couldn't be more helpful.
Still loving Thickbox and its brothers scripts; so thankyou all writers/contributors/supports/critics etc.
I have just upgrade to the new version, but am having some problems when viewing thickbox-launched pages on smaller screens & resolution. I have one particularly lengthy page that launches fine, but the top line or 2 is hidden from view (again, on smaller screens/res), making it impossible to see the close text (and possibly confusing for those who don’t know the new “close on click outside” feature) . I’m sure some CSS tweaking will solve it, but I thought this issue had been resolved in the new version? Any ideas anyone?
@ montoya
Would it not be better to use addClass and removeClass (jquery), this way you can add more flex.
Johan, I'm not quite sure if it's necessary. I'm sure anyone who knows jQuery could do that themselves
JS
if(urlType == '.htm' || urlType == '.html'){//code to show html pages
HTML
launch google in a thickbox
I have a problem or two:
Now I think how can this script be adapted to load externals. And what i f the page ends with no .php no .htm no .html but just a slash (mod rewritted url will throw an error page even you would use index.php or index.html at the end) The greybox works fine with urls though
Johan: XMLHttpRequest can only be used to load pages on your own server. You would have to make a google search page on your server (possibly using an I-Frame) that you can then load with Thickbox. There is no other way around it, that's just how XMLHttpRequest works. Greybox works fine because it uses an I-Frame.
In case anyone else gets caught with this one: if you do not supply a 'title="abc"' on the link, the thumbnail image will appear below the main image when enlarged.