-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
290 lines (270 loc) · 9.16 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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html>
<head>
<title>Imagery - A Simple Image Picker Plugin</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="imagery.css"/>
<style type="text/css">
html{
background-color: #eeeeee;
scroll-behavior: smooth;
overflow-x: hidden;
}
nav{
width: 100%;
height: 64px;
background-color: #e65100;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
font-family: "Open Sans",sans-serif;
}
ul.imagery_nav{
list-style:none;
text-transform: capitalize;
}
ul.imagery_nav li{
list-style: none;
display: inline-block;
float: left;
margin-left:20px;
margin-right: 10px;
margin-top: -16px;
text-decoration: none;
padding:20px 5px 20px 5px;
}
ul.imagery_nav li:hover{
background-color: rgba(0,0,0,0.25);
}
ul.imagery_nav li a {
color: white;
font-weight: 500;
font-size: 18px;
text-decoration: none;
}
section{
width: 100%;
height: 300px;
position: relative;
top: 60px;
left: 0;
right: 0;
}
.plugin-header{
width: 100%;
height: auto;
font-size: 45px;
font-weight:600;
text-align: center;
}
p.desc{
text-transform: capitalize;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-weight: 400;
font-size: 18px;
line-height: 2;
}
div.sample{
width:100%;
height: 300px;
background-color: #eeeeee;
}
div.demo{
float: left;
width: 50%;
height: 300px;
}
div.codes{
float: right;
width: 50%;
height: 300px;
}
pre{
width: 100%;
height: auto;
display: block;
padding: 10px;
margin-left: -20px;
white-space: pre;
background-color: white;
}
div.other-option{
width: 100%;
height: 400px;
margin-top: 150px;
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="imagery.js"></script>
<nav>
<ul class="imagery_nav">
<li>
<a href="">Documentation</a>
</li>
<li>
<a href="">Demos</a>
</li>
</ul>
</nav>
<section>
<h2 class="plugin-header">
Imagery - A Simple Image Picker
</h2>
<p class="desc">
simple image plugin that enable users to pick an image just like picking a color out of a color toolbox<br>
The set up is very simple,<br>
Download or Fork or Clone this repository from either github or bitbucket
Extract the files - imagery.js,index.html,imagery.css, Folder(images- contains the images for testing purpose)
This can be done by visiting <span style="text-transform: none;"><a href="https://github.com/LORD-KAY/Imagery">https://github.com/LORD-KAY/Imagery</a></span> - The repository to get the plugin from .
</p>
</section>
<section>
<div class="sample">
<div class="demo">
<h4 style="text-transform: capitalize;text-decoration: underline;">Sample Demo</h4>
<div id="image-container">
<img src="images/cover1.jpg" data-src="images/cover1.jpg" />
<img src="images/cover2.jpg" data-src="images/cover2.jpg" />
<img src="images/cover4.jpg" data-src="images/cover4.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("div#image-container > img").Imagery({
addOpacity:.6,
indicator:true,
allowHover:true,
usebase64Img:false,
useImgAsIndicator:"CORRECT",
customIndicator:{
"border-color":"#333333",
"transition":"all 1s ease-in-out"
},
onSelectedImage:function(data){
$("#get-image-value").html(data);
console.log(data);
}
});
});
</script>
<!-- <div class="image-container-dropdown" style="width: 100px;height: 20px;background-color: white;cursor: pointer;"></div> -->
</div>
<div class="codes">
<h4 style="text-decoration: underline;">Sample Usage HTML</h4>
<p>
Create an outer container to house all your images and then use it as a selector to point towards the imagers in that particular container $("selector") or Create a unique id or same class name for all the image you will use
</p>
<pre><code><div id="image-container">
<img src="images/cover1.jpg" data-src="images/cover1.jpg" class="responsive-img"/>
<img src="images/cover2.jpg" data-src="images/cover2.jpg" class="responsive-img"/>
</div>
OR
<img src="images/cover3.jpg" data-src="images/cover3.jpg" id="myImage"/>
<img src="images/cover4.jpg" data-src="images/cover4.jpg" id="myImage"/>
</code></pre>
<h4 style="text-decoration: underline;">Sample Usage JQUERY</h4>
<p>
Use the outer selector to point to the inner selector eg. $("selector > img")
</p>
<pre><code>$("document").ready(function(){
$("div#image-container > img").Imagery()
});
OR
$("document").ready(function(){
$("#myImage").Imagery()
});
</code></pre>
<p>This will load the plugin together with the default plugin settings</p>
<h4 style="text-decoration: underline;">Previewing the Results</h4>
<p>
If the user whats to preview the results<br>
Define this tag in anywhere you want to preview
</p>
<pre><code><div id="preview-container"></div>
</code></pre>
<p>This will display the image the user has selected</p>
</div>
</div>
</section>
<div id="preview-container">
</div>
<div id="get-image-value"></div>
<section>
<div class="other-option" style="text-align: left;">
<h4 style="text-align: left;font-weight: 400;font-size: 25px;text-decoration: underline;">Other Options for the Plugin</h4>
<p style="margin-left: 20px;">
<pre style="padding-left: 30px;"><code>$("document").ready(function(){
$("div#image-container > img").Imagery({
wrapperCss:{},
indicator:true,
wrapperAttrs:{},
allowHover:false,
addOpacity:1,
usebase64Img:false,
customIndicator:{
},
onSelectedImage:function(data){
},
onHoverImage:function(data){
}
});
});
</code></pre>
</p>
<p style="margin-left: 20px;margin-bottom:20px;line-height: 2;">
<strong>wrapperCss:{}</strong> - Helps you to define your custom css stylings to the images . It is an object hence key->value pair<br>
Example<br>
wrapperCss:{ <br>
borderRadius:"20px",<br>
marginTop:"10px",<br>
marginBottom:"10px",<br>
}<br>
OR<br>
wrapperCss:{ <br>
"border-radius":"20px",<br>
"margin-top":"10px",<br>
"margin-bottom":"10px",<br>
}<br>
It is done this way because javascript uses camelCases when applying css with it hence ( borderRadius )<br>
<strong>wrapperAttrs:{}</strong> - Helps you to define ids' and classes to the images . It is an object hence key->value pair<br>
<strong>allowHover</strong> - Accepts a boolean value either true or false . This allows you to hover the image to select it automatically<br>
<strong>usebase64Img</strong> - Convert the image selected to base 64 { An alternative option image url }<br>
<strong>addOpacity</strong> - Accepts number within the range of 0.2 - 1 with 0.2 inclusive. This allows you to add transparency to an image when it is clicked i.e if you dont want the active circle thing around the image<br>
<strong>customIndicator</strong> - Accepts an object of css { "border-radius":"5px" } like and renders it to the white circular indicator around the image when it is active<br>
<strong>NB. Better Still you can decide to use both the active circle and the opacity</strong>
<br>
<br>
NOW TO GET THE VALUE OF THE SELECTED IMAGE BY CLICKING USE<br>
<strong>onSelectedImage:function(data){<br>
$("#get-value").html(data);<br>
}</strong><br>
data - Responsible for getting the value from the plugin hence very important to parse the data as a value<br>
Also this will display the value in the defined id tag #get-value.<br>
If you don't wont the value to display , hide it with css - simple as that <br><br>
You can also use DATA ATTRIBUTES if you don't want it to display on the screen but rather accepts it at the background<br>
Define a container in which you want the data to be accepted
<pre style="padding-left: 40px;"><code><div id="get-value" ></div>
</code></pre><br>
Define a key for which you will be using to access the value in the container you created <br>eg data-value - value is the key here, what you will use to access the data in <i>data-value</i><br>
<strong style="line-height: 2;">
onSelectedImage:function(data){<br>
<span style="margin-left: 22px;">$("#get-value").data("value",data)<span><br>
}<br>
From this example, the key is <i>value</i> and the value itself is <i>data</i><br>
If you want to access the data, what you need to do is just use the selector<br>
$("#get-value").data("value")
</strong><br>
More To Come Later !!!!!!!!!!!!!<br>
Contact Details in the Readme file<br>
Designed By LORD KAY ACHEAMPONG - offeilord@gmail.com<br>
</p>
</div>
</section>
</body>
</html>