Version Description
- Bug Fix
=
Download this release
Release Info
Developer | mediabeta |
Plugin | Enjoy Instagram feed on website with WordPress Widget and Shortcode |
Version | 1.6.2 |
Comparing to | |
See all releases |
Code changes from version 1.6.1 to 1.6.2
- css/swipebox.css +137 -114
- enjoyinstagram.php +8 -7
- img/icons.png +0 -0
- img/icons.svg +1 -0
- img/loader.gif +0 -0
- js/jquery.swipebox.js +443 -231
- readme.txt +42 -28
css/swipebox.css
CHANGED
@@ -1,9 +1,10 @@
|
|
1 |
-
|
2 |
-
|
|
|
3 |
}
|
4 |
|
5 |
#swipebox-overlay img {
|
6 |
-
border: none!important;
|
7 |
}
|
8 |
|
9 |
#swipebox-overlay {
|
@@ -12,14 +13,23 @@ html.swipebox {
|
|
12 |
position: fixed;
|
13 |
top: 0;
|
14 |
left: 0;
|
15 |
-
z-index: 99999!important;
|
16 |
overflow: hidden;
|
17 |
-webkit-user-select: none;
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
}
|
21 |
|
22 |
#swipebox-slider {
|
|
|
|
|
23 |
height: 100%;
|
24 |
left: 0;
|
25 |
top: 0;
|
@@ -27,17 +37,15 @@ html.swipebox {
|
|
27 |
white-space: nowrap;
|
28 |
position: absolute;
|
29 |
display: none;
|
|
|
30 |
}
|
31 |
-
|
32 |
#swipebox-slider .slide {
|
33 |
-
background: url("../images/loader.gif") no-repeat center center;
|
34 |
height: 100%;
|
35 |
width: 100%;
|
36 |
line-height: 1px;
|
37 |
text-align: center;
|
38 |
display: inline-block;
|
39 |
}
|
40 |
-
|
41 |
#swipebox-slider .slide:before {
|
42 |
content: "";
|
43 |
display: inline-block;
|
@@ -45,9 +53,9 @@ html.swipebox {
|
|
45 |
width: 1px;
|
46 |
margin-right: -1px;
|
47 |
}
|
48 |
-
|
49 |
#swipebox-slider .slide img,
|
50 |
-
#swipebox-slider .slide .swipebox-video-container
|
|
|
51 |
display: inline-block;
|
52 |
max-height: 100%;
|
53 |
max-width: 100%;
|
@@ -57,35 +65,37 @@ html.swipebox {
|
|
57 |
height: auto;
|
58 |
vertical-align: middle;
|
59 |
}
|
60 |
-
|
61 |
#swipebox-slider .slide .swipebox-video-container {
|
62 |
-
background:none;
|
63 |
max-width: 1140px;
|
64 |
max-height: 100%;
|
65 |
width: 100%;
|
66 |
-
padding:5%;
|
67 |
-
box-sizing: border-box;
|
68 |
-webkit-box-sizing: border-box;
|
69 |
-
|
70 |
}
|
71 |
-
|
72 |
-
|
73 |
-
#swipebox-slider .slide .swipebox-video-container .swipebox-video{
|
74 |
width: 100%;
|
75 |
height: 0;
|
76 |
padding-bottom: 56.25%;
|
77 |
overflow: hidden;
|
78 |
position: relative;
|
79 |
}
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
height: 100%!important;
|
84 |
position: absolute;
|
85 |
-
top: 0;
|
|
|
|
|
|
|
|
|
86 |
}
|
87 |
|
88 |
-
#swipebox-
|
|
|
|
|
|
|
89 |
position: absolute;
|
90 |
left: 0;
|
91 |
z-index: 999;
|
@@ -93,172 +103,185 @@ html.swipebox {
|
|
93 |
width: 100%;
|
94 |
}
|
95 |
|
96 |
-
#swipebox-
|
97 |
bottom: -50px;
|
98 |
}
|
99 |
-
#swipebox-
|
100 |
-
|
|
|
101 |
}
|
102 |
|
103 |
-
#swipebox-
|
104 |
-
bottom: 0!important;
|
105 |
-
}
|
106 |
-
|
107 |
-
#swipebox-caption {
|
108 |
top: -50px;
|
109 |
-
text-align: center;
|
110 |
}
|
111 |
-
#swipebox-
|
112 |
-
|
|
|
113 |
}
|
114 |
|
115 |
-
#swipebox-
|
116 |
-
|
|
|
|
|
117 |
}
|
118 |
|
119 |
-
#swipebox-
|
120 |
-
#swipebox-
|
121 |
-
|
|
|
122 |
background-repeat: no-repeat;
|
123 |
-
border: none!important;
|
124 |
-
text-decoration: none!important;
|
125 |
cursor: pointer;
|
126 |
-
position: absolute;
|
127 |
width: 50px;
|
128 |
height: 50px;
|
129 |
top: 0;
|
130 |
}
|
131 |
|
132 |
-
#swipebox-
|
133 |
-
|
134 |
-
|
|
|
|
|
135 |
}
|
136 |
|
137 |
-
#swipebox-
|
138 |
background-position: -32px 13px;
|
139 |
-
|
140 |
}
|
141 |
|
142 |
-
#swipebox-
|
143 |
background-position: -78px 13px;
|
144 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
145 |
}
|
146 |
|
147 |
-
#swipebox-
|
148 |
-
#swipebox-
|
149 |
-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
|
150 |
opacity: 0.3;
|
151 |
}
|
152 |
|
153 |
-
#swipebox-
|
154 |
-
-moz-animation: rightSpring 0.3s;
|
155 |
-webkit-animation: rightSpring 0.3s;
|
|
|
156 |
}
|
157 |
-
|
158 |
-
#swipebox-slider.leftSpring {
|
159 |
-
-moz-animation: leftSpring 0.3s;
|
160 |
-webkit-animation: leftSpring 0.3s;
|
|
|
161 |
}
|
162 |
|
163 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
164 |
0% {
|
165 |
-
|
166 |
}
|
167 |
-
|
168 |
50% {
|
169 |
-
|
170 |
}
|
171 |
-
|
172 |
100% {
|
173 |
-
|
174 |
}
|
175 |
}
|
176 |
|
177 |
-
|
178 |
0% {
|
179 |
-
|
180 |
}
|
181 |
-
|
182 |
50% {
|
183 |
-
|
184 |
}
|
185 |
-
|
186 |
100% {
|
187 |
-
|
188 |
}
|
189 |
}
|
190 |
-
|
191 |
-
@-webkit-keyframes rightSpring {
|
192 |
0% {
|
193 |
-
|
194 |
}
|
195 |
-
|
196 |
50% {
|
197 |
-
|
198 |
}
|
199 |
-
|
200 |
100% {
|
201 |
-
|
202 |
}
|
203 |
}
|
204 |
-
|
205 |
-
@-webkit-keyframes leftSpring {
|
206 |
0% {
|
207 |
-
|
208 |
}
|
209 |
-
|
210 |
50% {
|
211 |
-
|
212 |
}
|
213 |
-
|
214 |
100% {
|
215 |
-
margin-left: 0px;
|
216 |
-
}
|
217 |
-
}
|
218 |
-
|
219 |
-
@media screen and (max-width: 800px) {
|
220 |
-
#swipebox-action #swipebox-close {
|
221 |
left: 0;
|
222 |
}
|
223 |
-
|
224 |
-
|
225 |
-
|
|
|
226 |
}
|
227 |
|
228 |
-
#swipebox-
|
229 |
-
|
|
|
230 |
}
|
231 |
}
|
232 |
-
|
233 |
-
|
234 |
/* Skin
|
235 |
--------------------------*/
|
236 |
#swipebox-overlay {
|
237 |
background: #0d0d0d;
|
238 |
}
|
239 |
|
240 |
-
#swipebox-
|
|
|
241 |
text-shadow: 1px 1px 1px black;
|
242 |
-
background
|
243 |
-
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000));
|
244 |
-
background-image: -webkit-linear-gradient(#0d0d0d, #000000);
|
245 |
-
background-image: -moz-linear-gradient(#0d0d0d, #000000);
|
246 |
-
background-image: -o-linear-gradient(#0d0d0d, #000000);
|
247 |
-
background-image: linear-gradient(#0d0d0d, #000000);
|
248 |
-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
|
249 |
opacity: 0.95;
|
250 |
}
|
251 |
|
252 |
-
#swipebox-
|
253 |
-
|
254 |
-
}
|
255 |
-
|
256 |
-
#swipebox-caption {
|
257 |
-
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
258 |
-
color: white!important;
|
259 |
font-size: 15px;
|
260 |
line-height: 43px;
|
261 |
font-family: Helvetica, Arial, sans-serif;
|
262 |
}
|
263 |
-
|
264 |
-
|
1 |
+
/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
|
2 |
+
html.swipebox-html.swipebox-touch {
|
3 |
+
overflow: hidden !important;
|
4 |
}
|
5 |
|
6 |
#swipebox-overlay img {
|
7 |
+
border: none !important;
|
8 |
}
|
9 |
|
10 |
#swipebox-overlay {
|
13 |
position: fixed;
|
14 |
top: 0;
|
15 |
left: 0;
|
16 |
+
z-index: 99999 !important;
|
17 |
overflow: hidden;
|
18 |
-webkit-user-select: none;
|
19 |
+
-moz-user-select: none;
|
20 |
+
-ms-user-select: none;
|
21 |
+
user-select: none;
|
22 |
+
}
|
23 |
+
|
24 |
+
#swipebox-container {
|
25 |
+
position: relative;
|
26 |
+
width: 100%;
|
27 |
+
height: 100%;
|
28 |
}
|
29 |
|
30 |
#swipebox-slider {
|
31 |
+
-webkit-transition: -webkit-transform 0.4s ease;
|
32 |
+
transition: transform 0.4s ease;
|
33 |
height: 100%;
|
34 |
left: 0;
|
35 |
top: 0;
|
37 |
white-space: nowrap;
|
38 |
position: absolute;
|
39 |
display: none;
|
40 |
+
cursor: pointer;
|
41 |
}
|
|
|
42 |
#swipebox-slider .slide {
|
|
|
43 |
height: 100%;
|
44 |
width: 100%;
|
45 |
line-height: 1px;
|
46 |
text-align: center;
|
47 |
display: inline-block;
|
48 |
}
|
|
|
49 |
#swipebox-slider .slide:before {
|
50 |
content: "";
|
51 |
display: inline-block;
|
53 |
width: 1px;
|
54 |
margin-right: -1px;
|
55 |
}
|
|
|
56 |
#swipebox-slider .slide img,
|
57 |
+
#swipebox-slider .slide .swipebox-video-container,
|
58 |
+
#swipebox-slider .slide .swipebox-inline-container {
|
59 |
display: inline-block;
|
60 |
max-height: 100%;
|
61 |
max-width: 100%;
|
65 |
height: auto;
|
66 |
vertical-align: middle;
|
67 |
}
|
|
|
68 |
#swipebox-slider .slide .swipebox-video-container {
|
69 |
+
background: none;
|
70 |
max-width: 1140px;
|
71 |
max-height: 100%;
|
72 |
width: 100%;
|
73 |
+
padding: 5%;
|
|
|
74 |
-webkit-box-sizing: border-box;
|
75 |
+
box-sizing: border-box;
|
76 |
}
|
77 |
+
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
|
|
|
|
|
78 |
width: 100%;
|
79 |
height: 0;
|
80 |
padding-bottom: 56.25%;
|
81 |
overflow: hidden;
|
82 |
position: relative;
|
83 |
}
|
84 |
+
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
|
85 |
+
width: 100% !important;
|
86 |
+
height: 100% !important;
|
|
|
87 |
position: absolute;
|
88 |
+
top: 0;
|
89 |
+
left: 0;
|
90 |
+
}
|
91 |
+
#swipebox-slider .slide-loading {
|
92 |
+
background: url(../img/loader.gif) no-repeat center center;
|
93 |
}
|
94 |
|
95 |
+
#swipebox-bottom-bar,
|
96 |
+
#swipebox-top-bar {
|
97 |
+
-webkit-transition: 0.5s;
|
98 |
+
transition: 0.5s;
|
99 |
position: absolute;
|
100 |
left: 0;
|
101 |
z-index: 999;
|
103 |
width: 100%;
|
104 |
}
|
105 |
|
106 |
+
#swipebox-bottom-bar {
|
107 |
bottom: -50px;
|
108 |
}
|
109 |
+
#swipebox-bottom-bar.visible-bars {
|
110 |
+
-webkit-transform: translate3d(0, -50px, 0);
|
111 |
+
transform: translate3d(0, -50px, 0);
|
112 |
}
|
113 |
|
114 |
+
#swipebox-top-bar {
|
|
|
|
|
|
|
|
|
115 |
top: -50px;
|
|
|
116 |
}
|
117 |
+
#swipebox-top-bar.visible-bars {
|
118 |
+
-webkit-transform: translate3d(0, 50px, 0);
|
119 |
+
transform: translate3d(0, 50px, 0);
|
120 |
}
|
121 |
|
122 |
+
#swipebox-title {
|
123 |
+
display: block;
|
124 |
+
width: 100%;
|
125 |
+
text-align: center;
|
126 |
}
|
127 |
|
128 |
+
#swipebox-prev,
|
129 |
+
#swipebox-next,
|
130 |
+
#swipebox-close {
|
131 |
+
background-image: url(../img/icons.png);
|
132 |
background-repeat: no-repeat;
|
133 |
+
border: none !important;
|
134 |
+
text-decoration: none !important;
|
135 |
cursor: pointer;
|
|
|
136 |
width: 50px;
|
137 |
height: 50px;
|
138 |
top: 0;
|
139 |
}
|
140 |
|
141 |
+
#swipebox-arrows {
|
142 |
+
display: block;
|
143 |
+
margin: 0 auto;
|
144 |
+
width: 100%;
|
145 |
+
height: 50px;
|
146 |
}
|
147 |
|
148 |
+
#swipebox-prev {
|
149 |
background-position: -32px 13px;
|
150 |
+
float: left;
|
151 |
}
|
152 |
|
153 |
+
#swipebox-next {
|
154 |
background-position: -78px 13px;
|
155 |
+
float: right;
|
156 |
+
}
|
157 |
+
|
158 |
+
#swipebox-close {
|
159 |
+
top: 0;
|
160 |
+
right: 0;
|
161 |
+
position: absolute;
|
162 |
+
z-index: 9999;
|
163 |
+
background-position: 15px 12px;
|
164 |
+
}
|
165 |
+
|
166 |
+
.swipebox-no-close-button #swipebox-close {
|
167 |
+
display: none;
|
168 |
}
|
169 |
|
170 |
+
#swipebox-prev.disabled,
|
171 |
+
#swipebox-next.disabled {
|
|
|
172 |
opacity: 0.3;
|
173 |
}
|
174 |
|
175 |
+
.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
|
|
|
176 |
-webkit-animation: rightSpring 0.3s;
|
177 |
+
animation: rightSpring 0.3s;
|
178 |
}
|
179 |
+
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
|
|
|
|
|
180 |
-webkit-animation: leftSpring 0.3s;
|
181 |
+
animation: leftSpring 0.3s;
|
182 |
}
|
183 |
|
184 |
+
.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
|
185 |
+
-webkit-backface-visibility: hidden;
|
186 |
+
backface-visibility: hidden;
|
187 |
+
-webkit-transition: all .3s ease;
|
188 |
+
transition: all .3s ease;
|
189 |
+
content: ' ';
|
190 |
+
position: absolute;
|
191 |
+
z-index: 999;
|
192 |
+
top: 0;
|
193 |
+
height: 100%;
|
194 |
+
width: 20px;
|
195 |
+
opacity: 0;
|
196 |
+
}
|
197 |
+
.swipebox-touch #swipebox-container:before {
|
198 |
+
left: 0;
|
199 |
+
-webkit-box-shadow: inset 10px 0px 10px -8px #656565;
|
200 |
+
box-shadow: inset 10px 0px 10px -8px #656565;
|
201 |
+
}
|
202 |
+
.swipebox-touch #swipebox-container:after {
|
203 |
+
right: 0;
|
204 |
+
-webkit-box-shadow: inset -10px 0px 10px -8px #656565;
|
205 |
+
box-shadow: inset -10px 0px 10px -8px #656565;
|
206 |
+
}
|
207 |
+
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
|
208 |
+
opacity: 1;
|
209 |
+
}
|
210 |
+
.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
|
211 |
+
opacity: 1;
|
212 |
+
}
|
213 |
+
|
214 |
+
@-webkit-keyframes rightSpring {
|
215 |
0% {
|
216 |
+
left: 0;
|
217 |
}
|
|
|
218 |
50% {
|
219 |
+
left: -30px;
|
220 |
}
|
|
|
221 |
100% {
|
222 |
+
left: 0;
|
223 |
}
|
224 |
}
|
225 |
|
226 |
+
@keyframes rightSpring {
|
227 |
0% {
|
228 |
+
left: 0;
|
229 |
}
|
|
|
230 |
50% {
|
231 |
+
left: -30px;
|
232 |
}
|
|
|
233 |
100% {
|
234 |
+
left: 0;
|
235 |
}
|
236 |
}
|
237 |
+
@-webkit-keyframes leftSpring {
|
|
|
238 |
0% {
|
239 |
+
left: 0;
|
240 |
}
|
|
|
241 |
50% {
|
242 |
+
left: 30px;
|
243 |
}
|
|
|
244 |
100% {
|
245 |
+
left: 0;
|
246 |
}
|
247 |
}
|
248 |
+
@keyframes leftSpring {
|
|
|
249 |
0% {
|
250 |
+
left: 0;
|
251 |
}
|
|
|
252 |
50% {
|
253 |
+
left: 30px;
|
254 |
}
|
|
|
255 |
100% {
|
|
|
|
|
|
|
|
|
|
|
|
|
256 |
left: 0;
|
257 |
}
|
258 |
+
}
|
259 |
+
@media screen and (min-width: 800px) {
|
260 |
+
#swipebox-close {
|
261 |
+
right: 10px;
|
262 |
}
|
263 |
|
264 |
+
#swipebox-arrows {
|
265 |
+
width: 92%;
|
266 |
+
max-width: 800px;
|
267 |
}
|
268 |
}
|
|
|
|
|
269 |
/* Skin
|
270 |
--------------------------*/
|
271 |
#swipebox-overlay {
|
272 |
background: #0d0d0d;
|
273 |
}
|
274 |
|
275 |
+
#swipebox-bottom-bar,
|
276 |
+
#swipebox-top-bar {
|
277 |
text-shadow: 1px 1px 1px black;
|
278 |
+
background: #000;
|
|
|
|
|
|
|
|
|
|
|
|
|
279 |
opacity: 0.95;
|
280 |
}
|
281 |
|
282 |
+
#swipebox-top-bar {
|
283 |
+
color: white !important;
|
|
|
|
|
|
|
|
|
|
|
284 |
font-size: 15px;
|
285 |
line-height: 43px;
|
286 |
font-family: Helvetica, Arial, sans-serif;
|
287 |
}
|
|
|
|
enjoyinstagram.php
CHANGED
@@ -3,7 +3,7 @@
|
|
3 |
Plugin Name: Enjoy Instagram
|
4 |
Plugin URI: http://www.mediabeta.com/enjoy-instagram/
|
5 |
Description: Instagram Responsive Images Gallery and Carousel, works with Shortcodes and Widgets.
|
6 |
-
Version: 1.6.
|
7 |
Author: F. Prestipino, F. Di Pane - Mediabeta Srl
|
8 |
Author URI: http://www.mediabeta.com/team/
|
9 |
*/
|
@@ -110,12 +110,11 @@ class Settings_enjoyinstagram_Plugin {
|
|
110 |
<span class="coffee_title">Buy me a coffee!</span>
|
111 |
<p><span>If you liked our work please consider to make a kind donation through Paypal.</span></p>
|
112 |
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
</form>
|
119 |
</div>
|
120 |
</div>
|
121 |
</div>
|
@@ -386,6 +385,7 @@ function funzioni_in_head() {
|
|
386 |
});
|
387 |
|
388 |
jQuery(function(){
|
|
|
389 |
jQuery(document.body)
|
390 |
.on('click touchend','#swipebox-slider .current img', function(e){
|
391 |
jQuery('#swipebox-next').click();
|
@@ -394,6 +394,7 @@ function funzioni_in_head() {
|
|
394 |
.on('click touchend','#swipebox-slider .current', function(e){
|
395 |
jQuery('#swipebox-close').trigger('click');
|
396 |
});
|
|
|
397 |
});
|
398 |
|
399 |
</script>
|
3 |
Plugin Name: Enjoy Instagram
|
4 |
Plugin URI: http://www.mediabeta.com/enjoy-instagram/
|
5 |
Description: Instagram Responsive Images Gallery and Carousel, works with Shortcodes and Widgets.
|
6 |
+
Version: 1.6.2
|
7 |
Author: F. Prestipino, F. Di Pane - Mediabeta Srl
|
8 |
Author URI: http://www.mediabeta.com/team/
|
9 |
*/
|
110 |
<span class="coffee_title">Buy me a coffee!</span>
|
111 |
<p><span>If you liked our work please consider to make a kind donation through Paypal.</span></p>
|
112 |
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
113 |
+
<input type="hidden" name="cmd" value="_s-xclick">
|
114 |
+
<input type="hidden" name="hosted_button_id" value="8MXZ37DWHAX46">
|
115 |
+
<input type="image" src="https://www.paypalobjects.com/en_US/IT/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
|
116 |
+
<img alt="" border="0" src="https://www.paypalobjects.com/it_IT/i/scr/pixel.gif" width="1" height="1">
|
117 |
+
</form>
|
|
|
118 |
</div>
|
119 |
</div>
|
120 |
</div>
|
385 |
});
|
386 |
|
387 |
jQuery(function(){
|
388 |
+
/*
|
389 |
jQuery(document.body)
|
390 |
.on('click touchend','#swipebox-slider .current img', function(e){
|
391 |
jQuery('#swipebox-next').click();
|
394 |
.on('click touchend','#swipebox-slider .current', function(e){
|
395 |
jQuery('#swipebox-close').trigger('click');
|
396 |
});
|
397 |
+
*/
|
398 |
});
|
399 |
|
400 |
</script>
|
img/icons.png
ADDED
Binary file
|
img/icons.svg
ADDED
@@ -0,0 +1 @@
|
|
|
1 |
+
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="120" height="24" viewBox="0 0 120 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M 17.384,17.705q0.00,0.536 -0.375,0.911l-1.821,1.821q-0.375,0.375 -0.911,0.375t-0.911-0.375l-3.938-3.938l-3.938,3.938q-0.375,0.375 -0.911,0.375t-0.911-0.375l-1.821-1.821q-0.375-0.375 -0.375-0.911t 0.375-0.911l 3.938-3.938l-3.938-3.938q-0.375-0.375 -0.375-0.911t 0.375-0.911l 1.821-1.821q 0.375-0.375 0.911-0.375t 0.911,0.375l 3.938,3.938l 3.938-3.938q 0.375-0.375 0.911-0.375t 0.911,0.375l 1.821,1.821q 0.375,0.375 0.375,0.911 t-0.375,0.911l-3.938,3.938l 3.938,3.938q 0.375,0.375 0.375,0.911zM 57.938,21.067l-8.732-8.719q-0.496-0.496 -0.496-1.212t 0.496-1.212l 8.732-8.719q 0.496-0.496 1.212-0.496t 1.212,0.496l 1.004,1.004q 0.496,0.496 0.496,1.212t-0.496,1.212l-6.509,6.509l 6.509,6.496q 0.496,0.509 0.496,1.219t-0.496,1.205l-1.004,1.004q-0.496,0.496 -1.212,0.496t-1.212-0.496zM 110.719,11.143q0.00,0.696 -0.496,1.219l-8.732,8.719q-0.496,0.496 -1.205,0.496t-1.205-0.496l-1.018-1.004q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 6.509-6.509l-6.509-6.496q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 1.018-1.004q 0.482-0.509 1.205-0.509t 1.205,0.509l 8.732,8.719q 0.496,0.496 0.496,1.205z"></path></svg>
|
img/loader.gif
ADDED
Binary file
|
js/jquery.swipebox.js
CHANGED
@@ -1,42 +1,67 @@
|
|
1 |
-
/*! Swipebox v1.2
|
2 |
|
3 |
;( function ( window, document, $, undefined ) {
|
4 |
|
5 |
$.swipebox = function( elem, options ) {
|
6 |
|
7 |
// Default options
|
8 |
-
var
|
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 |
plugin.settings = {};
|
39 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
40 |
plugin.init = function() {
|
41 |
|
42 |
plugin.settings = $.extend( {}, defaults, options );
|
@@ -56,23 +81,28 @@
|
|
56 |
if ( event.target.parentNode.className === 'slide current' ) {
|
57 |
|
58 |
return false;
|
59 |
-
|
60 |
}
|
61 |
-
|
62 |
if ( ! $.isArray( elem ) ) {
|
63 |
ui.destroy();
|
64 |
$elem = $( selector );
|
65 |
ui.actions();
|
66 |
}
|
67 |
-
|
68 |
elements = [];
|
69 |
var index , relType, relVal;
|
70 |
|
|
|
71 |
if ( ! relVal ) {
|
72 |
-
relType = 'rel';
|
73 |
relVal = $( this ).attr( relType );
|
74 |
}
|
75 |
|
|
|
|
|
|
|
|
|
|
|
76 |
if ( relVal && relVal !== '' && relVal !== 'nofollow' ) {
|
77 |
$elem = $selector.filter( '[' + relType + '="' + relVal + '"]' );
|
78 |
} else {
|
@@ -81,18 +111,18 @@
|
|
81 |
|
82 |
$elem.each( function() {
|
83 |
|
84 |
-
var title = null,
|
85 |
href = null;
|
86 |
-
|
87 |
if ( $( this ).attr( 'title' ) ) {
|
88 |
title = $( this ).attr( 'title' );
|
89 |
}
|
90 |
-
|
91 |
|
92 |
if ( $( this ).attr( 'href' ) ) {
|
93 |
href = $( this ).attr( 'href' );
|
94 |
}
|
95 |
-
|
96 |
elements.push( {
|
97 |
href: href,
|
98 |
title: title
|
@@ -108,25 +138,15 @@
|
|
108 |
}
|
109 |
};
|
110 |
|
111 |
-
|
112 |
-
* Refresh method
|
113 |
-
*/
|
114 |
-
plugin.refresh = function() {
|
115 |
-
if ( ! $.isArray( elem ) ) {
|
116 |
-
ui.destroy();
|
117 |
-
$elem = $( selector );
|
118 |
-
ui.actions();
|
119 |
-
}
|
120 |
-
};
|
121 |
-
|
122 |
-
var ui = {
|
123 |
|
124 |
/**
|
125 |
* Initiate Swipebox
|
126 |
*/
|
127 |
init : function( index ) {
|
128 |
-
if ( plugin.settings.beforeOpen )
|
129 |
plugin.settings.beforeOpen();
|
|
|
130 |
this.target.trigger( 'swipebox-start' );
|
131 |
$.swipebox.isOpen = true;
|
132 |
this.build();
|
@@ -134,65 +154,48 @@
|
|
134 |
this.openMedia( index );
|
135 |
this.preloadMedia( index+1 );
|
136 |
this.preloadMedia( index-1 );
|
|
|
|
|
|
|
137 |
},
|
138 |
|
139 |
/**
|
140 |
* Built HTML containers and fire main functions
|
141 |
*/
|
142 |
build : function () {
|
143 |
-
var $this = this;
|
144 |
|
145 |
$( 'body' ).append( html );
|
146 |
-
|
147 |
-
if ( $this.doCssTrans() ) {
|
148 |
-
$( '#swipebox-slider' ).css( {
|
149 |
-
'-webkit-transition' : 'left 0.4s ease',
|
150 |
-
'-moz-transition' : 'left 0.4s ease',
|
151 |
-
'-o-transition' : 'left 0.4s ease',
|
152 |
-
'-khtml-transition' : 'left 0.4s ease',
|
153 |
-
'transition' : 'left 0.4s ease'
|
154 |
-
} );
|
155 |
-
$( '#swipebox-overlay' ).css( {
|
156 |
-
'-webkit-transition' : 'opacity 1s ease',
|
157 |
-
'-moz-transition' : 'opacity 1s ease',
|
158 |
-
'-o-transition' : 'opacity 1s ease',
|
159 |
-
'-khtml-transition' : 'opacity 1s ease',
|
160 |
-
'transition' : 'opacity 1s ease'
|
161 |
-
} );
|
162 |
-
$( '#swipebox-action, #swipebox-caption' ).css( {
|
163 |
-
'-webkit-transition' : '0.5s',
|
164 |
-
'-moz-transition' : '0.5s',
|
165 |
-
'-o-transition' : '0.5s',
|
166 |
-
'-khtml-transition' : '0.5s',
|
167 |
-
'transition' : '0.5s'
|
168 |
-
} );
|
169 |
-
}
|
170 |
|
171 |
-
|
172 |
-
|
173 |
-
var bg = $( '#swipebox-action #swipebox-close' ).css( 'background-image' );
|
174 |
bg = bg.replace( 'png', 'svg' );
|
175 |
-
$( '#swipebox-
|
176 |
'background-image' : bg
|
177 |
} );
|
178 |
}
|
179 |
-
|
|
|
|
|
|
|
|
|
180 |
$.each( elements, function() {
|
181 |
$( '#swipebox-slider' ).append( '<div class="slide"></div>' );
|
182 |
} );
|
183 |
|
184 |
$this.setDim();
|
185 |
$this.actions();
|
186 |
-
|
187 |
if ( isTouch ) {
|
188 |
$this.gesture();
|
189 |
-
} else {
|
190 |
-
$this.keyboard();
|
191 |
}
|
192 |
-
|
|
|
|
|
|
|
193 |
$this.animBars();
|
194 |
$this.resize();
|
195 |
-
|
196 |
},
|
197 |
|
198 |
/**
|
@@ -201,11 +204,11 @@
|
|
201 |
setDim : function () {
|
202 |
|
203 |
var width, height, sliderCss = {};
|
204 |
-
|
205 |
// Reset dimensions on mobile orientation change
|
206 |
-
if (
|
207 |
|
208 |
-
window.addEventListener(
|
209 |
if ( window.orientation === 0 ) {
|
210 |
width = winWidth;
|
211 |
height = winHeight;
|
@@ -214,8 +217,8 @@
|
|
214 |
height = winWidth;
|
215 |
}
|
216 |
}, false );
|
217 |
-
|
218 |
-
|
219 |
} else {
|
220 |
|
221 |
width = window.innerWidth ? window.innerWidth : $( window ).width();
|
@@ -236,7 +239,7 @@
|
|
236 |
*/
|
237 |
resize : function () {
|
238 |
var $this = this;
|
239 |
-
|
240 |
$( window ).resize( function() {
|
241 |
$this.setDim();
|
242 |
} ).resize();
|
@@ -246,10 +249,11 @@
|
|
246 |
* Check if device supports CSS transitions
|
247 |
*/
|
248 |
supportTransition : function () {
|
249 |
-
|
250 |
-
var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split( ' ' )
|
251 |
-
|
252 |
-
|
|
|
253 |
if ( document.createElement( 'div' ).style[ prefixes[i] ] !== undefined ) {
|
254 |
return prefixes[i];
|
255 |
}
|
@@ -270,50 +274,151 @@
|
|
270 |
* Touch navigation
|
271 |
*/
|
272 |
gesture : function () {
|
273 |
-
|
274 |
var $this = this,
|
275 |
-
|
276 |
-
|
277 |
-
|
278 |
-
|
279 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
280 |
|
281 |
bars.addClass( 'visible-bars' );
|
282 |
$this.setTimeout();
|
283 |
|
284 |
$( 'body' ).bind( 'touchstart', function( event ) {
|
285 |
|
286 |
-
$(this).addClass( 'touching' );
|
287 |
-
|
288 |
endCoords = event.originalEvent.targetTouches[0];
|
289 |
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
|
|
|
|
|
|
|
|
|
|
|
|
|
290 |
|
291 |
$( '.touching' ).bind( 'touchmove',function( event ) {
|
292 |
event.preventDefault();
|
293 |
event.stopPropagation();
|
294 |
endCoords = event.originalEvent.targetTouches[0];
|
295 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
296 |
} );
|
297 |
-
|
298 |
return false;
|
299 |
|
300 |
} ).bind( 'touchend',function( event ) {
|
301 |
event.preventDefault();
|
302 |
event.stopPropagation();
|
303 |
-
|
304 |
-
|
305 |
-
|
306 |
-
|
307 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
308 |
// swipeLeft
|
309 |
-
|
310 |
-
|
311 |
-
|
312 |
-
|
313 |
// swipeRight
|
314 |
-
|
315 |
|
316 |
-
|
|
|
|
|
|
|
317 |
// tap
|
318 |
if ( ! bars.hasClass( 'visible-bars' ) ) {
|
319 |
$this.showBars();
|
@@ -322,13 +427,17 @@
|
|
322 |
$this.clearTimeout();
|
323 |
$this.hideBars();
|
324 |
}
|
|
|
325 |
|
326 |
-
|
|
|
|
|
|
|
327 |
|
|
|
328 |
$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
|
329 |
-
|
330 |
-
} );
|
331 |
|
|
|
332 |
},
|
333 |
|
334 |
/**
|
@@ -339,18 +448,18 @@
|
|
339 |
var $this = this;
|
340 |
$this.clearTimeout();
|
341 |
$this.timeout = window.setTimeout( function() {
|
342 |
-
$this.hideBars();
|
343 |
},
|
344 |
-
|
345 |
plugin.settings.hideBarsDelay
|
346 |
);
|
347 |
}
|
348 |
},
|
349 |
-
|
350 |
/**
|
351 |
* Clear timer
|
352 |
*/
|
353 |
-
clearTimeout: function () {
|
354 |
window.clearTimeout( this.timeout );
|
355 |
this.timeout = null;
|
356 |
},
|
@@ -359,12 +468,12 @@
|
|
359 |
* Show navigation and title bars
|
360 |
*/
|
361 |
showBars : function () {
|
362 |
-
var bars = $( '#swipebox-
|
363 |
if ( this.doCssTrans() ) {
|
364 |
bars.addClass( 'visible-bars' );
|
365 |
} else {
|
366 |
-
$( '#swipebox-
|
367 |
-
$( '#swipebox-
|
368 |
setTimeout( function() {
|
369 |
bars.addClass( 'visible-bars' );
|
370 |
}, 1000 );
|
@@ -375,12 +484,12 @@
|
|
375 |
* Hide navigation and title bars
|
376 |
*/
|
377 |
hideBars : function () {
|
378 |
-
var bars = $( '#swipebox-
|
379 |
if ( this.doCssTrans() ) {
|
380 |
bars.removeClass( 'visible-bars' );
|
381 |
} else {
|
382 |
-
$( '#swipebox-
|
383 |
-
$( '#swipebox-
|
384 |
setTimeout( function() {
|
385 |
bars.removeClass( 'visible-bars' );
|
386 |
}, 1000 );
|
@@ -391,12 +500,12 @@
|
|
391 |
* Animate navigation and top bars
|
392 |
*/
|
393 |
animBars : function () {
|
394 |
-
var $this = this
|
395 |
-
|
396 |
-
|
397 |
bars.addClass( 'visible-bars' );
|
398 |
$this.setTimeout();
|
399 |
-
|
400 |
$( '#swipebox-slider' ).click( function() {
|
401 |
if ( ! bars.hasClass( 'visible-bars' ) ) {
|
402 |
$this.showBars();
|
@@ -404,20 +513,18 @@
|
|
404 |
}
|
405 |
} );
|
406 |
|
407 |
-
|
408 |
-
|
409 |
-
|
410 |
-
|
411 |
-
bars.addClass( 'visible-bars' );
|
412 |
-
$this.clearTimeout();
|
413 |
-
|
414 |
-
}, function() {
|
415 |
-
bars.removeClass( 'visible-bars' );
|
416 |
-
$this.setTimeout();
|
417 |
|
418 |
-
|
|
|
|
|
|
|
|
|
419 |
|
420 |
-
}
|
421 |
},
|
422 |
|
423 |
/**
|
@@ -428,19 +535,18 @@
|
|
428 |
$( window ).bind( 'keyup', function( event ) {
|
429 |
event.preventDefault();
|
430 |
event.stopPropagation();
|
431 |
-
|
432 |
if ( event.keyCode === 37 ) {
|
433 |
-
|
434 |
$this.getPrev();
|
435 |
-
|
436 |
} else if ( event.keyCode === 39 ) {
|
437 |
-
|
438 |
$this.getNext();
|
439 |
-
|
440 |
} else if ( event.keyCode === 27 ) {
|
441 |
-
|
442 |
$this.closeSlide();
|
443 |
-
|
444 |
}
|
445 |
} );
|
446 |
},
|
@@ -449,14 +555,17 @@
|
|
449 |
* Navigation events : go to next slide, go to prevous slide and close
|
450 |
*/
|
451 |
actions : function () {
|
452 |
-
var $this = this
|
|
|
453 |
|
454 |
-
var action = isTouch ? 'touchend' : 'click';
|
455 |
-
|
456 |
if ( elements.length < 2 ) {
|
457 |
-
|
458 |
-
$( '#swipebox-
|
459 |
-
|
|
|
|
|
|
|
|
|
460 |
} else {
|
461 |
$( '#swipebox-prev' ).bind( action, function( event ) {
|
462 |
event.preventDefault();
|
@@ -464,7 +573,7 @@
|
|
464 |
$this.getPrev();
|
465 |
$this.setTimeout();
|
466 |
} );
|
467 |
-
|
468 |
$( '#swipebox-next' ).bind( action, function( event ) {
|
469 |
event.preventDefault();
|
470 |
event.stopPropagation();
|
@@ -477,21 +586,27 @@
|
|
477 |
$this.closeSlide();
|
478 |
} );
|
479 |
},
|
480 |
-
|
481 |
/**
|
482 |
* Set current slide
|
483 |
*/
|
484 |
setSlide : function ( index, isFirst ) {
|
|
|
485 |
isFirst = isFirst || false;
|
486 |
-
|
487 |
var slider = $( '#swipebox-slider' );
|
488 |
-
|
|
|
|
|
489 |
if ( this.doCssTrans() ) {
|
490 |
-
slider.css( {
|
|
|
|
|
|
|
491 |
} else {
|
492 |
slider.animate( { left : ( -index*100 )+'%' } );
|
493 |
}
|
494 |
-
|
495 |
$( '#swipebox-slider .slide' ).removeClass( 'current' );
|
496 |
$( '#swipebox-slider .slide' ).eq( index ).addClass( 'current' );
|
497 |
this.setTitle( index );
|
@@ -501,14 +616,14 @@
|
|
501 |
}
|
502 |
|
503 |
$( '#swipebox-prev, #swipebox-next' ).removeClass( 'disabled' );
|
504 |
-
|
505 |
if ( index === 0 ) {
|
506 |
$( '#swipebox-prev' ).addClass( 'disabled' );
|
507 |
-
} else if ( index === elements.length - 1 ) {
|
508 |
$( '#swipebox-next' ).addClass( 'disabled' );
|
509 |
}
|
510 |
},
|
511 |
-
|
512 |
/**
|
513 |
* Open slide
|
514 |
*/
|
@@ -516,20 +631,27 @@
|
|
516 |
$( 'html' ).addClass( 'swipebox-html' );
|
517 |
if ( isTouch ) {
|
518 |
$( 'html' ).addClass( 'swipebox-touch' );
|
|
|
|
|
|
|
|
|
|
|
|
|
519 |
}
|
520 |
$( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
|
521 |
this.setSlide( index, true );
|
522 |
},
|
523 |
-
|
524 |
/**
|
525 |
* Set a time out if the media is a video
|
526 |
*/
|
527 |
preloadMedia : function ( index ) {
|
528 |
-
var $this = this,
|
529 |
-
|
530 |
|
531 |
-
if ( elements[index] !== undefined )
|
532 |
-
src = elements[index].href;
|
|
|
533 |
|
534 |
if ( ! $this.isVideo( src ) ) {
|
535 |
setTimeout( function() {
|
@@ -539,44 +661,54 @@
|
|
539 |
$this.openMedia( index );
|
540 |
}
|
541 |
},
|
542 |
-
|
543 |
/**
|
544 |
* Open
|
545 |
*/
|
546 |
openMedia : function ( index ) {
|
547 |
-
var $this = this,
|
548 |
-
src
|
|
|
549 |
|
550 |
-
if ( elements[index] !== undefined )
|
551 |
-
src = elements[index].href;
|
|
|
552 |
|
553 |
-
if (index < 0 || index >= elements.length) {
|
554 |
return false;
|
555 |
}
|
556 |
|
|
|
|
|
557 |
if ( ! $this.isVideo( src ) ) {
|
|
|
558 |
$this.loadMedia( src, function() {
|
559 |
-
|
|
|
560 |
} );
|
561 |
} else {
|
562 |
-
|
563 |
}
|
564 |
-
|
565 |
},
|
566 |
|
567 |
/**
|
568 |
* Set link title attribute as caption
|
569 |
*/
|
570 |
-
setTitle : function ( index
|
571 |
var title = null;
|
572 |
|
573 |
-
$( '#swipebox-
|
|
|
|
|
|
|
|
|
574 |
|
575 |
-
if ( elements[index] !== undefined )
|
576 |
-
title = elements[index].title;
|
577 |
-
|
578 |
if ( title ) {
|
579 |
-
$( '#swipebox-
|
|
|
|
|
|
|
580 |
}
|
581 |
},
|
582 |
|
@@ -586,85 +718,160 @@
|
|
586 |
isVideo : function ( src ) {
|
587 |
|
588 |
if ( src ) {
|
589 |
-
if ( src.match( /youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
|
590 |
return true;
|
591 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
592 |
}
|
593 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
594 |
},
|
595 |
|
596 |
/**
|
597 |
* Get video iframe code from URL
|
598 |
*/
|
599 |
getVideo : function( url ) {
|
600 |
-
var iframe = ''
|
601 |
-
|
602 |
-
|
603 |
-
|
604 |
-
|
605 |
if ( youtubeUrl || youtubeShortUrl) {
|
606 |
if ( youtubeShortUrl ) {
|
607 |
youtubeUrl = youtubeShortUrl;
|
608 |
}
|
609 |
-
|
610 |
-
|
|
|
|
|
|
|
|
|
611 |
} else if ( vimeoUrl ) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
612 |
|
613 |
-
|
614 |
-
|
615 |
}
|
616 |
|
617 |
-
return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.
|
618 |
},
|
619 |
-
|
620 |
/**
|
621 |
* Load image
|
622 |
*/
|
623 |
loadMedia : function ( src, callback ) {
|
624 |
-
|
625 |
-
|
626 |
-
|
627 |
-
|
628 |
-
|
629 |
-
|
630 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
631 |
},
|
632 |
-
|
633 |
/**
|
634 |
* Get next slide
|
635 |
*/
|
636 |
getNext : function () {
|
637 |
-
var $this = this
|
638 |
-
|
639 |
-
|
|
|
|
|
|
|
|
|
640 |
index++;
|
641 |
$this.setSlide( index );
|
642 |
$this.preloadMedia( index+1 );
|
643 |
-
|
644 |
} else {
|
645 |
-
|
646 |
-
|
647 |
-
|
648 |
-
$( '#swipebox-slider' ).
|
649 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
650 |
}
|
651 |
},
|
652 |
-
|
653 |
/**
|
654 |
* Get previous slide
|
655 |
*/
|
656 |
getPrev : function () {
|
657 |
-
index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) )
|
|
|
658 |
if ( index > 0 ) {
|
|
|
|
|
659 |
index--;
|
660 |
this.setSlide( index );
|
661 |
this.preloadMedia( index-1 );
|
662 |
-
}
|
663 |
-
|
664 |
-
|
665 |
-
$( '#swipebox-slider' ).addClass( 'leftSpring' );
|
666 |
setTimeout( function() {
|
667 |
-
$( '#swipebox-
|
668 |
}, 500 );
|
669 |
}
|
670 |
},
|
@@ -689,19 +896,24 @@
|
|
689 |
$( 'body' ).unbind( 'touchend' );
|
690 |
$( '#swipebox-slider' ).unbind();
|
691 |
$( '#swipebox-overlay' ).remove();
|
692 |
-
|
|
|
693 |
elem.removeData( '_swipebox' );
|
694 |
-
|
|
|
|
|
695 |
this.target.trigger( 'swipebox-destroy' );
|
|
|
|
|
696 |
$.swipebox.isOpen = false;
|
697 |
-
|
|
|
698 |
plugin.settings.afterClose();
|
|
|
699 |
}
|
700 |
-
|
701 |
};
|
702 |
|
703 |
plugin.init();
|
704 |
-
|
705 |
};
|
706 |
|
707 |
$.fn.swipebox = function( options ) {
|
@@ -711,7 +923,7 @@
|
|
711 |
this.data( '_swipebox', swipebox );
|
712 |
}
|
713 |
return this.data( '_swipebox' );
|
714 |
-
|
715 |
};
|
716 |
|
717 |
-
}( window, document, jQuery ) );
|
1 |
+
/*! Swipebox v1.3.0.2 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
|
2 |
|
3 |
;( function ( window, document, $, undefined ) {
|
4 |
|
5 |
$.swipebox = function( elem, options ) {
|
6 |
|
7 |
// Default options
|
8 |
+
var ui,
|
9 |
+
defaults = {
|
10 |
+
useCSS : true,
|
11 |
+
useSVG : true,
|
12 |
+
initialIndexOnArray : 0,
|
13 |
+
removeBarsOnMobile : true,
|
14 |
+
hideCloseButtonOnMobile : false,
|
15 |
+
hideBarsDelay : 3000,
|
16 |
+
videoMaxWidth : 1140,
|
17 |
+
vimeoColor : 'cccccc',
|
18 |
+
beforeOpen: null,
|
19 |
+
afterOpen: null,
|
20 |
+
afterClose: null,
|
21 |
+
loopAtEnd: false,
|
22 |
+
autoplayVideos: false,
|
23 |
+
queryStringData: {},
|
24 |
+
toggleClassOnLoad: ''
|
25 |
+
},
|
26 |
+
|
27 |
+
plugin = this,
|
28 |
+
elements = [], // slides array [ { href:'...', title:'...' }, ...],
|
29 |
+
$elem,
|
30 |
+
selector = elem.selector,
|
31 |
+
$selector = $( selector ),
|
32 |
+
isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
|
33 |
+
isTouch = isMobile !== null || document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
|
34 |
+
supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect,
|
35 |
+
winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
|
36 |
+
winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
|
37 |
+
currentX = 0,
|
38 |
+
/* jshint multistr: true */
|
39 |
+
html = '<div id="swipebox-overlay">\
|
40 |
+
<div id="swipebox-container">\
|
41 |
+
<div id="swipebox-slider"></div>\
|
42 |
+
<div id="swipebox-top-bar">\
|
43 |
+
<div id="swipebox-title"></div>\
|
44 |
+
</div>\
|
45 |
+
<div id="swipebox-bottom-bar">\
|
46 |
+
<div id="swipebox-arrows">\
|
47 |
+
<a id="swipebox-prev"></a>\
|
48 |
+
<a id="swipebox-next"></a>\
|
49 |
+
</div>\
|
50 |
+
</div>\
|
51 |
+
<a id="swipebox-close"></a>\
|
52 |
+
</div>\
|
53 |
+
</div>';
|
54 |
|
55 |
plugin.settings = {};
|
56 |
|
57 |
+
$.swipebox.close = function () {
|
58 |
+
ui.closeSlide();
|
59 |
+
};
|
60 |
+
|
61 |
+
$.swipebox.extend = function () {
|
62 |
+
return ui;
|
63 |
+
};
|
64 |
+
|
65 |
plugin.init = function() {
|
66 |
|
67 |
plugin.settings = $.extend( {}, defaults, options );
|
81 |
if ( event.target.parentNode.className === 'slide current' ) {
|
82 |
|
83 |
return false;
|
|
|
84 |
}
|
85 |
+
|
86 |
if ( ! $.isArray( elem ) ) {
|
87 |
ui.destroy();
|
88 |
$elem = $( selector );
|
89 |
ui.actions();
|
90 |
}
|
91 |
+
|
92 |
elements = [];
|
93 |
var index , relType, relVal;
|
94 |
|
95 |
+
// Allow for HTML5 compliant attribute before legacy use of rel
|
96 |
if ( ! relVal ) {
|
97 |
+
relType = 'data-rel';
|
98 |
relVal = $( this ).attr( relType );
|
99 |
}
|
100 |
|
101 |
+
if ( ! relVal ) {
|
102 |
+
relType = 'rel';
|
103 |
+
relVal = $( this ).attr( relType );
|
104 |
+
}
|
105 |
+
|
106 |
if ( relVal && relVal !== '' && relVal !== 'nofollow' ) {
|
107 |
$elem = $selector.filter( '[' + relType + '="' + relVal + '"]' );
|
108 |
} else {
|
111 |
|
112 |
$elem.each( function() {
|
113 |
|
114 |
+
var title = null,
|
115 |
href = null;
|
116 |
+
|
117 |
if ( $( this ).attr( 'title' ) ) {
|
118 |
title = $( this ).attr( 'title' );
|
119 |
}
|
120 |
+
|
121 |
|
122 |
if ( $( this ).attr( 'href' ) ) {
|
123 |
href = $( this ).attr( 'href' );
|
124 |
}
|
125 |
+
|
126 |
elements.push( {
|
127 |
href: href,
|
128 |
title: title
|
138 |
}
|
139 |
};
|
140 |
|
141 |
+
ui = {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
142 |
|
143 |
/**
|
144 |
* Initiate Swipebox
|
145 |
*/
|
146 |
init : function( index ) {
|
147 |
+
if ( plugin.settings.beforeOpen ) {
|
148 |
plugin.settings.beforeOpen();
|
149 |
+
}
|
150 |
this.target.trigger( 'swipebox-start' );
|
151 |
$.swipebox.isOpen = true;
|
152 |
this.build();
|
154 |
this.openMedia( index );
|
155 |
this.preloadMedia( index+1 );
|
156 |
this.preloadMedia( index-1 );
|
157 |
+
if ( plugin.settings.afterOpen ) {
|
158 |
+
plugin.settings.afterOpen();
|
159 |
+
}
|
160 |
},
|
161 |
|
162 |
/**
|
163 |
* Built HTML containers and fire main functions
|
164 |
*/
|
165 |
build : function () {
|
166 |
+
var $this = this, bg;
|
167 |
|
168 |
$( 'body' ).append( html );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
169 |
|
170 |
+
if ( supportSVG && plugin.settings.useSVG === true ) {
|
171 |
+
bg = $( '#swipebox-close' ).css( 'background-image' );
|
|
|
172 |
bg = bg.replace( 'png', 'svg' );
|
173 |
+
$( '#swipebox-prev, #swipebox-next, #swipebox-close' ).css( {
|
174 |
'background-image' : bg
|
175 |
} );
|
176 |
}
|
177 |
+
|
178 |
+
if ( isMobile && plugin.settings.removeBarsOnMobile ) {
|
179 |
+
$( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove();
|
180 |
+
}
|
181 |
+
|
182 |
$.each( elements, function() {
|
183 |
$( '#swipebox-slider' ).append( '<div class="slide"></div>' );
|
184 |
} );
|
185 |
|
186 |
$this.setDim();
|
187 |
$this.actions();
|
188 |
+
|
189 |
if ( isTouch ) {
|
190 |
$this.gesture();
|
|
|
|
|
191 |
}
|
192 |
+
|
193 |
+
// Devices can have both touch and keyboard input so always allow key events
|
194 |
+
$this.keyboard();
|
195 |
+
|
196 |
$this.animBars();
|
197 |
$this.resize();
|
198 |
+
|
199 |
},
|
200 |
|
201 |
/**
|
204 |
setDim : function () {
|
205 |
|
206 |
var width, height, sliderCss = {};
|
207 |
+
|
208 |
// Reset dimensions on mobile orientation change
|
209 |
+
if ( 'onorientationchange' in window ) {
|
210 |
|
211 |
+
window.addEventListener( 'orientationchange', function() {
|
212 |
if ( window.orientation === 0 ) {
|
213 |
width = winWidth;
|
214 |
height = winHeight;
|
217 |
height = winWidth;
|
218 |
}
|
219 |
}, false );
|
220 |
+
|
221 |
+
|
222 |
} else {
|
223 |
|
224 |
width = window.innerWidth ? window.innerWidth : $( window ).width();
|
239 |
*/
|
240 |
resize : function () {
|
241 |
var $this = this;
|
242 |
+
|
243 |
$( window ).resize( function() {
|
244 |
$this.setDim();
|
245 |
} ).resize();
|
249 |
* Check if device supports CSS transitions
|
250 |
*/
|
251 |
supportTransition : function () {
|
252 |
+
|
253 |
+
var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split( ' ' ),
|
254 |
+
i;
|
255 |
+
|
256 |
+
for ( i = 0; i < prefixes.length; i++ ) {
|
257 |
if ( document.createElement( 'div' ).style[ prefixes[i] ] !== undefined ) {
|
258 |
return prefixes[i];
|
259 |
}
|
274 |
* Touch navigation
|
275 |
*/
|
276 |
gesture : function () {
|
277 |
+
|
278 |
var $this = this,
|
279 |
+
index,
|
280 |
+
hDistance,
|
281 |
+
vDistance,
|
282 |
+
hDistanceLast,
|
283 |
+
vDistanceLast,
|
284 |
+
hDistancePercent,
|
285 |
+
vSwipe = false,
|
286 |
+
hSwipe = false,
|
287 |
+
hSwipMinDistance = 10,
|
288 |
+
vSwipMinDistance = 50,
|
289 |
+
startCoords = {},
|
290 |
+
endCoords = {},
|
291 |
+
bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ),
|
292 |
+
slider = $( '#swipebox-slider' );
|
293 |
|
294 |
bars.addClass( 'visible-bars' );
|
295 |
$this.setTimeout();
|
296 |
|
297 |
$( 'body' ).bind( 'touchstart', function( event ) {
|
298 |
|
299 |
+
$( this ).addClass( 'touching' );
|
300 |
+
index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
|
301 |
endCoords = event.originalEvent.targetTouches[0];
|
302 |
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
|
303 |
+
startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
|
304 |
+
|
305 |
+
$( '#swipebox-slider' ).css( {
|
306 |
+
'-webkit-transform' : 'translate3d(' + currentX +'%, 0, 0)',
|
307 |
+
'transform' : 'translate3d(' + currentX + '%, 0, 0)'
|
308 |
+
} );
|
309 |
|
310 |
$( '.touching' ).bind( 'touchmove',function( event ) {
|
311 |
event.preventDefault();
|
312 |
event.stopPropagation();
|
313 |
endCoords = event.originalEvent.targetTouches[0];
|
314 |
|
315 |
+
if ( ! hSwipe ) {
|
316 |
+
vDistanceLast = vDistance;
|
317 |
+
vDistance = endCoords.pageY - startCoords.pageY;
|
318 |
+
if ( Math.abs( vDistance ) >= vSwipMinDistance || vSwipe ) {
|
319 |
+
var opacity = 0.75 - Math.abs(vDistance) / slider.height();
|
320 |
+
|
321 |
+
slider.css( { 'top': vDistance + 'px' } );
|
322 |
+
slider.css( { 'opacity': opacity } );
|
323 |
+
|
324 |
+
vSwipe = true;
|
325 |
+
}
|
326 |
+
}
|
327 |
+
|
328 |
+
hDistanceLast = hDistance;
|
329 |
+
hDistance = endCoords.pageX - startCoords.pageX;
|
330 |
+
hDistancePercent = hDistance * 100 / winWidth;
|
331 |
+
|
332 |
+
if ( ! hSwipe && ! vSwipe && Math.abs( hDistance ) >= hSwipMinDistance ) {
|
333 |
+
$( '#swipebox-slider' ).css( {
|
334 |
+
'-webkit-transition' : '',
|
335 |
+
'transition' : ''
|
336 |
+
} );
|
337 |
+
hSwipe = true;
|
338 |
+
}
|
339 |
+
|
340 |
+
if ( hSwipe ) {
|
341 |
+
|
342 |
+
// swipe left
|
343 |
+
if ( 0 < hDistance ) {
|
344 |
+
|
345 |
+
// first slide
|
346 |
+
if ( 0 === index ) {
|
347 |
+
// console.log( 'first' );
|
348 |
+
$( '#swipebox-overlay' ).addClass( 'leftSpringTouch' );
|
349 |
+
} else {
|
350 |
+
// Follow gesture
|
351 |
+
$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
|
352 |
+
$( '#swipebox-slider' ).css( {
|
353 |
+
'-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
|
354 |
+
'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
|
355 |
+
} );
|
356 |
+
}
|
357 |
+
|
358 |
+
// swipe rught
|
359 |
+
} else if ( 0 > hDistance ) {
|
360 |
+
|
361 |
+
// last Slide
|
362 |
+
if ( elements.length === index +1 ) {
|
363 |
+
// console.log( 'last' );
|
364 |
+
$( '#swipebox-overlay' ).addClass( 'rightSpringTouch' );
|
365 |
+
} else {
|
366 |
+
$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
|
367 |
+
$( '#swipebox-slider' ).css( {
|
368 |
+
'-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
|
369 |
+
'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
|
370 |
+
} );
|
371 |
+
}
|
372 |
+
|
373 |
+
}
|
374 |
+
}
|
375 |
} );
|
376 |
+
|
377 |
return false;
|
378 |
|
379 |
} ).bind( 'touchend',function( event ) {
|
380 |
event.preventDefault();
|
381 |
event.stopPropagation();
|
382 |
+
|
383 |
+
$( '#swipebox-slider' ).css( {
|
384 |
+
'-webkit-transition' : '-webkit-transform 0.4s ease',
|
385 |
+
'transition' : 'transform 0.4s ease'
|
386 |
+
} );
|
387 |
+
|
388 |
+
vDistance = endCoords.pageY - startCoords.pageY;
|
389 |
+
hDistance = endCoords.pageX - startCoords.pageX;
|
390 |
+
hDistancePercent = hDistance*100/winWidth;
|
391 |
+
|
392 |
+
// Swipe to bottom to close
|
393 |
+
if ( vSwipe ) {
|
394 |
+
vSwipe = false;
|
395 |
+
if ( Math.abs( vDistance ) >= 2 * vSwipMinDistance && Math.abs( vDistance ) > Math.abs( vDistanceLast ) ) {
|
396 |
+
var vOffset = vDistance > 0 ? slider.height() : - slider.height();
|
397 |
+
slider.animate( { top: vOffset + 'px', 'opacity': 0 },
|
398 |
+
300,
|
399 |
+
function () {
|
400 |
+
$this.closeSlide();
|
401 |
+
} );
|
402 |
+
} else {
|
403 |
+
slider.animate( { top: 0, 'opacity': 1 }, 300 );
|
404 |
+
}
|
405 |
+
|
406 |
+
} else if ( hSwipe ) {
|
407 |
+
|
408 |
+
hSwipe = false;
|
409 |
+
|
410 |
// swipeLeft
|
411 |
+
if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast) {
|
412 |
+
|
413 |
+
$this.getPrev();
|
414 |
+
|
415 |
// swipeRight
|
416 |
+
} else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast) {
|
417 |
|
418 |
+
$this.getNext();
|
419 |
+
}
|
420 |
+
|
421 |
+
} else { // Top and bottom bars have been removed on touchable devices
|
422 |
// tap
|
423 |
if ( ! bars.hasClass( 'visible-bars' ) ) {
|
424 |
$this.showBars();
|
427 |
$this.clearTimeout();
|
428 |
$this.hideBars();
|
429 |
}
|
430 |
+
}
|
431 |
|
432 |
+
$( '#swipebox-slider' ).css( {
|
433 |
+
'-webkit-transform' : 'translate3d(' + currentX + '%, 0, 0)',
|
434 |
+
'transform' : 'translate3d(' + currentX + '%, 0, 0)'
|
435 |
+
} );
|
436 |
|
437 |
+
$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
|
438 |
$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
|
|
|
|
|
439 |
|
440 |
+
} );
|
441 |
},
|
442 |
|
443 |
/**
|
448 |
var $this = this;
|
449 |
$this.clearTimeout();
|
450 |
$this.timeout = window.setTimeout( function() {
|
451 |
+
$this.hideBars();
|
452 |
},
|
453 |
+
|
454 |
plugin.settings.hideBarsDelay
|
455 |
);
|
456 |
}
|
457 |
},
|
458 |
+
|
459 |
/**
|
460 |
* Clear timer
|
461 |
*/
|
462 |
+
clearTimeout: function () {
|
463 |
window.clearTimeout( this.timeout );
|
464 |
this.timeout = null;
|
465 |
},
|
468 |
* Show navigation and title bars
|
469 |
*/
|
470 |
showBars : function () {
|
471 |
+
var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
|
472 |
if ( this.doCssTrans() ) {
|
473 |
bars.addClass( 'visible-bars' );
|
474 |
} else {
|
475 |
+
$( '#swipebox-top-bar' ).animate( { top : 0 }, 500 );
|
476 |
+
$( '#swipebox-bottom-bar' ).animate( { bottom : 0 }, 500 );
|
477 |
setTimeout( function() {
|
478 |
bars.addClass( 'visible-bars' );
|
479 |
}, 1000 );
|
484 |
* Hide navigation and title bars
|
485 |
*/
|
486 |
hideBars : function () {
|
487 |
+
var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
|
488 |
if ( this.doCssTrans() ) {
|
489 |
bars.removeClass( 'visible-bars' );
|
490 |
} else {
|
491 |
+
$( '#swipebox-top-bar' ).animate( { top : '-50px' }, 500 );
|
492 |
+
$( '#swipebox-bottom-bar' ).animate( { bottom : '-50px' }, 500 );
|
493 |
setTimeout( function() {
|
494 |
bars.removeClass( 'visible-bars' );
|
495 |
}, 1000 );
|
500 |
* Animate navigation and top bars
|
501 |
*/
|
502 |
animBars : function () {
|
503 |
+
var $this = this,
|
504 |
+
bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
|
505 |
+
|
506 |
bars.addClass( 'visible-bars' );
|
507 |
$this.setTimeout();
|
508 |
+
|
509 |
$( '#swipebox-slider' ).click( function() {
|
510 |
if ( ! bars.hasClass( 'visible-bars' ) ) {
|
511 |
$this.showBars();
|
513 |
}
|
514 |
} );
|
515 |
|
516 |
+
$( '#swipebox-bottom-bar' ).hover( function() {
|
517 |
+
$this.showBars();
|
518 |
+
bars.addClass( 'visible-bars' );
|
519 |
+
$this.clearTimeout();
|
|
|
|
|
|
|
|
|
|
|
|
|
520 |
|
521 |
+
}, function() {
|
522 |
+
if ( plugin.settings.hideBarsDelay > 0 ) {
|
523 |
+
bars.removeClass( 'visible-bars' );
|
524 |
+
$this.setTimeout();
|
525 |
+
}
|
526 |
|
527 |
+
} );
|
528 |
},
|
529 |
|
530 |
/**
|
535 |
$( window ).bind( 'keyup', function( event ) {
|
536 |
event.preventDefault();
|
537 |
event.stopPropagation();
|
538 |
+
|
539 |
if ( event.keyCode === 37 ) {
|
540 |
+
|
541 |
$this.getPrev();
|
542 |
+
|
543 |
} else if ( event.keyCode === 39 ) {
|
544 |
+
|
545 |
$this.getNext();
|
546 |
+
|
547 |
} else if ( event.keyCode === 27 ) {
|
548 |
+
|
549 |
$this.closeSlide();
|
|
|
550 |
}
|
551 |
} );
|
552 |
},
|
555 |
* Navigation events : go to next slide, go to prevous slide and close
|
556 |
*/
|
557 |
actions : function () {
|
558 |
+
var $this = this,
|
559 |
+
action = 'touchend click'; // Just detect for both event types to allow for multi-input
|
560 |
|
|
|
|
|
561 |
if ( elements.length < 2 ) {
|
562 |
+
|
563 |
+
$( '#swipebox-bottom-bar' ).hide();
|
564 |
+
|
565 |
+
if ( undefined === elements[ 1 ] ) {
|
566 |
+
$( '#swipebox-top-bar' ).hide();
|
567 |
+
}
|
568 |
+
|
569 |
} else {
|
570 |
$( '#swipebox-prev' ).bind( action, function( event ) {
|
571 |
event.preventDefault();
|
573 |
$this.getPrev();
|
574 |
$this.setTimeout();
|
575 |
} );
|
576 |
+
|
577 |
$( '#swipebox-next' ).bind( action, function( event ) {
|
578 |
event.preventDefault();
|
579 |
event.stopPropagation();
|
586 |
$this.closeSlide();
|
587 |
} );
|
588 |
},
|
589 |
+
|
590 |
/**
|
591 |
* Set current slide
|
592 |
*/
|
593 |
setSlide : function ( index, isFirst ) {
|
594 |
+
|
595 |
isFirst = isFirst || false;
|
596 |
+
|
597 |
var slider = $( '#swipebox-slider' );
|
598 |
+
|
599 |
+
currentX = -index*100;
|
600 |
+
|
601 |
if ( this.doCssTrans() ) {
|
602 |
+
slider.css( {
|
603 |
+
'-webkit-transform' : 'translate3d(' + (-index*100)+'%, 0, 0)',
|
604 |
+
'transform' : 'translate3d(' + (-index*100)+'%, 0, 0)'
|
605 |
+
} );
|
606 |
} else {
|
607 |
slider.animate( { left : ( -index*100 )+'%' } );
|
608 |
}
|
609 |
+
|
610 |
$( '#swipebox-slider .slide' ).removeClass( 'current' );
|
611 |
$( '#swipebox-slider .slide' ).eq( index ).addClass( 'current' );
|
612 |
this.setTitle( index );
|
616 |
}
|
617 |
|
618 |
$( '#swipebox-prev, #swipebox-next' ).removeClass( 'disabled' );
|
619 |
+
|
620 |
if ( index === 0 ) {
|
621 |
$( '#swipebox-prev' ).addClass( 'disabled' );
|
622 |
+
} else if ( index === elements.length - 1 && plugin.settings.loopAtEnd !== true ) {
|
623 |
$( '#swipebox-next' ).addClass( 'disabled' );
|
624 |
}
|
625 |
},
|
626 |
+
|
627 |
/**
|
628 |
* Open slide
|
629 |
*/
|
631 |
$( 'html' ).addClass( 'swipebox-html' );
|
632 |
if ( isTouch ) {
|
633 |
$( 'html' ).addClass( 'swipebox-touch' );
|
634 |
+
|
635 |
+
if ( plugin.settings.hideCloseButtonOnMobile ) {
|
636 |
+
$( 'html' ).addClass( 'swipebox-no-close-button' );
|
637 |
+
}
|
638 |
+
} else {
|
639 |
+
$( 'html' ).addClass( 'swipebox-no-touch' );
|
640 |
}
|
641 |
$( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
|
642 |
this.setSlide( index, true );
|
643 |
},
|
644 |
+
|
645 |
/**
|
646 |
* Set a time out if the media is a video
|
647 |
*/
|
648 |
preloadMedia : function ( index ) {
|
649 |
+
var $this = this,
|
650 |
+
src = null;
|
651 |
|
652 |
+
if ( elements[ index ] !== undefined ) {
|
653 |
+
src = elements[ index ].href;
|
654 |
+
}
|
655 |
|
656 |
if ( ! $this.isVideo( src ) ) {
|
657 |
setTimeout( function() {
|
661 |
$this.openMedia( index );
|
662 |
}
|
663 |
},
|
664 |
+
|
665 |
/**
|
666 |
* Open
|
667 |
*/
|
668 |
openMedia : function ( index ) {
|
669 |
+
var $this = this,
|
670 |
+
src,
|
671 |
+
slide;
|
672 |
|
673 |
+
if ( elements[ index ] !== undefined ) {
|
674 |
+
src = elements[ index ].href;
|
675 |
+
}
|
676 |
|
677 |
+
if ( index < 0 || index >= elements.length ) {
|
678 |
return false;
|
679 |
}
|
680 |
|
681 |
+
slide = $( '#swipebox-slider .slide' ).eq( index );
|
682 |
+
|
683 |
if ( ! $this.isVideo( src ) ) {
|
684 |
+
slide.addClass( 'slide-loading' );
|
685 |
$this.loadMedia( src, function() {
|
686 |
+
slide.removeClass( 'slide-loading' );
|
687 |
+
slide.html( this );
|
688 |
} );
|
689 |
} else {
|
690 |
+
slide.html( $this.getVideo( src ) );
|
691 |
}
|
692 |
+
|
693 |
},
|
694 |
|
695 |
/**
|
696 |
* Set link title attribute as caption
|
697 |
*/
|
698 |
+
setTitle : function ( index ) {
|
699 |
var title = null;
|
700 |
|
701 |
+
$( '#swipebox-title' ).empty();
|
702 |
+
|
703 |
+
if ( elements[ index ] !== undefined ) {
|
704 |
+
title = elements[ index ].title;
|
705 |
+
}
|
706 |
|
|
|
|
|
|
|
707 |
if ( title ) {
|
708 |
+
$( '#swipebox-top-bar' ).show();
|
709 |
+
$( '#swipebox-title' ).append( title );
|
710 |
+
} else {
|
711 |
+
$( '#swipebox-top-bar' ).hide();
|
712 |
}
|
713 |
},
|
714 |
|
718 |
isVideo : function ( src ) {
|
719 |
|
720 |
if ( src ) {
|
721 |
+
if ( src.match( /(youtube\.com|youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
|
722 |
return true;
|
723 |
}
|
724 |
+
|
725 |
+
if ( src.toLowerCase().indexOf( 'swipeboxvideo=1' ) >= 0 ) {
|
726 |
+
|
727 |
+
return true;
|
728 |
+
}
|
729 |
+
}
|
730 |
+
|
731 |
+
},
|
732 |
+
|
733 |
+
/**
|
734 |
+
* Parse URI querystring and:
|
735 |
+
* - overrides value provided via dictionary
|
736 |
+
* - rebuild it again returning a string
|
737 |
+
*/
|
738 |
+
parseUri : function (uri, customData) {
|
739 |
+
var a = document.createElement('a'),
|
740 |
+
qs = {};
|
741 |
+
|
742 |
+
// Decode the URI
|
743 |
+
a.href = decodeURIComponent( uri );
|
744 |
+
|
745 |
+
// QueryString to Object
|
746 |
+
qs = JSON.parse( '{"' + a.search.toLowerCase().replace('?','').replace(/&/g,'","').replace(/=/g,'":"') + '"}' );
|
747 |
+
|
748 |
+
// Extend with custom data
|
749 |
+
if ( $.isPlainObject( customData ) ) {
|
750 |
+
qs = $.extend( qs, customData, plugin.settings.queryStringData ); // The dev has always the final word
|
751 |
}
|
752 |
+
|
753 |
+
// Return querystring as a string
|
754 |
+
return $
|
755 |
+
.map( qs, function (val, key) {
|
756 |
+
if ( val && val > '' ) {
|
757 |
+
return encodeURIComponent( key ) + '=' + encodeURIComponent( val );
|
758 |
+
}
|
759 |
+
})
|
760 |
+
.join('&');
|
761 |
},
|
762 |
|
763 |
/**
|
764 |
* Get video iframe code from URL
|
765 |
*/
|
766 |
getVideo : function( url ) {
|
767 |
+
var iframe = '',
|
768 |
+
youtubeUrl = url.match( /((?:www\.)?youtube\.com|(?:www\.)?youtube-nocookie\.com)\/watch\?v=([a-zA-Z0-9\-_]+)/ ),
|
769 |
+
youtubeShortUrl = url.match(/(?:www\.)?youtu\.be\/([a-zA-Z0-9\-_]+)/),
|
770 |
+
vimeoUrl = url.match( /(?:www\.)?vimeo\.com\/([0-9]*)/ ),
|
771 |
+
qs = '';
|
772 |
if ( youtubeUrl || youtubeShortUrl) {
|
773 |
if ( youtubeShortUrl ) {
|
774 |
youtubeUrl = youtubeShortUrl;
|
775 |
}
|
776 |
+
qs = ui.parseUri( url, {
|
777 |
+
'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
|
778 |
+
'v' : ''
|
779 |
+
});
|
780 |
+
iframe = '<iframe width="560" height="315" src="//' + youtubeUrl[1] + '/embed/' + youtubeUrl[2] + '?' + qs + '" frameborder="0" allowfullscreen></iframe>';
|
781 |
+
|
782 |
} else if ( vimeoUrl ) {
|
783 |
+
qs = ui.parseUri( url, {
|
784 |
+
'autoplay' : ( plugin.settings.autoplayVideos ? '1' : '0' ),
|
785 |
+
'byline' : '0',
|
786 |
+
'portrait' : '0',
|
787 |
+
'color': plugin.settings.vimeoColor
|
788 |
+
});
|
789 |
+
iframe = '<iframe width="560" height="315" src="//player.vimeo.com/video/' + vimeoUrl[1] + '?' + qs + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
|
790 |
|
791 |
+
} else {
|
792 |
+
iframe = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
|
793 |
}
|
794 |
|
795 |
+
return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videoMaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
|
796 |
},
|
797 |
+
|
798 |
/**
|
799 |
* Load image
|
800 |
*/
|
801 |
loadMedia : function ( src, callback ) {
|
802 |
+
// Inline content
|
803 |
+
if ( src.trim().indexOf('#') === 0 ) {
|
804 |
+
callback.call(
|
805 |
+
$('<div>', {
|
806 |
+
'class' : 'swipebox-inline-container'
|
807 |
+
})
|
808 |
+
.append(
|
809 |
+
$(src)
|
810 |
+
.clone()
|
811 |
+
.toggleClass( plugin.settings.toggleClassOnLoad )
|
812 |
+
)
|
813 |
+
);
|
814 |
+
}
|
815 |
+
// Everything else
|
816 |
+
else {
|
817 |
+
if ( ! this.isVideo( src ) ) {
|
818 |
+
var img = $( '<img>' ).on( 'load', function() {
|
819 |
+
callback.call( img );
|
820 |
+
} );
|
821 |
+
|
822 |
+
img.attr( 'src', src );
|
823 |
+
}
|
824 |
+
}
|
825 |
},
|
826 |
+
|
827 |
/**
|
828 |
* Get next slide
|
829 |
*/
|
830 |
getNext : function () {
|
831 |
+
var $this = this,
|
832 |
+
src,
|
833 |
+
index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
|
834 |
+
if ( index + 1 < elements.length ) {
|
835 |
+
|
836 |
+
src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
|
837 |
+
$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
|
838 |
index++;
|
839 |
$this.setSlide( index );
|
840 |
$this.preloadMedia( index+1 );
|
|
|
841 |
} else {
|
842 |
+
|
843 |
+
if ( plugin.settings.loopAtEnd === true ) {
|
844 |
+
src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
|
845 |
+
$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
|
846 |
+
index = 0;
|
847 |
+
$this.preloadMedia( index );
|
848 |
+
$this.setSlide( index );
|
849 |
+
$this.preloadMedia( index + 1 );
|
850 |
+
} else {
|
851 |
+
$( '#swipebox-overlay' ).addClass( 'rightSpring' );
|
852 |
+
setTimeout( function() {
|
853 |
+
$( '#swipebox-overlay' ).removeClass( 'rightSpring' );
|
854 |
+
}, 500 );
|
855 |
+
}
|
856 |
}
|
857 |
},
|
858 |
+
|
859 |
/**
|
860 |
* Get previous slide
|
861 |
*/
|
862 |
getPrev : function () {
|
863 |
+
var index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ),
|
864 |
+
src;
|
865 |
if ( index > 0 ) {
|
866 |
+
src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe').attr( 'src' );
|
867 |
+
$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
|
868 |
index--;
|
869 |
this.setSlide( index );
|
870 |
this.preloadMedia( index-1 );
|
871 |
+
} else {
|
872 |
+
$( '#swipebox-overlay' ).addClass( 'leftSpring' );
|
|
|
|
|
873 |
setTimeout( function() {
|
874 |
+
$( '#swipebox-overlay' ).removeClass( 'leftSpring' );
|
875 |
}, 500 );
|
876 |
}
|
877 |
},
|
896 |
$( 'body' ).unbind( 'touchend' );
|
897 |
$( '#swipebox-slider' ).unbind();
|
898 |
$( '#swipebox-overlay' ).remove();
|
899 |
+
|
900 |
+
if ( ! $.isArray( elem ) ) {
|
901 |
elem.removeData( '_swipebox' );
|
902 |
+
}
|
903 |
+
|
904 |
+
if ( this.target ) {
|
905 |
this.target.trigger( 'swipebox-destroy' );
|
906 |
+
}
|
907 |
+
|
908 |
$.swipebox.isOpen = false;
|
909 |
+
|
910 |
+
if ( plugin.settings.afterClose ) {
|
911 |
plugin.settings.afterClose();
|
912 |
+
}
|
913 |
}
|
|
|
914 |
};
|
915 |
|
916 |
plugin.init();
|
|
|
917 |
};
|
918 |
|
919 |
$.fn.swipebox = function( options ) {
|
923 |
this.data( '_swipebox', swipebox );
|
924 |
}
|
925 |
return this.data( '_swipebox' );
|
926 |
+
|
927 |
};
|
928 |
|
929 |
+
}( window, document, jQuery ) );
|
readme.txt
CHANGED
@@ -3,51 +3,56 @@ Contributors: (mediabeta, frafra85, fabiodipa)
|
|
3 |
Donate link: https://www.google.com/url?q=https%3A%2F%2Fwww.paypal.com%2Fcgi-bin%2Fwebscr%3Fcmd%3D_s-xclick%26hosted_button_id%3D8MXZ37DWHAX46&sa=D&sntz=1&usg=AFQjCNFHixLdowdc2AAEXDYmM9tQBl-TXQ
|
4 |
Tags: Instagram plugin, Instagram, Instagram gallery, Instagram images, Lightbox Instagram,Grid Instagram view, Instagram responsive, Instagram touch, Instagram photos,Instagram posts, Instagram page, Instagram widgets
|
5 |
Requires at least: 3.0.1
|
6 |
-
Tested up to: 4.2.
|
7 |
-
Version: 1.6.
|
8 |
-
Stable tag: 1.6.
|
9 |
License: GPLv2 or later
|
10 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
12 |
-
Instagram on your
|
13 |
|
14 |
== Description ==
|
15 |
|
16 |
= Visualize Instagram Photos in your website! =
|
17 |
|
18 |
-
|
19 |
-
hashtag. You can easily use Enjoy Instagram in your pages, posts, sidebars with
|
20 |
-
shortcodes or widgets.
|
21 |
|
22 |
-
Each photo can be shown in
|
23 |
-
optimized for mobile devices.
|
24 |
|
25 |
-
Here is Live Demo: http://www.mediabeta.com/enjoy-instagram/
|
26 |
|
27 |
-
= Features =
|
28 |
|
29 |
-
*
|
30 |
-
*
|
31 |
-
*
|
32 |
-
*
|
33 |
-
*
|
|
|
|
|
|
|
|
|
34 |
* Touch
|
35 |
-
* Completely responsive and Optimized Mobile Devices
|
36 |
-
|
37 |
-
|
38 |
-
*
|
39 |
-
* Possibility of inserting the Shortcode in a text
|
40 |
-
* Very Simple Installation and Configuration
|
41 |
|
42 |
= PREMIUM VERSION =
|
43 |
|
44 |
-
|
|
|
|
|
|
|
|
|
45 |
|
46 |
* NEW Polaroid View to overlay images as polaroid pictures
|
47 |
* NEW Album View to show your pictures organized for username and or hashtags
|
48 |
* NEW Badge View that will help you link to and promote your Instagram web profile
|
49 |
* Autoreload Stream of Photos
|
50 |
-
* Moderation Panel: In real time you can moderate new photos and decide to approve and to publish or to rejected (Watch how it works:
|
|
|
51 |
* Autoplay
|
52 |
* Loop
|
53 |
* Possibility to choose what link on the photo: Lightbox, Instagram, Custom URL or nothing.
|
@@ -55,9 +60,11 @@ See demo http://www.mediabetaprojects.com/enjoy-instagram-premium/
|
|
55 |
* Custom Transition Effect
|
56 |
* Custom JS: set time to autoplay and speed, set name of prev and next buttons and much more.
|
57 |
* Possibility to choose if show photo’s author, caption and likes number.
|
58 |
-
* and many others features..
|
59 |
|
60 |
-
|
|
|
|
|
|
|
61 |
|
62 |
== Installation ==
|
63 |
|
@@ -71,8 +78,11 @@ Installation and Configuration are very simple :
|
|
71 |
|
72 |
== Frequently Asked Questions ==
|
73 |
|
74 |
-
=
|
|
|
|
|
75 |
|
|
|
76 |
Repeat Step 01 and Step 02 again.
|
77 |
|
78 |
|
@@ -113,6 +123,8 @@ Repeat Step 01 and Step 02 again.
|
|
113 |
* Add support for https protocol
|
114 |
= 1.6.1 =
|
115 |
* Fix hashtag mode
|
|
|
|
|
116 |
|
117 |
== Upgrade Notice ==
|
118 |
|
@@ -139,4 +151,6 @@ Repeat Step 01 and Step 02 again.
|
|
139 |
= 1.6 =
|
140 |
* Add support for https protocol
|
141 |
= 1.6.1 =
|
142 |
-
* Fix hashtag mode
|
|
|
|
3 |
Donate link: https://www.google.com/url?q=https%3A%2F%2Fwww.paypal.com%2Fcgi-bin%2Fwebscr%3Fcmd%3D_s-xclick%26hosted_button_id%3D8MXZ37DWHAX46&sa=D&sntz=1&usg=AFQjCNFHixLdowdc2AAEXDYmM9tQBl-TXQ
|
4 |
Tags: Instagram plugin, Instagram, Instagram gallery, Instagram images, Lightbox Instagram,Grid Instagram view, Instagram responsive, Instagram touch, Instagram photos,Instagram posts, Instagram page, Instagram widgets
|
5 |
Requires at least: 3.0.1
|
6 |
+
Tested up to: 4.2.2
|
7 |
+
Version: 1.6.2
|
8 |
+
Stable tag: 1.6.2
|
9 |
License: GPLv2 or later
|
10 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
12 |
+
Instagram on your website with shortcodes and widgets! Images of Instagram profiles and hashtags on posts, pages, sidebars with Carousel and Grid view
|
13 |
|
14 |
== Description ==
|
15 |
|
16 |
= Visualize Instagram Photos in your website! =
|
17 |
|
18 |
+
Publish easily Instagram photos in your pages, posts, sidebars thanks to simple shortcodes and widgets.
|
|
|
|
|
19 |
|
20 |
+
Each photo can be shown in Carousel and Grid mode with Lightbox effect.
|
21 |
+
Everything is responsive and optimized for mobile devices.
|
22 |
|
23 |
+
= Here is Live Demo: = http://www.mediabeta.com/enjoy-instagram/
|
24 |
|
25 |
+
= Basic Features =
|
26 |
|
27 |
+
* Show pictures of Instagram profiles and/or Hashtags
|
28 |
+
* Grid View
|
29 |
+
* Fade In Effect for Grid View
|
30 |
+
* Number of columns and rows customizable
|
31 |
+
* Carousel View
|
32 |
+
* Number of pictures to see in same time customizable
|
33 |
+
* Navigations buttons (yes/no)
|
34 |
+
* Shortcodes button in the editor
|
35 |
+
* Widgets for sidebars
|
36 |
* Touch
|
37 |
+
* Completely responsive and Optimized Mobile Devices
|
38 |
+
|
39 |
+
= Very Simple Installation and Configuration =
|
40 |
+
* http://www.mediabetaprojects.com/enjoy-instagram-premium/install-enjoy-instagram-wordpress-plugin/
|
|
|
|
|
41 |
|
42 |
= PREMIUM VERSION =
|
43 |
|
44 |
+
= The first and alone wordpress plugin = that gives you the chance to choose which Instagram photos display in your website.
|
45 |
+
|
46 |
+
In the premium configuration you will have a useful and amazing Moderation Panel!
|
47 |
+
|
48 |
+
= See LIVE PREVIEW: = http://www.mediabetaprojects.com/enjoy-instagram-premium/
|
49 |
|
50 |
* NEW Polaroid View to overlay images as polaroid pictures
|
51 |
* NEW Album View to show your pictures organized for username and or hashtags
|
52 |
* NEW Badge View that will help you link to and promote your Instagram web profile
|
53 |
* Autoreload Stream of Photos
|
54 |
+
* Moderation Panel: In real time you can moderate new photos and decide to approve and to publish or to rejected (Watch how it works:
|
55 |
+
[youtube https://www.youtube.com/watch?v=W6gNqlghbLE]
|
56 |
* Autoplay
|
57 |
* Loop
|
58 |
* Possibility to choose what link on the photo: Lightbox, Instagram, Custom URL or nothing.
|
60 |
* Custom Transition Effect
|
61 |
* Custom JS: set time to autoplay and speed, set name of prev and next buttons and much more.
|
62 |
* Possibility to choose if show photo’s author, caption and likes number.
|
|
|
63 |
|
64 |
+
and many others features..
|
65 |
+
|
66 |
+
= LIVE PREMIUM VERSION DEMO: =
|
67 |
+
http://www.mediabetaprojects.com/enjoy-instagram-premium/
|
68 |
|
69 |
== Installation ==
|
70 |
|
78 |
|
79 |
== Frequently Asked Questions ==
|
80 |
|
81 |
+
= How to Install Enjoy Instagram WordPress Plugin =
|
82 |
+
http://www.mediabetaprojects.com/enjoy-instagram-premium/install-enjoy-instagram-wordpress-plugin/
|
83 |
+
|
84 |
|
85 |
+
= My profile disappeared. What’s happened? =
|
86 |
Repeat Step 01 and Step 02 again.
|
87 |
|
88 |
|
123 |
* Add support for https protocol
|
124 |
= 1.6.1 =
|
125 |
* Fix hashtag mode
|
126 |
+
= 1.6.2 =
|
127 |
+
* Bug Fix
|
128 |
|
129 |
== Upgrade Notice ==
|
130 |
|
151 |
= 1.6 =
|
152 |
* Add support for https protocol
|
153 |
= 1.6.1 =
|
154 |
+
* Fix hashtag mode
|
155 |
+
= 1.6.2 =
|
156 |
+
* Bug Fix
|