- Tutorials / JavaScript
- Monday, 11th Oct, 2010
Home » Tutorials » JavaScript » JQuery: Thumbnail With Fading Caption
Today, the objective of this lesson is to create a thumbnail with fading caption by using the famous JavaScript Framework – JQuery. Not sure what is this about? Don’t worry, mouse over on the thumbnail below.
Cool right? The fadeIn and fadeOut methods are the keys to achieve our objective. FadeIn() and FadeOut are the methods to animate the opacity of the selected elements. In order to fade in your hidden object, you need to implement fadeIn() method to display it on screen. In contrast, fadeOut() is use to hide the object until it opacity reach 0 and display style property is set to none. There are two parameters for fadeIn() and fadeOut(), which is:
.fadeOut( [ duration ], [ callback ] ) .fadeIn( [ duration ], [ callback ] )
The [duration] parameter is use to specify the duration of the animation, you set it in strings ‘slow’, ‘fast’ or in milliseconds, example: ‘400’.
The [callback] parameter is use to call / fire a function once the the animation is complete. For example, you might want to create a pop up window when the elements is fade in.
So, let’s start to create the thumbnail with fading caption.
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Thumbnail With Fading Caption</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> </head> <body> <div class="item"> <img src="thumb01.jpg" width="100" height="100" alt="" /> <div class="caption"> <a href="#"><strong>Home Page</strong><br /> Lorem ipsum dolor sit amet.</a> </div> </div> <div class="item"> <img src="thumb02.jpg" width="100" height="100" alt="" /> <div class="caption"> <a href="#"><strong>Home Page</strong><br /> Lorem ipsum dolor sit amet.</a> </div> </div> </body> </html>
As you can see above, we create the thumbnail image and we store the description in the div called ‘caption’.
.item { float: left; height: 100px; margin: 5px; width: 100px; /*In order for absolutely positioning child element(caption div), you need to set position relative for its parent*/ position: relative; } .item .caption { background: #000; cursor: pointer; height: 100px; width: 100px; /*Make it overlay on its parent*/ position: absolute; /*Align it at top of its parent*/ top: 0; } .item .caption a { color: #0099cc; display: block; font-size: 14px; text-decoration: none; padding: 15px; }
There are several things you need to take care when writing your css code. You must specify the position properties of div named ‘item’ to ‘relative’ and same to the position properties of div named ‘caption’ to ‘absolute’, else the caption wouldn’t overlay on its parent, which is the ‘item’ div.
$(document).ready(function() { $('.item .caption').hide(); //On mouse over $('.item').hover(function() { //Display the caption $(this).find('div.caption').stop().fadeIn(200); }, //When mouse leave function() { //Hide the caption $(this).find('div.caption').stop().fadeOut(200); }); });
Here, we implement JavaScript to the elements. In this case, we hide our caption when web page is loaded and we fade in, and fade out the caption with 200 milliseconds animation when user interact with the elements.
The final code as below:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Thumbnail With Fading Caption</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { $('.item .caption').hide(); //On mouse over $('.item').hover(function() { //Display the caption $(this).find('div.caption').stop().fadeIn(200); }, //When mouse leave function() { //Hide the caption $(this).find('div.caption').stop().fadeOut(200); }); }); </script> <style> .item { float: left; height: 100px; margin: 5px; width: 100px; /*In order for absolutely positioning child element(caption div), you need to set position relative for its parent*/ position: relative; } .item .caption { background: #000; cursor: pointer; height: 100px; width: 100px; /*Make it overlay on its parent*/ position: absolute; /*Align it at top of its parent*/ top: 0; } .item .caption a { color: #0099cc; display: block; font-size: 14px; text-decoration: none; padding: 15px; } </style> </head> <body> <div class="item"> <img src="thumb01.jpg" width="100" height="100" alt="" /> <div class="caption"> <a href="#"><strong>Home Page</strong><br /> Lorem ipsum dolor sit amet.</a> </div> </div> <div class="item"> <img src="thumb02.jpg" width="100" height="100" alt="" /> <div class="caption"> <a href="#"><strong>Home Page</strong><br /> Lorem ipsum dolor sit amet.</a> </div> </div> </body> </html>
That’s it. Save your document and test it on your browser!