-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
219 lines (185 loc) · 6.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Hover Plugin by nslabz</title>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<p>{ nsHover } - a super simple jQuery plugin
by <a href="http://www.nslabz.com">nslabz</a></p>
<h1>Examples</h1>
<!-- different container with differen child images -->
<span class="container1"><img src="pics/1.jpg" alt=""></span>
<span class="container2"><img src="pics/2.jpg" alt=""></span>
<span class="container3"><img src="pics/3.jpg" alt=""></span>
<!-- one container with differen child images -->
<div class="container4">
<img src="pics/4.jpg" alt="">
<img src="pics/5.jpg" alt="">
<img src="pics/6.jpg" alt="">
</div>
<!-- one container with differen child images -->
<span class="container8 container"><img src="pics/1.jpg" alt=""></span>
<span class="container9 container"><img src="pics/3.jpg" alt=""></span>
<span class="container10 container"><img src="pics/5.jpg" alt=""></span>
<!-- different container with differen child images -->
<div class="container5"><div class="box"><h3>Title</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis odit saepe nesciunt reiciendis nostrum iste quidem, provident ipsum.</div></div>
<div class="container6"><div class="box"><h3>Title</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis odit saepe nesciunt reiciendis nostrum iste quidem, provident ipsum.</div></div>
<div class="container7"><div class="box"><h3>Title</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi debitis odit saepe nesciunt reiciendis nostrum iste quidem, provident ipsum.</div></div>
<div class="clearfix"></div>
<div class="codes">
<h1>Usage</h1>
<p>Firstly, include the <code>ns.hover.min.js</code> just before the end body tag in your html</p>
<p><code><script src="src/ns.hover.min.js"></script></code></p>
<p>just call with the container class and set the options to customize the look and feel. (You must have to set a container class in order to make the child elemnts use this effect. child can be any html tags including images offcourse.)</p>
<pre class="prettyprint">
<script>
$(container_class_or_id).nsHover({
scaling : false,
speed: 'normal',
rounded: 'normal',
bgcolor: '#ffffff',
bgopacity : 0.5,
bgpic : 'imgs/lens.png',
bgsize : '50%',
bganim : 'fade',
border : 'none',
content: ''
});
</script>
</pre>
</div>
<div class="clearfix"></div>
<div class="settings">
<h1>Options</h1>
<div class="options">
<h2>scaling</h2>
<p>set this value to anything from 0.0 - 1.0 to make the element shrink on hover, or set it 0 / false to disable scaling effect</p>
<h4>Default Value:</h4><p>false</p>
<h4>Possible Values:</h4><p>false / 0 / 0.0 - 1.0</p>
</div>
<div class="options">
<h2>speed</h2>
<p>this options set the speed of the hover transitions and animation effects</p>
<h4>Default Value:</h4><p>normal</p>
<h4>Possible Values:</h4><p>normal / fast / slow</p>
</div>
<div class="options">
<h2>rounded</h2>
<p>Set this option to control the border radius of the element. you can set predefined values like circle or set any custom values you want.</p>
<h4>Default Value:</h4><p>normal</p>
<h4>Possible Values:</h4><p>none(0%) / normal(5%) / circle(50%) / xx% / xx px</p>
</div>
<div class="options">
<h2>bganim</h2>
<p>The background animation style of the overlay layer. Currently it is limited to Fade, Scale and Slide(from up) effecrs</p>
<h4>Default Value:</h4><p>fade</p>
<h4>Possible Values:</h4><p>fade / scale / slide</p>
</div>
<div class="options">
<h2>bgcolor</h2>
<p>The background color of the overlay layer.</p>
<h4>Default Value:</h4><p>normal</p>
<h4>Possible Values:</h4><p>none(0%) / normal(5%) / circle(50%) / xx% / xx px</p>
</div>
<div class="options">
<h2>bgopacity</h2>
<p>The background opacity of the overlay layer.</p>
<h4>Default Value:</h4><p>0.5</p>
<h4>Possible Values:</h4><p>0.0-1.0</p>
</div>
<div class="options">
<h2>bgpic</h2>
<p>The background image of the overlay layer.</p>
<h4>Default Value:</h4><p>imgs/lens.png</p>
<h4>Possible Values:</h4><p>any image url</p>
</div>
<div class="options">
<h2>bgsize</h2>
<p>The background image size of the overlay layer. It is centered by default</p>
<h4>Default Value:</h4><p>25%</p>
<h4>Possible Values:</h4><p>0% - 100%</p>
</div>
<div class="options">
<h2>shadow</h2>
<p>The box shadow of the main block. Enable / Disable it by setting true or false</p>
<h4>Default Value:</h4><p>false</p>
<h4>Possible Values:</h4><p>true / false</p>
</div>
<div class="options">
<h2>content</h2>
<p>If you want to show some text / icon / image on hover we have limited support for this also. you can set any valid html here, but be careful not to put much more content here or it will not look good. example : "click to buy", "know more" etc. you can style this content by external styles using classes</p>
<h4>Default Value:</h4><p>''</p>
<h4>Possible Values:</h4><p>any valid html content</p>
</div>
</div>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="src/ns.hover.min.js"></script>
<script>
window.onload = function(){
$.noConflict();
jQuery(document).ready(function($){
$('.container1').nsHover({
bgcolor: '#000',
bganim : 'fade'
});
$('.container2').nsHover({
bgcolor: '#000',
bganim : 'scale'
});
$('.container3').nsHover({
bgcolor: '#000',
bganim : 'slide'
});
$('.container4').nsHover({
bgcolor: '#000',
bganim : 'fade',
bgpic: '',
content: '<div class="content">Click Here</div>'
});
$('.container5').nsHover({
scaling: 0.9,
bgcolor: '#000',
bgcolor: '#000033',
bganim : 'scale'
});
$('.container6').nsHover({
rounded: 'none',
bgcolor: '#ffff00',
bganim : 'slide'
});
$('.container7').nsHover({
bgcolor: '#00ff00',
bganim : 'fade'
});
$('.container8').nsHover({
rounded: 'circle',
scaling: 0.9,
bgcolor: '#000',
bganim : 'fade',
bgsize: '20%',
bgpic: '',
content: '<div class="content">Click Here</div>'
});
$('.container9').nsHover({
rounded: 'circle',
scaling: 1.1,
bgcolor: '#000',
bganim : 'scale',
bgpic: ''
});
$('.container10').nsHover({
scaling: 0.9,
rounded: 'circle',
bgcolor: '#000',
bganim : 'scale',
bgsize: '20%'
});
});
}
</script>
</body>
</html>