LightBox for displaying contents and image using a common jquery plugin

Displaying contents using a sexy lightBox has become a kind of fashion in the web industry. I have seen many scripts to do this but most of them are complex and bulky. I have come up with a very simple way to do this. Following are the steps to do this.   



  1. Download jquery-1.7.1.min.js, thickbox.js, thickbox.css and loading image.
  2. Insert the following code between the <head></head> tag.
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css"
  media="screen" /> 
 
    3. To display any image in lightBox simply use the following code.

<a href="image path"  class="thickbox"><img src="image path" width="200"   border="0" /></a>

    4. To display your content in lightBox , first create a page for the contents you wish to display e.g. test.php then use the following code.

<a href="test.php?TB_iframe=true&height=180&width=390&modal=true" class="thickbox">CLICK HERE</a>

In the Image lightBox the close window button appears automatically but for the content lightBox you need to add it manually using the code

<a href="javascript:void(0)" onClick="self.parent.tb_remove();">Close</a>

I hope this tutorial will be helpful for many developers. Enjoy.

Comments

Post a Comment

Popular posts from this blog