jquery-simple-image-zoomer/index.html at master · CodeHimBlog/jquery-simple-image-zoomer · GitHub

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
<!DOCTYPE html>
<html>
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta content="Free jquery plugin to smoothly zoom image. simple zoomer helps you to create a lightweight, easy to use jquery based image zooming option in lightbox, photo gallery or images projects." name="description" />
    <meta content="image zoomer, jquery zooming, css zoomer, zoom option, how to create simple zoomer, free zoomer, jquery zoom plugin" name="keywords" />
    <title> Simple Image Zoomer jQuery Plugin </title>
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.simple.zoomer.js"> </script>
<link rel="stylesheet" href="css/simple-zoomer.css" />


<!--Demo Only-->
<link rel="stylesheet" href="demo-only.css" />

</head>
<body>


<main>
<div class="intro codehim-header">
<h1> Simple Image Zoomer jQuery Plugin </h1>
<p>
A lightweight, simple and easy to use jQuery plugin to smoothly zoom images.
</p>

<div class="action">
<a class="btn" href="https://github.com/CodeHimBlog/jquery-simple-image-zoomer" target="_blank"> Fork on GitHub </a>
<a class="btn" href="https://github.com/CodeHimBlog/jquery-simple-image-zoomer/archive/master.zip"> Download </a>
</div>
</div> <!--//intro-->

<article>

<h2> Simple Zoomer Demo </h2>

<div class="image-container">

<img class="myimage" src="image/street.jpg">

</div> <!--//image-container-->

<script>
$(function(){
$(".myimage").zoomer();

});
</script>


<h2> Main Features</h2>
<ul>
<li>Smooth zooming in and out.</li>
<li> Scrolling and swiping supported. </li>
<li>Directly and also can be used in lightsbox, gallery and photo projects. </li>
<li> Fully customizable with css.</li>
<li> Easy to use and implement.</li>
</ul>

<!--Demo Only Ad, don't remove this if you distribute this plugin to others-->
  <div style="margin: 20px">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-7089100907045419"
     data-ad-slot="7782420780"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>
<h2> How to Implement</h2>
<p>Nothing to do tough in order to get it working, just attach the <code>zoomer();</code> with the selector <code>img</code> in DOM ready function.  An example below: </p>

<pre>
$(document).ready(function(){
    $("#your-img-id").zoomer();
});
</pre>
<b> Note: </b> <br>
<ol>
<li>No need to create anything for zoomer, it will automatically create all necessary things in HTML document. </li>
<li>Must include "simple-zoomer.css" file to your website/app. </li>
<li> You can customize styles, placement &amp; other relevant things in css. </li>
</ol>

<p> To change zooming limit and origin, update the following options. </p>

<pre>
$(function(){
$(".myimage").zoomer({
      maxLimit: 100, //default value
      zoomingOrigin: (0, 0), //default value
   });
});
</pre>

</article>
</main>

<footer class="credit">
Coded with <span title="heart">♥</span> by Asif Mughal &copy; 2018 - <a href="https://www.codehim.com" rel="dofollow" title="Awesome Web Projects and Tutorials" target="_blank"> Codehim.com </a>
      </footer>

</body>
</html>