Selasa, 24 September 2013

How To Create An Image Hover Preview Effect Using jQuery

How To Create An Image Hover Preview Effect Using jQuery
Maybe you've seen the image display when the mouse is directed (mouse hover) will bring up a larger image. Normally used for gallery, either photo or template. This is what I will discuss today is how to create a preview image with jQuery.

For more details please see the screenshot below :
How To Create An Image Hover Preview Effect Using jQuery

Step #1 Put jQuery Script File

Simply put, jQuery is necessary to create dynamic web. JQuery will show effects, animation, and functions which are very interesting. Many plugins / widget using jQuery and it will not run without jQuery. You do not have to be afraid, jQuery scripts are not going to burden the blog / website, because we can put external link from jQuery script hosted on Put jquery external link just above the </head>
<script src='' type='text/javascript'/>

Step #2 Upload jQuery Image Hover Effect Script

Add JavaScript is before the </head> tag
<script type="text/javascript">
* Image preview script
* powered by jQuery (
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");     
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
this.title = this.t;
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
// starting the script on page load

Step #3 CSS Style

Use this CSS style for this Image hover preview.
border:1px solid #ddd;

Step #4 HTML Structure

Html document, especially in the link will be given a preview of the hover effect, add class="preview" code and title="image description" so that the result will be like the following example :
<a class="preview" href="Image URL" title="Image Description"><img src="Image URL" width="150" /></a>
It's finished for this tutorial
Hopefully can help and understand.
Good luck to you.
Ramzi Ebaz

0 komentar:

Posting Komentar