.Net Logics: jQuery Zoom Image on Mouseover using jQuery Image Zoom Plugin Example

Tuesday 9 April 2013

jQuery Zoom Image on Mouseover using jQuery Image Zoom Plugin Example

Before using this plugin remember that you need to create two or three sets of different dimension images based on your requirements and place it in your application like as shown below images dimensions

a. Thumbnail - 100 x 67 pixels

b. Small - 411 x 274 pixels

c. Large - 1280 x 854 pixels

By using jQuery image Zoom plugin we need to write the few lines of code like as shown below to set zoom effect for image on mousover

$(function() {

$("#img1").elevateZoom();

});

</script>

Basic Example

<head>

<title>jQuery Zoom Image on Mouse Hover</title>

</head>

<body>

<div>

</div>

$(function() {

$("#img1").elevateZoom();

});

</script>

</body>

</html>

In header section I added jquery.elevatezoom.min.js plugin this you can get it from attached downloadable folder or for this link Elevate jQuery Image Zoom Effect and I used two set of different dimension images small, large images.

Demo

Here I am going to explain another example with zoom and lightbox effect for that we need to write the code

Example:

<head>

<title>jQuery Zoom Image on Mouse Hover using jQuery Image Zoom Plugin</title>

#gallery_01 img{border:2px solid white;width: 96px;}

.active img{border:2px solid #333 !important;}

</style>

</head>

<body>

<div>

<a href="#" class="active" data-image="images/small/image1.png"

data-zoom-image="images/large/image1.jpg">

</div>

$(document).ready(function() {

$("#img1").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });

$("#img1").bind("click", function(e) {

var ez = $('#img1').data('elevateZoom');

ez.closeAll();

$.fancybox(ez.getGalleryList());

return false;

});

</script>

</body>

</html>

In header section I added jquery.elevatezoom.min.js, jquery.fancybox.pack.js plugins these you can get it from attached downloadable folder or from these links Elevate jQuery Image Zoom Effect , fancybox jQuery plugin and I used three set of different dimension images thumb, small, large images.

Demo

8 comments:

Add comment

.Net Logics

Pages

Tuesday 9 April 2013

jQuery Zoom Image on Mouseover using jQuery Image Zoom Plugin Example

8 comments:

Blog Archive

About Me