Welcome, Guest

Want to take part in these discussions? If you have an account, sign in now.

If you don't have an account, apply for one now.

1. • CommentAuthorcodylindley
   • CommentTimeApr 6th 2007 edited

    
   Well, believe it or not ThickBox 3 is on the way. I'm looking for a bit of feed back in the context of keeping the code small, if not smaller, while adding fixes and features. Believe it or not, ThickBox 3 should be less code given that I have re-worked the overlay.
   
   Here is what I've got so far...
   

   
   
   • If no sizes are set for width and height (inline, iframe, and ajax content) ThickBox will default to a width of 630px and a height of 440px;
   
   
   • iframe hack to hide select elements will now only run in IE 6
   
   
   • Scrollbars are removed in IE 6 when a ThickBox is open (something had to give and I say it be IE 6)
   
   
   • Cleaned code a bit using jslint
   
   
   • A new compressed thickbox.js using packer
   
   
   • Updated ThickBox to work with jQuery release 1.1.2
   
   
   • Major updates to JavaScript and CSS addressing scrolling and overlay issues
   
   
   • Added a new pre-loader image, that is now being pre-loaded
   
   
   • ThickBox now works with image maps (area elements) and form buttons (input elements), just like links (a elements)
   
   
   • If you use Ajax content, ThickBox will now open new content in the current ThickBox. Meaning that after the content is loading via Ajax into a ThickBox the content is parsed for any area or link elements with a class of thickbox. This will allow you to load new content into the current thickbox
   
   

   
   
   Any thoughts?
   
   BTW - Anyone willing to test this stuff out?
2. • CommentAuthorJimo
   • CommentTimeApr 6th 2007

    
   Hi there,
   
   Can you put link to test this new version?
3. •  
     CommentAuthorpixeline
   • CommentTimeApr 6th 2007

    
   that's great news!
   
   suggestion: be able to use thickbox with forms. It's not a big issue, but many people requested this hack on the forum.
4. • CommentAuthorcodylindley
   • CommentTimeApr 6th 2007

    
   @Jimo - I'm making a list of testers. The new code is not yet live. Would you like to be on the list?
   
   @pixeline - You mean launching a thickbox from a input element, right?
5. •  
     CommentAuthorpixeline
   • CommentTimeApr 6th 2007

    
   Yes, i mean launching a thickbox on submit. for it to work right now , it means enabling the behaviour in js, adding the class "thickbox" to the form, and appending its action attribute with the iframe variables string.
6. • CommentAuthorcodylindley
   • CommentTimeApr 6th 2007 edited

    
   @pixeline - Ok, I added the ability to have thickbox launch with input buttons. I don't think this is exactly what you meant but I am not going to mess with the form element. The code would look like so...
   

   
   <input alt="#TB_inline?height=300&amp;width=400&amp;inlineId=myOnPageContent" 
   title="add a caption to title attribute / or leave blank" 
   class="thickbox" type="button" value="Show" />

   
   
   Yes, accessibility freaks will wig a bit on this one...but those of you who are standards freaks would wig if I used a non-standard attribute to pass the thickbox parameters.
7. • CommentAuthorbarton1967
   • CommentTimeApr 7th 2007

    
   Is it possible to set thickbox size to percentages or other units besides pixels? If not, this would be a useful feature.
8. • CommentAuthorraffaz
   • CommentTimeApr 8th 2007

    
   I'd suggest to have the "Close" button in the same placement for the image gallery and iframe/AJAX modes.
   at the moment the "Close" button in the gallery mode is placed in the bottom part, and in the iframe/AJAX mode is placed in the upper part.
   I think that it's better to have it always on the bottom right corner. (and if someone could tell me how to do it on the current ThickBox version it would be great, too! :))
9. • CommentAuthorraffaz
   • CommentTimeApr 8th 2007

    
   another great feature would be having a movie linked normally as an image, and opened in a self loading thickbox.
   at the moment the only way to open a movie (quicktime, wmv, or other) is to build an html file with the movie embedded in it.
   it would be cool if you could simply assign the thickbox directly to the ".mov" or ".wmv" file just like you usually do with ".jpg" and other image files.
   is it possible?
10. • CommentAuthorepweb
    • CommentTimeApr 9th 2007

     
    Cody, I'd like to be on the list of testers. :)
11. • CommentAuthorsmoothdvd
    • CommentTimeApr 9th 2007

     
    Cody, Can I become a tester?
12. • CommentAuthorcodylindley
    • CommentTimeApr 9th 2007

     
    @epweb, smoothdvd, jimo, and everyone else interested in testing - Please send an email to me with your full name, contact info (email, website), and I'll get in touch with you about testing thickbox 3.
    
    contact { you know what goes here } codylindley.com
13. • CommentAuthordafyd
    • CommentTimeApr 9th 2007

     
    Any chance some sort of permalinking could be built in? So you can link to a thickboxed images (or whatever) directly. It would make the back button work...
14. • CommentAuthormozbius
    • CommentTimeApr 9th 2007 edited

     

    If you use Ajax content, ThickBox will now open new content in the current ThickBox. Meaning that after the content is loading via Ajax into a ThickBox the content is parsed for any area or link elements with a class of thickbox. This will allow you to load new content into the current thickbox

    
    
    Does that mean that Google Maps Mashups will load properly centered?
    
    Would it be possible to add HTML support for Next / Previous actions (just like it is currently possible with jpg galleries)?
    
    Is there a fix that is planned for total overlay coverage (overlaying _parent window)?
15. • CommentAuthorhcabbos
    • CommentTimeApr 10th 2007

     
    As a way of navigating between images in a slideshow implemention, I'd like the option of forward and back images overlayed when hovering to the left or right of an image. Currently, the forward and next text links are small and require too much concentration and mouse travel for a few of my clients.
16. • CommentAuthorboots
    • CommentTimeApr 11th 2007

     
    Cody: I'd like to be a tester.
    
    Much obliged.
    
    Brad
17. • CommentAuthorabulic
    • CommentTimeApr 11th 2007

     
    I'm a photographer, and I'd like the option to display images at 100% in the browser window, with scroll bars.
    
    :)
18. • CommentAuthorArteal
    • CommentTimeApr 13th 2007

     
    hcabbos: Yes! This will be great, if thickbox prev and buttons will look like Lightbox 2.0 ones :)
19. • CommentAuthorclza
    • CommentTimeApr 14th 2007

     
    There seems to be a bug with Safari on a Mac that I and a few others in the forum have come across. I haven't been able to find a solution - maybe this is something that could be fixed in the next version:
    
    When viewing a page that uses TB links everything works fine until you refresh the page. Then every TB link you click on shows the same content of the link you selected before you refreshed.
    
    So if you select link A, you see A content; link B shows B content. But if you select A then refresh the page you will see A content even when you select B, C, D, etc links.
20. • CommentAuthorraffaz
    • CommentTimeApr 14th 2007

     
    clza:
    I'm on safari, and I don't see the problem you're saying. I'm using the photogallery feature, maybe the bug is only in the iframe version?
21. • CommentAuthoraviflombaum
    • CommentTimeApr 15th 2007

     
    Hey Cody,
    
    So what about callbacks in thickbox? Like let's say I want to load some ajaxcontent that includes a form. After that content loads, I'd like to bind .ajaxSubmit or something to that form, which I would normally do document load, but of course, this content isn't on the page during load. So what I first did to solve this problem was adding the following right before the thickbox loads:
    
    <code>if(IsDefined('TB_callback')){TB_callback();}</code>
    
    So if I wanted a callback, I'd just define TB_callback and put my code there. But now I want something more robust, so that I can have different callbacks for different thickboxes. So I'm thinking of doing this in one of two ways.
    
    1. Defining the callback within the URL as a param, so imagine for an image:
    
    http://example.com/myimage.png?callback=myfunction&height=500&width=500
    
    so using that, it'd check to see if myfunction is defined and then it would call it. But I don't like the idea of craming the callback into the url. So...
    
    2. Changing TB_show to accept a fourth parameter of the callback and not using the TB_Init function to bind thickbox and instead build my own onload function that binds TB_show to the correct links and includes the callback param.
    
    Thoughts?
22. • CommentAuthoraviflombaum
    • CommentTimeApr 16th 2007

     
    So I went ahead and implemented option 1 from above. Using your awesome parseQuery function I create a variable called TB_CALLBACK = params['callback'] and then right before the TB is set to display: block (showing it) I added:
    
    if(IsDefined(TB_CALLBACK)){eval(TB_CALLBACK+"();");};
    
    Now I didn't like the idea of eval whatever is in the callback params in the query, but then I thought, how could malicious code possibly make it into there as the server is generating my thickbox links. But if you think that's a bad idea, then I'll implement the other option for callbacks in thickbox.
23. • CommentAuthoraviflombaum
    • CommentTimeApr 16th 2007

     
    Oh and in case you're curious as to my IsDefined function:
    
    
IsDefined = function(variable){
return eval('(typeof('+variable+') != "undefined");');
}

24. • CommentAuthorRH
    • CommentTimeApr 17th 2007 edited

     
    1) If it is not now supported, it would be great to cache the next 1 or 2 images in the direction the user is browsing.
    2) First and last links would be good. Another possibility is 5 or 10 forward/back buttons (i.e. go forward 10, go backward 10) when image sets get large.
    3) Like abulic above, I'd like the option of displaying photos at 100% of size. One idea: display photos as done currently, but have an icon that appears if photo has been compressed, and clicking the icon displays the photo at 100%, with scrollbars if needed.
    4) A tutorial page on how to customize ThickBox would be great.
25. • CommentAuthorpnikosis
    • CommentTimeApr 18th 2007

     
    It would be great Thickbox to open swf files directly the same way like it opens image files. Something like:
    
    <a href="someflashfile.swf?flashparameters&width=400&height=100" class="thickbox">text link</a>
    
    Other media would be great too :)
26. • CommentAuthorclza
    • CommentTimeApr 18th 2007

     
    raffaz - yes, i forgot to clarify that it is in the iFrame version. I am also using query strings to call up the content:
    
    i.e. : href="/store/shopexd.asp?id=63&keepThis=true&TB_iframe=true&height=500&width=850"
    
    what is happening is that after the refresh. any different link that is clicked results in the last previously cicked item.
    
    so if I had clicked the above link, and then tried clicking id=75, I would still get the content for id=63
27. • CommentAuthoryoupii
    • CommentTimeApr 19th 2007

     
    * a maximize button to make thickbox's window bigger
    * zoom in/out between resized size and 100% with +/- keys
    * disable scrollbars in firefox
    
    Please :d
28. • CommentAuthorRaf
    • CommentTimeApr 20th 2007 edited

     
    Based on the comments you put in the JS in TB2, I decided to implement some of them and got a bit carried away.
    
    - Used DOM methods instead of innerHTML. I noticed innerHTML doesn't play nicely when the page is served as application/xhtml+xml
    - Reused XHTML elements instead of recreating them every time, changing only necessary attributes, text nodes, etc.
    - Added a slideshow function
    - Used more CSS instead of JS (for positioning mostly)
    - Added a function to maximise the image when it's clicked, fitting it to the viewport when clicked again.
    - Preloading of images, including prev/next images after main image has loaded
    - Select hiding with iframe only for IE6-
    
    I also removed a few things I wasn't interested in, like Ajax, putting HTML in there instead of a single image and the fancy transitions. I also got rid of its dependence on jQuery, which you probably won't like!
    
    There is a problem when the body has margins set to it and position:relative (like on my page). It means that when the box is absolutely positioned (when the image is maximised), it is no longer in the centre, since it isn't positioned relative to the viewport any more. This is another reason why position:fixed is so nice for when the image is fitted to the viewport size. I'm trying to work this out using negative margins, but it's difficult if the units used are mixed (ems/px), especially with IE which doesn't support getComputedStyle.
    
    Still, I just thought you might be interested, since you're adding some of these things to your new version.
29. •  
      CommentAuthor[-Stash-]
    • CommentTimeApr 21st 2007

     
    I'd like to be on that testers list please, as I maintain the ThickBox extension for Vanilla and would like to get the jump on any new version coming out ;)
    
    Are you working with Klaus Hartle on this? Is this the same project that has already been started on the JQuery mailing list or is it completely separate?
30. • CommentAuthorabulic
    • CommentTimeApr 24th 2007

     
    @ Raf
    
    On your implementation, I like how at 100 percent you can still use the scroll bars to move around and see the image. This would accommodate some of my larger photos + users with small screen resolutions.
    
    Is there any quick and dirty way to have the image load at 100% size & centered when clicked (elminate the nasty resizing altogether) and use the scrollbars to view anything outside of the viewport?
    
    Google and forum searches haven't really led me in the right direction.
    
    Thanks!
31. • CommentAuthorRaf
    • CommentTimeApr 25th 2007 edited

     
    Yeah, sure. I've put an updated version up and in there, replace this:
    var resized = Thickbox.zoom('out');
if (resized) Thickbox.curimg.onclick = function() {
if (Thickbox.wra.style.position === 'absolute') Thickbox.zoom('out');
else Thickbox.zoom('in');
}
    
    with this:
    Thickbox.zoom('in');
    That's the quick and dirty way. I've also made the image vertically centred if there is enough space when clicked (i.e. if you have scrolled down enough for it not to stick out above the top, but it also won't protrude from the bottom), otherwise it will be positioned a small distance from the top or bottom of the body, where appropriate. With the above changes the code obviously this will happen automatically.
    
    If you also want it horizontally centred with respect to the body, you can add this to " else if (z === 'in') {" (this is quick and dirty code):
    var vwidth = Thickbox.viewport()[0];
if (full[0] > vwidth) {
document.body.style.width = vwidth + 'px';
document.body.style.marginLeft = 'auto';
document.body.style.marginRight = 'auto';
document.documentElement.style.width = (full[0] + 10) + 'px';
var ml = (full[0] + 10 - vwidth)/2;
w.style.marginLeft = '-' + ml + 'px';
window.scroll(ml,self.pageYOffset || document.documentElement.scrollTop);
}
    And then reset them for "if (z === 'out')". But I think that's messy and unnecessary, and can confuse people. I'm also not sure if it's what you meant.
32. • CommentAuthorplough
    • CommentTimeApr 26th 2007

     
    Hi all,
    
    the script is superb. One suggestion for the new version I have got:
    
    It woult be great, if the boxes were dragable / moveable - particularly for html-content.
    
    Greetings!
33. • CommentAuthortyler_durden
    • CommentTimeApr 26th 2007 edited

     
    HI,
    
    For me personally, the "option" of the following features would be fantastic.
    
    

    
    
    1. Ability to turn off "auto-resize" option. (I use thickbox to display my illustrations and I don't like how my drawings distort on lower resolutions).
    
    
    
    2. Ability to easily toggle transitions and visual effects of thickbox on or off. I think the option to have Thickbox animate similar to Lightbox should be an option.
    
    

    
    
    Thanks for all your hard work. I originally swapped to Thickbox because of it's ability to work even if all of the website hadn't finished loading, which is a major downfall of Lightbox.
    
    Cheers :)
34. • CommentAuthortyler_durden
    • CommentTimeApr 26th 2007 edited

     
    Ps I'd be more than happy to be a tester for you. I am a front-end web designer for Izilla so I'm sure I could assist in some small way :)
35. • CommentAuthorwkn
    • CommentTimeApr 27th 2007 edited

     
    I second the question by mozbius if Google Maps in an iframe will be supported in version 3, correctly centered on the map. Here's a discussion linking to a fix ...
    
    http://codylindley.com/thickboxforum/comments.php?DiscussionID=347&page=1#Item_0
36. •  
      CommentAuthorpixeline
    • CommentTimeApr 28th 2007 edited

     
    hello, any news about when the new thickbox will come up ?
    
    Suggestion: wouldn't it be a more standard jquery implementation if options were passed as an object? I personally prefer to have an implementation like this:
    
    $(document).ready(function(){

$("a.Ajax").thickbox({mode: "ajax",width: "90%", height: "90%"});
$("img.album1").thickbox({mode: "album", resize: true});
});
    
    
    so i can mix thickboxes flavour on my page while keeping url string clean :)
37. • CommentAuthorfireandy
    • CommentTimeApr 29th 2007

     
    Hi, thanks for sharing the code & developing.
    
    I would like to see the features, that Raf has already implemented in his mod. I would like to have a slideshow - option, where it goes from pic to pic automatically.
    And it would be nice, when clicked on the image (or on a button like "enlarge") the image would be fullsize and in a scrollable window, or that the user can zoom in. I have seen such features in a Lightbox Mod named Lightbox Plus (http://serennz.sakura.ne.jp/toybox/lightbox/).
    
    Thx.
    It would be no problem for me too, to test the script out, if needed.
    Any news about development on 3rd version?
38. • CommentAuthoragent2026
    • CommentTimeMay 2nd 2007

     
    Hi Cody,
    
    First off, some clarity on the project would be nice. Our last impression was you had handed the project over to Klaus and the jQuery team to maintain and bring to v3, which is where I've been keeping an eye out. Has this situation changed?
    
    As for features:
    
    Circular browsing and 'click = next' on images are very important for me. So much so that I would probably stick with my modified Thickbox if they are not in the next release.
    
    I prefer a fixed size for my Thickbox, one that does not resize as you browse images. So a 'full size' button/ability would be a nice addition so users can see images in full resolution if they wish. I would still like the option to keep the full-size image within the restraints if the browser window I think.
    
    An option to disable page scrolling while a Thickbox is open is good. Sometimes it's good to keep the user in the same place they where when they launched the Thickbox.
    
    Last, I think anyone who's looking for lots of the fancy features of Lightbox and others, they should just use them. Thickbox's small file size extremely important to me, and was an important factor in why I chose it.
    
    Thanks,
    Adam