Here you will learn how to dynamically preview image on your web page with help of jQuery. The image preview shows up when user put mouse pointer over the link. After mouse pointer lost focus on link, image preview disappear. Take a look at image preview demo to better understand what we call web image preview.
Demo of jQuery image preview
When visitors cursor hovering over "The sunset" link, an image preview shows up. After mouse pointer is moved off, image preview disappear. Now we will discuss how to install preview image on your page or blog (there are more javascript effect tutorials on my blog).
On this blog you can find how to alternate image after onclik event.
For those interested in changing image when onclick event occurs with jQuery I leave the link.
Guide to implement jQuery image preview on your page
- Your page should point to external jquery library and to imgpreview plugin
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script> - We need some HTML code, one unordered list with one list item. This list item must have link to image
<ul id="first"> <li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a> </li> </ul> - Add jQuery code which instruct that when mouse pointer is over unordered list (ul) with id "first", method imgPreview is called. This method shows the image.
<script type="text/javascript"> $(document).ready(function(){ $('ul#first a').imgPreview({ imgCSS: { width: 100 } }); }); </script>
- imgCSS: { width: 100 } - width is determined.
- And that's it, demo works!!!
Sample code of HTML page for image preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#first a').imgPreview({
imgCSS: { width: 100 }
});
});
</script>
</head>
<body>
<ul id="first">
<li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li>
</ul>
</body>
</html>
To find more about imgPreview plugin visit page of it's creator James Padolsey.
Preview image for blogspot / blogger users
Blogger users should write all jscript code in one line or can call external javascript file .
For more information you can take a look at :
Sample of image preview working code in blogspot (in one line to avoid <br> tags):
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script><script src="http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js.txt" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){$('ul#first a').imgPreview({imgCSS: { width: 100 }});});</script><ul id="first"><li><a href='http://www.freefoto.com/images/15/10/15_10_70_thumb.jpg' rel="nofollow">The Sunset</a></li></ul>
Posts
4 comments:
I like how nice and light this, but I wish it could accommodate links of different formats for the previews.
e.g., I am trying to a find a solution to preview 200+ documents (Word, PPT, etc.) with hover thumbnails that would launch the doc itself upon click.
I wonder if you could teach me how to do the text preview effect??
Sorry but I do not understand what you mean when you say text preview effect.
Sorry, I mean tooltip and URL preview like this site's demo
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
thanks
Post a Comment