ThickBox 1.2
5 July 06
| Permanent Link | Add Comments
Here it is! ThickBox 1.2!
For those of you who were hoping that I would include the next and previous functionality (image grouping) in this version I regretfully inform you that you will have to wait until the next version.
Change log:
- Added the ability to use inline div elements to populate a ThickBox
- Added the ability to use uppercase and lowercase extensions
- Loading animation centers on the screen regardless of vertical scroll
- In IE, select boxes are now hidden when ThickBox is open
- Fixed a bug that occurs when no title is used on anchor elements
- Fixed overlay so that it covers the screen during the loading animation (occurred in FF and Opera)
- Uses the new jQuery 1.0 – Alpha Release
Upgrading – Make sure to replace the thickbox.js file, CSS file, and JQuery file.
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.
This isn’t working for me in Safari or FF for me. I think that FF is my fault because it works on every other FF install other than mine. Safari on the other hand may be a larger problem.
@Wesley – Thank you, I believe I fixed the issue. Try Safari again.
Yup, not sure if you actually had to change anything or if it was just my cache, but that fixed it.
Also a general note I figured out why it wasn’t working in my installation of FF. my finding sucks for me but shouldn’t affect anyone else.
thank you for all your hard work on this!
When you click the link to the picture of your son the screen doesn’t get gray. When you scroll to the top of the page you see that the page is grayed there but not on the bottom of the page.
Thank for all your hard work!
The thing I mentioned in comment #5 occours in firefox, not IE.
@JMG – Yup, seems to be an issue with FF. I’ll see if I can’t get it fixed on the next version.
I noticed another thing in firefox. When the thickbox window opens it does that by first showing the complete window (really fast) and then doing the slidedown effect.
@JMG – Yup, I’m waiting to hear back from John (jquery creator) on this issue.
I dont know if this will help but if you use the latest jquery with thickbox 1.1 you dont have the problem that i described in comment #8 but instead you have a another problem. When the windows is opened it first seems to be vertically aligned to the right. Maybe this will help you debug thickbox/jquery.
@All – I added a fix for the overlay. It will now cover the entire screen when loading. As well, if you want to get rid of the flicker in FF for Thickbox just change the .slidedown(); calls to .css({display:�block�});.
if I can ask you some help because I don’t understand why it doesn’t works for me on FF (but your example works on my server) but works on IE… I can give you the code (under zope).
It seems like you also could use fadeIn(“slow”) instead of .slidedown() without the flicker.
I still have a issue with example and Safari 1.1, – Error: 1428 Type Error, Value Undefined Result of Expression of XMLHttpRequest. Any insite on this, thanks Rich
“just change the .slidedown(); calls to .css({display:â€?blockâ€?});”
sweet. thanks!
FYI fadeIn(“slow”) as mentioned by JMG did not work for me
nothing new, I don’t understand why the example works and not my page under FF.
Well, I don’t know, maybe it’s just my problem. But in Opera 9.01 1.2 works much slower than 1.1.
it works now !
very strange, it sounds like not founding jquery.js but only with FF.
I’d replaced the js call to the last one on the jquery server (http://jquery.com/src/latest/) and it works now.
I’ll remove this link and try finding why the jquery.js is not loader under FF.
I’ve discovered another problem with Thickbox in Firefox. Sometimes when I click on an image the loading screen comes up but the window/image doesn’t. The loading animation just continues until I abort it. Maybe it has something to do with how Firefox handles the onload event!? I sure the picture have been loaded because when I abort the loading and clicks on the image again it loads from the cache. This problem appeared in Thickbox 1.1 also but it feels like it happens more often now. In IE the images are loaded correctly every time.
@Rich – Sorry, I have not been testing safari 1.1.
@JMG – FF seems to be causing several issues. I am trying to figure this out myself but the inconsistency of the issue is making it difficult. At times, it seems in Firefox the image simply does not come up and a person must abort the overlay. Other times, you click on an image and the image is opened up as if ThickBox was never created. This issue only seems specific to FF too. At any rate, I’m trying to get to the bottom of the issue. Any insight would be helpful.
As mentioned before it doesnt seem to work in FF. But I also noticed that select boxes are still NOT hidden in IE. Hope you can fix all the issues. Thickbox pwns :D
@Hans – In IE 6 using my demo page Thickbox hides the form elements appropriately. Also, using my demo, and besides the issues already mention, FF functions just fine. Of courese if you are speaking about the issues mentioned, then yes FF does have some issues.
I’ve noticed an issue in verson 8.5 of Opera as well. Opera seems to load the pages with the thickbox scripts okay but when you click on an image to start the slideshow effect the page pops up blank and nothing happens. Anyone else have this problem or is it just on my two computers. Maybe Opera 9 is okay?
I’m getting a script bug in IE. Here is the situation:
I am loading in a PHP file to the lightbox. This PHP file has an empty ‘div’ and ‘script’ tag. Inside the ‘script’ tag I make a function call. It works fine in FF and Safari, but IE refuses to make the function call UNTIL I add some sort of text (that the browser displays) in the PHP file thickbox loads in.
I made a quick fix by adding a div with id=”iefix”, adding some text and then removing that div (via JS) so that text won’t show up in the final result.
The end result is a working file, but I’m still getting some weird graphic errors.
See here:
http://www.indieed.com
(click on the only link)
Any ideas as to why this bug popped up or why I’m getting the graphic glitches in IE would be much appreciated :)
Thanks
-Jake
Is there anyway to call the thickbox from a javascript call rather then an href? I need to be able to call the thinkbox from innerHTML.. as it is now it does not work. Thanks!
@Dave – Here is the function you call.
TB_show(caption, url);
To fix the overlay not covering the entire page in Moz FF I used:
min-height:100%; height: auto; _height:100% on the overlay
Also when an image wont load , the user should be informed, with image.onerror
@Johan – I did not know this was an issue in the new version. Can you give a little more detail on why this change is necessary?
Also, not a bad idea about the error thing.
To fix the overlay not covering the entire page I in Moz FF I used:
min-height:100%; height: auto; _height:100% on the overlay
You seemed to have fixed it with JS, I tried to do it with CSS in the earlier version.
Hi, as with comments #1/#3 i cannot seem to get version 1.2 to work in one of my installs of FF any ideas on how to solve this or why it might be.
Also due to use of filter: within the CSS you wont be able to validate.
All in all me thinks a great little piece o kit.
for validation (IE WIN)
* html #TB_overlay { height:100% }
I am trying to use this with a url which has query string parameters of its own. The overlay and gif come up but the page never does. Is this possible? What do I need to change?
Thanks
Hi, solved the FF issue as in #31 its a norton issue, sorry to waste your time, will try the *html, cheers for that.
LW – instead of pasting in the ?height=n&width=n, instead paste in &height=n&width=n after your string parameters.
If anyone can help me though with another problem… the css of the new “linked to” page is conflicting with the css of the “parent page” because of attributes with the same naming conventions or properties. Is there some magical Javascript way of doing it so that it only applies the css of the new page into the Thickbox page and not conflict? I can’t change the css and rename everything, as I am using the thickbox for a css template previewing.
I have some really long pages, and if you go so far down the pages, the script stops working and seems to open the larger image in a new window or the same window at random. Strange one!
Thanks for the hard work – lovely script!
I’m working on a workaround for PHP pages.
Here is my logic, I can get the PHP page to parse the data and load it into an inline div. I can hide the div (like in the example) and call it via a link.
This all works, but when I get the error:
Type Error:o.getAttribute is not a function.
Am I doing something wrong??
forget my last message, I just linked to a PHP page and it works fine…as usual I was way over engineering it.
Hi,
ThickBox 1.2 (the demo) doesn’t work with Opera 8.54: There is only a white space on the page. You have to scroll down to see the black background and the box.
LightBox 1.0 worked fine with Opera 8.54 (with a solid black background, since Opera didn’t support opacity since version 9).
Any idea how to fix it?
Thanks,
mco
Btw.: Works fine in Opera 9, IE6, IE7 Beta 3, FF 1.5 (all on Win XP). Thanks for the great work!
Hi
SBJ – I use FF and norton too and this demo doesnt work. What was the fix? BTW it works great in IE6. Nice.
thx
First off, very nice..
However, as with a few others I’m having Opera 8.5.4 issues (displays white box on click)and with FF (lateset, both Mac and PC). Sporadically FF
willload thmb to display the full-sized image but, not with any reliability. Trying your v1.2 I get similar results. I did note that when I do a page refresh the first instance of thmb-click always works.It’s no huge issue that it breaks in Opera and, I’m thankfull it works perfectly in IE7 (as it’s usually bass-ackwards) but, FF is my baby and I oh-so-badly want it to work in FF.
I may be going a little technical here but has anyone been able to get Thickbox 1.2 working alongside ASP.NET 2.0 Atlas components, specifically Update Panel? I get a document.onload object null error? Great tool asides from that. Cheers for now.
Anyone get v1.2 to work with Camino? Neverending preloader, weird messages when trying the demo. Example when clicking on http://jquery.com/demo/thickbox/ajaxOverFlow.htm?height=300&width=300 – You get a dropdown saying: http://jquery.com – ReferenceError: ActiveXObject is not defined and you get the infinite preloader also. Behaves very strange, no problems with previous release. Great script otherwise!
@all – The FF issue which does not allow a thickbox to open the first time its clicked can be fixed by removing the “var” in front of “imgPreloader = new Image();” in the js file.
Getting error in Safari when loading an aspx file.
Error:
TypeError – Value undefined (result of expression o.getAttribute) is not object
Same Error here, Firefox and Safari:
TypeError: o.getAttribute is not a function (Firefox)
and
TypeError – Value undefined (result of expression o.getAttribute) is not object (Safari)...
Any Idea? Thank you!
ThickBox with scrolling content, ThickBox with no scrolling content. ThickBox login – working fine, but inline divs NOT – I get the above error… :-) Thank you for your help.
@Florian – Based on my demo I can not get the error to occur on a Mac or PC using FF or Safari.
Found the problem..bug in jquery using the setAttribute for all browsers. It should be using setProperty for Opera, Safari, & Mozilla
i have thickbox running on my site and there is an embedded quicktime file on the main page, when i use a thickbox to open up a video in an html page i can’t see it, the video from the main page shows right through the popup window. does anyone have a fix?
Anyone experiencing problems with images in IE not showing? It’s very likely my sloppy coding but wondered if anyone else had this problem and solved it?
I load up example.php into a thickbox layer, the text displays fine but no images are shown. Works in FF and Safari.
I had to modify both the script and jquery to get it to work with moo.ajax.. anyway that can be default? I just changed all occurences of $ with $$
Oh I forgot to mention.. on one of my pages.. there is a section on the page that the overlay does not.. well.. overlay.. it’s really strange.. it’s about 500px x 450px at the bottom of my really long page.
Found out the problem to the missing images. I was using sleight.js from Youngpup (to get png support in PC IE 6), this caused me problems with the thickbox script.
On a seperate issue, I get a box appear in the bottom left when the overlay appears. Anyone else get this?
How do you adjust the click area for the layer to go away;
I dont want the user to click on the grey area and for it to go away, Just a close link inside the white area.?
thanks
Not working on FF installs now!!
@John – The demo works in my updated version of FF. Can you be a little more specific. Also, have you read this comment.
On ff I everything just functions as normal links. I’ve tried various things, uninstalling extensions etc. but it’s still not working. I hate to say this but it did work OK yesterday. And on my local version of your download it works fine in FF – when I publish this to the web is when I hit the problem or when I view your webpage. I’ve tested this on WINXP and on WIN2K (older FF version) with the same issues.
Lightbox 2.02 offers the option to have some kind of gallery, if called with lightbox[name].
so, all pics with this are bundles together as a gallery.
Does Thickbox offers this option??
Greetings
marcel
@Marcel – Should be releasing this functionality this week or next.
I can’t seem to get a popup dhtml/js calendar to work within thickbox. Any clues as to why? I assume it is either not loading the needed scripts or is ignoring anything in the script tags.
Any help would be greatly appreciated.
Cody
Originally used inline, but it threw me an error: Type: e[pro[p]] is not a function or something like that.
I then added .rhtml as an allowed file type (working on a ruby app) and called it via AJAX.
In neither method did the calendar work.
I learnt something today while implementing this FINE script on my site.
FF won’t load JS with the following
< script type="text/javascript" src="thickbox.js" / >
but will load with the following
< script type="text/javascript" src="thickbox.js" >< / script >
( I’ve had to place in some spaces so it will display here :) )
@All – ThickBox 2.0 has been released! http://jquery.com/demo/thickbox/
Already mentioned in Comment 42, but it seems thickbox is not working alongside MS Atlas (especially UpdatePanel). To what I found so far, the jquery library gets not loaded correctly because of Atlas.
Somebody any suggestions?
Hi! First i want to say that i am a addicted user of thickbox since i had found it :) Great work !!!
Well, i have only one little problem and question:
01 Problem: I have an image which i open with thickbox. This image is image is very big. And i use an Flashlogo on the left-top of the page. When i opening the image with thickbox, it shows the flashheader not behind the thickbox window, it shows in front of the thickbox window.
-> See this screenshot at: http://qpmedia.qp.ohost.de/thickbox.JPG
###
02 Question: Can i use for the close and priv – next link an image like in lightbox ?
###
Greets QPMEDIA
Ehehe have forgot a question :P
I have made an login window with thickbox. Well, when i enter the right username and pass its redirect me to the adminmenü. Now i want, that when i give a wrong pass and username, that i become an error message IN THE Thickbox Login window. How i can make this ? Need held :)
Hey Awesome with the 2.0.. I can’t wait to try it out, thanks for your hard work! Should we still make comments here or will there be another post to comment on the new version? Thanks again for such an awesome script!
QPMEDIA: No that functionality is not available… yet. It does sound like he’s going to put it in one of these days :)
@ Rick Baskett: Hi :) Which of my questions do you mean ? :)
Eh.. cant make a gallery… with image maps… damn. Can anyone help me :)
@All – Please use the new forum to discuss ThickBox 2.0.
http://codylindley.com/thickboxforum/
I’m using the iframe functionality of ThickBox, and am trying to link to different anchor tags on a page. In IE it works fine, but in Firefox it loads the page in the iframe, but doesn’t go to the anchor tags, which makes it useless for me. Is there some function I need to add to Thickbox.js to make firefox see the anchor tag and go to it in the iframe?
is it possible to have thickbox open in the parent window of the iframe it’s placed in? (Thickbox in iframe, thickbox content open in iframe parent and over said iframe). I’m able to do this with lightbox 2.0 but I need Thickboxe’s content flexibility.
Thanks in advance for any help on this.
Can we open a new thickbox by clicking on a link in the previous thickbox.
Can anyone help? How can we open a thickbox from an iframe and have it act as if it were opened from the parent window? We have seen many similar questions in a few differant forums but seen no working solutions. We have tried the _parent and _top target attribures – no success. We have tried linking to the parent window and running the thickbox javascript from the parent windows head – no success. Has anyone made this functionality work or perhaps, is it just not possible. Thanks in advance for anyone giving this question some consideration!!
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.
Thank you all informations.