Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Saturday 18 February 2017

Image Zoom Magnifying Glass Effect with CSS3 and jQuery

Author:  |   |  No Comments | 

In Image Zoom , Magnifying Glass Effect is very useful in now a days. Most of eCommerce Website or any product selling website include this type of facility for their customer.

eCommerce Website owner always put this functionality to increase traffic of the customer on their website. Using this feature, user can each point of image with zoom.

When small size of image in the webpage and user can't see properly than if these feature will added on image hover then user can easily will see that image with zoom.

Here, i explain whole code with step by step . Let's follow the step and run the example.


JAVASCRIPT :
  • This condition is used in .mousemove() function . In this condition when user hover on the image , script will execute.
  • image_object variable will create a new image object with same image. For getting dimention from the image we must create object of the image.

1
2
3
4
5
6
7
if(!sub_width && !sub_height)
{
var image_object = new Image();
image_object.src = $(".small").attr("src");
sub_width = image_object.width;
sub_height = image_object.height;
}


  • In this below condition , This is .zoom-area position of the div. mx and my variable will be take position of the div from left and top side.
  • If Pointer will be move outside the container then magnify will be hide otherwise magnify will be display.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
else
{
 var magnify_position = $(this).offset();
 var mx = e.pageX - magnify_position.left;
 var my = e.pageY - magnify_position.top;
 if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
 {
  $(".large").fadeIn(100);
 }
 else
 {
  $(".large").fadeOut(100);
 }
 if($(".large").is(":visible"))
 {
  var rx = Math.round(mx/$(".small").width()*sub_width - $(".large").width()/2)*-1;
  var ry =Math.round(my/$(".small").height()*sub_height - $(".large").height()/2)*-1;
  
  var bgp = rx + "px " + ry + "px";
  
  var px = mx - $(".large").width()/2;
  var py = my - $(".large").height()/2;

  $(".large").css({left: px, top: py, backgroundPosition: bgp});
 }
}

CSS :
  • Now add css code.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
 *
 {
  margin: 0;
  padding: 0;
 }
 .zoom-area
 {
  width: 500px;
  margin: 50px auto;
  position: relative;
  cursor: none
 }
 /* create magnify glass */
 .large
 {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
 
  /* box shadow for glass effect */
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
  0 0 7px 7px rgba(0, 0, 0, 0.25), 
  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  
  /*hide the glass by default*/
  display: none;
 }
 .small
 {
  display: block;
 }
</style>

HTML :


1
2
3
4
5
6
7
8
9
<div class="magnify">
 
 <!-- container of the magnify glass with original/large version -->
 <div class="large"></div>
 
 <!-- This is the small image -->
 <img class="small" src="https://i.ytimg.com/vi/6lt2JfJdGSY/maxresdefault.jpg" width="500" height="500" />
 
</div>

FULL CODE :

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
 <head>
  <style>
  *
  {
   margin: 0;
   padding: 0;
  }
  .zoom-area
  {
   width: 500px;
   margin: 50px auto;
   position: relative;
   cursor: none
  }
  /* create magnify glass */
  .large
  {
   width: 175px;
   height: 175px;
   position: absolute;
   border-radius: 100%;
  
   /* box shadow for glass effect */
   box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
   0 0 7px 7px rgba(0, 0, 0, 0.25), 
   inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
   
   /*hide the glass by default*/
   display: none;
  }
  .small
  {
   display: block;
  }
  </style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script>
  $(document).ready(function()
  {
   var sub_width = 0;
   var sub_height = 0;
    $(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");

   $(".zoom-area").mousemove(function(e){
    if(!sub_width && !sub_height)
    {
     var image_object = new Image();
     image_object.src = $(".small").attr("src");
     sub_width = image_object.width;
     sub_height = image_object.height;
    }
    else
    {
     var magnify_position = $(this).offset();

     var mx = e.pageX - magnify_position.left;
     var my = e.pageY - magnify_position.top;
     
     if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
     {
      $(".large").fadeIn(100);
     }
     else
     {
      $(".large").fadeOut(100);
     }
     if($(".large").is(":visible"))
     {
      var rx = Math.round(mx/$(".small").width()*sub_width - $(".large").width()/2)*-1;
      var ry = Math.round(my/$(".small").height()*sub_height - $(".large").height()/2)*-1;

      var bgp = rx + "px " + ry + "px";
      
      var px = mx - $(".large").width()/2;
      var py = my - $(".large").height()/2;

      $(".large").css({left: px, top: py, backgroundPosition: bgp});
     }
    }
   })
  })
  </script>
 </head>

 <div class="magnify">
  
  <!-- container of the magnify glass with original/large version -->
  <div class="large"></div>
  
  <!-- This is the small image -->
  <img class="small" src="https://i.ytimg.com/vi/6lt2JfJdGSY/maxresdefault.jpg" width="500" height="500" />
  
 </div>
</html>

Output :
magnify zoom image hover

 Click Here For Live Demo :

Live Demo

, , , , , ,

0 comments:

Post a Comment

Like us on Facebook

Site Visitor

Powered by Blogger.