Post
Ask Question

Image Thumbnails control in JQuery

Introduction

 
We start by creating an HTML file and aligning a couple of images horizontally. The control would look something like this.
 
image thumbnail
 
On hovering the third Image:
 
image thumbnail in jquery
  1. <body>  
  2.    <div class="”div1”" id="”div1”">  
  3.        <ul>  
  4.            <li>  
  5.                <img src="images\1.jpg" class="smallImage"></img></li>  
  6.            <li>  
  7.                <img src="images\2.jpg" class="smallImage"></img></li>  
  8.            <li>  
  9.                <img src="images\3.jpg" class="smallImage"></img></li  
  10.   
  11.            <li>  
  12.                <img src="images\4.jpg" class="smallImage"></img></li>  
  13.        </ul>  
  14.    </div>  
  15. </body> 
This HTML markup creates the images. The CSS class “smallImage” has been added to adjust the height and width of the images.
  1. <style type="text/css">  
  2.         .smallImage  
  3.         {  
  4.             height: 100px;  
  5.             width: 100px;  
  6.         }         
  7.         li  
  8.         {  
  9.             float: left;  
  10.             padding: 5px position: relative;  
  11.         }  
  12.         ul  
  13.         {  
  14.             float: left;  
  15.             list-style: none;  
  16.             position: absolute;  
  17.         }  
  18.         div.div1  
  19.         {  
  20.             width: 570px;  
  21.             height: 170px;  
  22.             border-style: inset;  
  23.             border-width: 5px;  
  24.         }  
  25.     </style> 
The class for “li” has a property float:left;. This is used to align the images horizontally one after another
 
Now we are going to achieve the Hovering effect using JQuery. The Hover method in JQuery takes two eventhandlers. The first one handles the event on MouseOver and the second one handles the event for MouseOut. The JQuery script the achieve the effect is given below
  1. <script type="text/javascript">   
  2.         $(function () {   
  3.             $('.smallImage').each(function () {   
  4.                 $(this).hover(  
  5.                 function () {  
  6.                 $(this).animate({ height: "150px", width: "150px" }, 500);  
  7.                 },  
  8.                 function () {  
  9.                 $(this).animate({ height: "100px", width: "100px" }, 500);  
  10.                 }  
  11.             )  
  12.             });   
  13.         });  
  14. </script> 
Here we are selecting all the elements for which the CSS class “smallImage” is applied and apply the hover to each selected element.
 
$('.smallImage').each(function(){… this part of the code does that.
 
The first function in the Hover method handles the MouseOver event. The animate method increases the size of the image. The value 500 signifies how smoothly the animation should be carried out.
 
Attached is the entire HTML file. Hope this helps.
 
Cheers !!