Next Prev

jQuery ThickBox

Read more and download "jQuery ThickBox"

- ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k.
- The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
- 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.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<html>
	<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/thickbox/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
		<title>http://colinramsay.co.uk ~ javascript tickertape component</title>
    <script language="javascript" type="text/javascript" src="javascript/jquery.js"></script>

    <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
	</head>
	<body>
    <script language="javascript" type="text/javascript" src="javascript/thickbox.js"></script>
		<center>
    <h1>A Javascript jQuery Thickbox</h1>
	
		<a href="images/img1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
      <img src="images/img1_t.jpg" alt="Single Image" border="0"/>
    </a>
    <a href="images/img2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
      <img src="images/img2_t.jpg" alt="Single Image" border="0"/>
    </a>
    <a href="images/img3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox">
      <img src="images/img3_t.jpg" alt="Single Image" border="0"/>
    </a>
    </center>
	</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Onemajorq

2009-10-22 18:58:53

thank you so much .i'm learning....

Bradley

2009-10-22 15:39:51

doesn't run for me do i need additional jquery javascript code, e.g. $(function(){ $('.thickbox').thickbox(); }); bradleyelfman@yahoo.com

Sandeep

2009-06-10 03:34:17

Thnqq so much

Miki

2008-11-12 04:29:08

works good, thanks!

Cracc

2008-10-20 07:07:26

cooler comment

Derek

2008-07-28 22:43:34

is there a way to add js content which then can be transfered to another page? like a list of checkboxes in the thickbox then the checked boxed data is transfered to the page?

Vinod

2008-02-20 06:09:42

This is really best example of thickbox but if you know that how to change appearance (changing style) of confirmation box.Please guide.

Femy

2008-01-24 18:26:47

Nice work

Kurtqian

2007-12-26 17:47:03

jquery UI is the favority one i use in my website

Thiago

2007-11-22 04:39:44

Great ! The resize of images work perfectly, i was looking for a long time !

Mike

2007-11-02 10:09:26

this demo doesnt work for me.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

jQuery ThickBox

Comment on this example