WebGUI
      Click here to register.
      
YAPC North America 2008

Thickbox 2.1

User: greghacke
Date: 12/3/2006 2:40 pm
Views: 3967
Rating: 8    Rate [
|
]

Thickbox 2.1

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features:

  • ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 15k, uncompressed it's 39k.
  • The ThickBox JavaScript code and CSS file only add an additional 12k on top of the jQuery code. Together, the compressed jQuery code and ThickBox only total 27k.
  • ThickBox will resize images that are bigger than the browser window.
  • ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
  • ThickBox will hide form elements in Windows IE 6.
  • ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
  • The ThickBox creator has decided that animation should be tailored by individual authors. So yeah, ThickBox no longer animates. Is this a feature? Well, some might say it is.

Supported & Tested Browsers

Windows IE 6.0, Windows IE 7 (7.0.5450.4), Windows FF 1.5.0.5, Windows Opera 9.0, Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5

MIT License/GNU License

http://www.opensource.org/licenses/mit-license.php

http://www.gnu.org/licenses/gpl.html

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.

WebGUI Install

This package only needs to be installed once.  After the install, change the folder "Thickbox" and uncheck "Make Pakage" on the Metadata tab.

Included is a photo gallery template configured to display each image as part of a related gallery (using the rel= option as defined on the thikbox documentation).

Compiled into a WebGUI package by Greg Hacke. 



Replies

Re: Thickbox 2.1
User: snapcount
Date: 12/5/2006 3:56 am 		Rating: 17    Rate [
|
]
Status: Approved

Eye candy is good!  I probably won't get a chance to play with this until the Holidays so I can't give you any useful feedback until then.  Maybe you could post some screen-shots?  They go a long way to getting people to actually try your contributions out.

Thanks for the post! 


Re: Thickbox 2.1
User: arjan
Date: 12/19/2006 4:58 am 		Rating: 12    Rate [
|
]
Status: Approved

Screenshots, examples, etc can be found here:

http://jquery.com/demo/thickbox/ 


Re: Thickbox 2.1
User: alafondo
Date: 12/18/2006 5:46 am 		Rating: 15    Rate [
|
]
Status: Approved

I follow tj Your instructions but have no success. So could You write more wide howto.

Thanks. 


Re: Thickbox 2.1
User: greghacke
Date: 12/18/2006 11:08 am 		Rating: -4    Rate [
|
]
Status: Approved

Certainly.  I'll draft up some clean instructions this afternoon.

If you need additional help from there, feel free to contact me directly - my Russian is rusty but manageable. 

Greg Hacke


Re: Thickbox 2.1
User: robbert
Date: 2/6/2007 5:23 am 		Rating: -6    Rate [
|
]
Status: Approved

It doesn't seem to work for me too. When I click on the thumbnail it displays a black border at the bottom of the screen and it makes the screen quite large, but no image is displayed. Any idea what could be wrong?


Re: Thickbox 2.1
User: greghacke
Date: 2/6/2007 11:12 am 		Rating: 4    Rate [
|
]
Status: Approved

If you can send me a url, I can take a peek.  You can mail me directly at greghacke at idlehandspress dot com

Greg Hacke


Re: Thickbox 2.1
User: knowmad
Date: 1/29/2007 6:03 pm 		Rating: 0    Rate [
|
]
Status: Approved

Nice job! I found I had to add the headers for loading Thickbox css and javascript files to the Thickbox Photo Gallery Template in order to get it working. Maybe I missed something...

I heavily modified that template so that the url for the title would create a thickbox pop-up. I then added the admin controls so that an Admin could access the Edit/Delete functions. Finally, I used the layout from A List Apart for getting the images and text centered. Everything else just worked.


Re: Thickbox 2.1
User: greghacke
Date: 2/6/2007 11:21 am 		Rating: 7    Rate [
|
]
Status: Approved

Thanks for the note.  I feel for Thickbox - avoiding popups is great and the ability to display materials is incredible.  

Greg Hacke


Re: Thickbox 2.1
User: fathertorque
Date: 7/3/2007 3:20 pm 		Rating: 10    Rate [
|
]
Status: Approved
Hi greghacke,
the ultimate thing would be to build this using the YUI library to maximize performance.

Previous • Back • Next