Ajax Loader
HTML
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
2
 
3
  <div id="wrap">
4
 
5
    <h1>Super Cool Magnifying Glass For Image Zoom</h1>
6
 
7
    <h2>Demo</h2>
8
 
9
    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="300"/></div>
10
    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="300"/></div>
11
    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="300"/></div>
12
 
13
 
14
    <h2>Usage</h2>
15
 
16
    <p><a href="http://codetheory.in/image-zoom-magnifying-glass-effect-with-css3-and-jquery/">Read this Article</a></p>
17
 
18
  </div>
19
 
20
  <!-- Time for jquery action -->
21
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
CSS
.glass {
1
.glass {
2
  width: 175px;
3
  height: 175px;
4
  position: absolute;
5
  border-radius: 50%;
6
  cursor: crosshair;
7
  
8
  /* Multiple box shadows to achieve the glass effect */
9
  box-shadow:
10
    0 0 0 7px rgba(255, 255, 255, 0.85),
11
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
12
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
13
  
14
  /* hide the glass by default */
15
  display: none;
16
}
17
 
18
 
19
 
20
 
21
 
22
/*********
23
*** Styles just for DEMO purpose
24
*********/
25
 
26
body{
27
  background: black url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/wild_oliva.png);
28
  font-family: 'ubuntu', arial, verdana;
29
  color: #fff;
30
  font-size: 14px;
31
}
32
 
33
#wrap {
34
  max-width: 700px;
35
  margin: 20px auto;
36
}
37
 
38
.product {
39
  margin: 20px auto;
40
  text-align: center;
41
  padding: 20px;
42
}
43
 
44
h1, h2, h3 {
45
  text-align: center;
46
  margin: 50px 0;
47
  font-size: 30px;
48
  color: #fff;
49
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
50
}
51
 
52
h2 {
53
  font-size: 26px;
54
  margin: 25px 0;
55
}
56
 
57
a {
58
  color: white;
59
}
 
JavaScript
$(function() {
1
$(function() {
2
 
3
  var native_width = 0;
4
  var native_height = 0;
5
  var mouse = {x: 0, y: 0};
6
  var magnify;
7
  var cur_img;
8
 
9
  var ui = {
10
    magniflier: $('.magniflier')
11
  };
12
 
13
  // Add the magnifying glass
14
  if (ui.magniflier.length) {
15
    var div = document.createElement('div');
16
    div.setAttribute('class', 'glass');
17
    ui.glass = $(div);
18
 
19
    $('body').append(div);
20
  }
21
 
22
  
23
  // All the magnifying will happen on "mousemove"
24
 
25
  var mouseMove = function(e) {
26
    var $el = $(this);
27
 
28
    // Container offset relative to document
29
    var magnify_offset = cur_img.offset();
30
 
31
    // Mouse position relative to container
32
    // pageX/pageY - container's offsetLeft/offetTop
33
    mouse.x = e.pageX - magnify_offset.left;
34
    mouse.y = e.pageY - magnify_offset.top;
35
    
36
    // The Magnifying glass should only show up when the mouse is inside
37
    // It is important to note that attaching mouseout and then hiding
38
    // the glass wont work cuz mouse will never be out due to the glass
39
    // being inside the parent and having a higher z-index (positioned above)
40
    if (
41
      mouse.x < cur_img.width() &&
42
      mouse.y < cur_img.height() &&
43
      mouse.x > 0 &&
44
      mouse.y > 0
45
      ) {
46
 
47
      magnify(e);
48
    }
49
    else {
50
      ui.glass.fadeOut(100);
51
    }
52
 
53
    return;
54
  };
55
 
56
  var magnify = function(e) {
57
 
58
    // The background position of div.glass will be
59
    // changed according to the position
60
    // of the mouse over the img.magniflier
61
    //
62
    // So we will get the ratio of the pixel
63
    // under the mouse with respect
64
    // to the image and use that to position the
65
    // large image inside the magnifying glass
66
 
67
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
68
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
69
    var bg_pos = rx + "px " + ry + "px";
70
    
71
    // Calculate pos for magnifying glass
72
    //
73
    // Easy Logic: Deduct half of width/height
74
    // from mouse pos.
75
 
76
    // var glass_left = mouse.x - ui.glass.width() / 2;
77
    // var glass_top  = mouse.y - ui.glass.height() / 2;
78
    var glass_left = e.pageX - ui.glass.width() / 2;
79
    var glass_top  = e.pageY - ui.glass.height() / 2;
80
    //console.log(glass_left, glass_top, bg_pos)
81
    // Now, if you hover on the image, you should
82
    // see the magnifying glass in action
83
    ui.glass.css({
84
      left: glass_left,
85
      top: glass_top,
86
      backgroundPosition: bg_pos
87
    });
88
 
89
    return;
90
  };
91
 
92
  $('.magniflier').on('mousemove', function() {
93
    ui.glass.fadeIn(100);
94
    
95
    cur_img = $(this);
96
 
97
    var large_img_loaded = cur_img.data('large-img-loaded');
98
    var src = cur_img.data('large') || cur_img.attr('src');
99
 
100
    // Set large-img-loaded to true
101
    // cur_img.data('large-img-loaded', true)
102
 
103
    if (src) {
104
      ui.glass.css({
105
        'background-image': 'url(' + src + ')',
106
        'background-repeat': 'no-repeat'
107
      });
108
    }
109
 
110
    // When the user hovers on the image, the script will first calculate
111
    // the native dimensions if they don't exist. Only after the native dimensions
112
    // are available, the script will show the zoomed version.
113
    //if(!native_width && !native_height) {
114
 
115
      if (!cur_img.data('native_width')) {
116
        // This will create a new image object with the same image as that in .small
117
        // We cannot directly get the dimensions from .small because of the 
118
        // width specified to 200px in the html. To get the actual dimensions we have
119
        // created this image object.
120
        var image_object = new Image();
121
 
122
        image_object.onload = function() {
123
          // This code is wrapped in the .load function which is important.
124
          // width and height of the object would return 0 if accessed before 
125
          // the image gets loaded.
126
          native_width = image_object.width;
127
          native_height = image_object.height;
128
 
129
          cur_img.data('native_width', native_width);
130
          cur_img.data('native_height', native_height);
131
 
132
          //console.log(native_width, native_height);
133
 
134
          mouseMove.apply(this, arguments);
135
 
136
          ui.glass.on('mousemove', mouseMove);
137
        };
138
 
139
 
140
        image_object.src = src;
141
        
142
        return;
143
      } else {
144
 
145
        native_width = cur_img.data('native_width');
146
        native_height = cur_img.data('native_height');
147
      }
148
    //}
149
    //console.log(native_width, native_height);
150
 
151
    mouseMove.apply(this, arguments);
152
 
153
    ui.glass.on('mousemove', mouseMove);
154
  });
155
 
156
  ui.glass.on('mouseout', function() {
157
    ui.glass.off('mousemove', mouseMove);
158
  });
159
 
160
});
 

Magnifying Glass Plugin with jQuery and CSS3

CSSDeck G+