jQuery ThickBox

by Vincy. Last modified on June 1st, 2021.

jQuery ThickBox is a kind of popup dialog overlay on top of the browser window. This is an UI widget written in JavaScript by Cody Lindley using jQuery library. ThickBox can be displayed based on events like onClick, onMouseDown, etc.

jQuery Thickbox Features

  • While showing ThickBox, it disables background screen and prevents user to interact with the web page until ThickBox overlay is closed.
  • This popup overlay widget will stay positioned in the viewport even if the web page is scrolled.
  • ThickBox can have an image gallery, external HTML, iFrame, AJAX response as its content.
  • It can load dynamic data on the fly.

Implementing ThickBox

jquery_thickbox_output

For implementing Thickbox in our project, the required steps are,

  1. Download jQuery Library and ThickBox files (thickbox.js, loadingAnimation.gif image and thickbox.css).
  2. Open ThickBox Javascript file and specify loader image path.
  3. Import jQuery Library and ThickBox files inside <HEAD> portion.

After that, we need to add HTML elements with appropriate attribute name and value to trigger ThickBox display.

Example for Showing ThickBox with Enlarged Image

In this example, we are using <a> element to trigger ThickBox. In this anchor element, we should add class attribute having the thick box as its value (class=”checkbox”). In the anchors, href we have given a larger image ad, it will be shown as content in the overlay popup. HTML code will be,

<html>
<head>
<title>jQuery ThickBox</title>
<script language="javascript" src='jquery/jquery.min.js' type='text/javascript'></script>
<script language="javascript" src="thickbox/thickbox.js" type="text/javascript"></script>
<link href='thickbox/thickbox.css' rel='stylesheet' type='text/css' />
</head>
<body>
<a href="images/popup.jpg" title="ThickBox Popup" class="thickbox"><img src="images/popup_thumb.jpg" alt="popup_thump"/></a>
</body>
</html>

Note:

If no dimension is provided for the ThickBox, then it will be 630px X 440px by default.

Download jQuery ThickBox Source Code

Leave a Reply

Your email address will not be published. Required fields are marked *

Popular Articles

↑ Back to Top