jQuery ThickBox

by Vincy. Last modified on July 12th, 2022.

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

jQuery Thickbox Features

  • While showing ThickBox, it disables the background screen and prevents users to interact with the web page until the 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, and 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 the <HEAD> portion.

After that, we need to add HTML elements with appropriate attribute names and values to trigger the 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 a 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

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

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

↑ Back to Top

Share this page