-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
115 lines (69 loc) · 3.49 KB
/
index.html
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Magnify glass for image zoom using Jquery and CSS3</title>
<style>
/*Some CSS*/
* {margin: 0; padding: 0;}
body { font-family:Arial, Helvetica, sans-serif; }
h1 { text-align:center; letter-spacing:-1px; line-height:30px; padding-top:50px; padding-bottom:10px; }
p { text-align:center; padding-bottom:10px; }
/*Lmagnifying glass*/
.magnify { margin: 50px auto; position: relative;}
/*Lets create the magnifying glass*/
.large {
width: 175px; height: 175px;
position: absolute;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
/*Multiple box shadows to achieve the glass effect*/
-webkit-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);
-moz-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);
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);
/*Lets load up the large image first*/
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small { display: block; }
</style>
</head>
<body>
<h1>Magnify glass for image zoom using Jquery and CSS3</h1>
<p> Original Code by <a href="http://twitter.com/ruby_on_tails" target="_blank">ruby_on_tails</a> for <a href="http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3" target="_blank">TheCodePlayer</a>. Brought you by Web3Canvas </p>
<p>Click <a href="https://github.com/rjsandim/Magnify-glass-with-multiple-images-support" target="_blank">here</a> to download the last version of magnify with support of multiple images per page (it's just an improvement of code shared by TheCodePlayer, there is a link above referring them). </p>
<!-- Lets make a simple image magnifier -->
<div class="magnify" style="width: 700px;">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large" style="background: url('images/macbook.png') no-repeat;"></div>
<!-- This is the small image -->
<img class="small" src="images/macbook.png" width="700"/>
</div>
<div class="magnify" style="width: 400px;">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large" style="background: url('images/iphones.png') no-repeat;"></div>
<!-- This is the small image -->
<img class="small" src="images/iphones.png" width="400"/>
</div>
<div class="magnify" style="width: 550px;">
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large" style="background: url('images/macpro.png') no-repeat;"></div>
<!-- This is the small image -->
<img class="small" src="images/macpro.png" width="550"/>
</div>
<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->
<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/magnify.min.js" type="text/javascript"></script>
</body>
</html>