Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
152 lines (123 loc) · 6.1 KB
/
Copy pathindex.html
File metadata and controls
152 lines (123 loc) · 6.1 KB
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Zoom jQuery Plugin</title>
<link rel="stylesheet" href="css/image-zoom.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="main">
<div class="inner">
<h1 class="txt-center"><a href="https://github.com/Mario-Duarte/image-zoom-plugin">Image Zoom jQuery Demo</a></h1>
<p class="txt-center">Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less than 1.5kb.</p>
<p class="txt-center">Like this plugin and want to thank me? <a href="https://paypal.me/MarioDuarte?locale.x=en_GB" target="_blank">Buy me a coffee!</a> To keep me going and improve this plugin.</p>
<p class="txt-center"><a class="btn" href="https://github.com/Mario-Duarte/image-zoom-plugin" target="_blank">View Repo</a> <a class="btn" href="https://github.com/Mario-Duarte/image-zoom-plugin/releases" target="_blank">Download</a> <a class="btn" href="https://github.com/Mario-Duarte/image-zoom-plugin/issues" target="_blank">Report Issue</a></p>
<p> </p>
<h2>How it works?</h2>
<p>Allows users to click/tap to zoom-in on an image, pan around to inspect the details and click again to zoom-out.<br/>Moving the focus out of the image will also reset the zoom.</p>
<p> </p>
<h3>Why?</h3>
<p>Why reinventing the wheel you may ask? I love to create and explore so why not sharing with others the things I create, hopefully will help a lot of younger developers.</p>
<p> </p>
<div class="image-container">
<p><b>Image with default zoom:</b></p>
<img id="imageZoom" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
<p>Example code:</p>
<code>
<img id="imageZoom" src="https://picsum.photos/1080/720" alt="A image to apply the ImageZoom plugin">
<script>
$(document).ready(function(){
$('#imageZoom').imageZoom();
});
</script>
</code>
<p><b>Image with fullWidth prop:</b></p>
<img id="imageZoomFullWidth" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
<p>If <i>fullWidth</i> is true, the zoom level is calculated to fit the image's natural width, it will fallback to the value set by the <i>zoom</i> if the image's natural width is not available or less than the container's width.</p>
<p>Example code with fullWidth prop:</p>
<code>
<img id="imageZoomFullWidth" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
<script>
$(document).ready(function(){
$('#imageZoomFullWidth').imageZoom({ fullWidth: true });
});
</script>
</code>
<p> </p>
<p><b>Image with 200% zoom:</b></p>
<img id="imageZoomExtra" src="https://picsum.photos/1440/1080" alt="A image to apply the ImageZoom plugin">
<code>
<img id="imageZoomExtra" src="https://picsum.photos/1440/1080" alt="A image to apply the ImageZoom plugin">
<script>
$(document).ready(function(){
$('#imageZoomExtra').imageZoom({zoom : 200});
});
</script>
</code>
<p> </p>
<p><b>Image with 300% zoom:</b></p>
<img id="imageZoomExtraPlus" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
<code>
<img id="imageZoomExtraPlus" src="https://picsum.photos/1920/1080" alt="A image to apply the ImageZoom plugin">
<script>
$(document).ready(function(){
$('#imageZoomExtraPlus').imageZoom({zoom : 300});
});
</script>
</code>
<p> </p>
<p><b>Multiple mages with same class:</b></p>
<img src="https://picsum.photos/1921/1081" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1922/1082" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1923/1083" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1924/1084" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<code>
<img src="https://picsum.photos/1921/1081" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1922/1082" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1923/1083" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<br/>
<img src="https://picsum.photos/1924/1084" alt="A image to apply the ImageZoom plugin" class="zoom-images">
<script>
$(document).ready(function(){
var zoomImages = $('.zoom-images');
zoomImages.each(function() {
$(this).imageZoom();
});
});
</script>
</code>
</div>
</div>
</section>
<footer>
<p>Created with <span>♥</span> by <a href="https://github.com/Mario-Duarte" target="_blank">Mário Duarte</a> © 2020</p>
</footer>
<script src="js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="js/image-zoom.js" type="text/javascript"></script>
<script>
var $ = jQuery.noConflict();
$(document).ready(function(){
// Image zoom plugin code
var zoomImage = $('#imageZoom');
var zoomImageFullWidth = $('#imageZoomFullWidth');
var zoomImageExtra = $('#imageZoomExtra');
var zoomImagePlus = $('#imageZoomExtraPlus');
var zoomImages = $('.zoom-images');
zoomImage.imageZoom();
zoomImageFullWidth.imageZoom({ fullWidth: true });
zoomImageExtra.imageZoom({zoom : 200});
zoomImagePlus.imageZoom({zoom : 300});
zoomImages.each(function() {
$(this).imageZoom();
});
});
</script>
</body>
</html>