Skip to content

Commit 25defbe

Browse files
author
Constantin Saguin
committed
Merge pull request brutaldesign#191 from julianxhokaxhiu/master
Improve video embedding and identify
2 parents 60dc481 + c05bf98 commit 25defbe

File tree

9 files changed

+126
-59
lines changed

9 files changed

+126
-59
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet.
1616
- CSS transitions with jQuery fallback
1717
- Retina support for UI icons
1818
- Easy CSS customization
19+
- Video, Images and Inline content
1920

2021
###Compatibility
2122

@@ -69,6 +70,8 @@ afterOpen: null, // called after opening
6970
afterClose: function(){}, // called after closing
7071
loopAtEnd: false, // true will return to the first image after the last image is reached
7172
autoplayVideos: false // true will autoplay Youtube and Vimeo videos
73+
queryStringData: {} // plain object with custom query string arguments to pass/override for video URLs,
74+
toggleClassOnLoad: '' // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap)
7275
```
7376

7477
###Pull Requests

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"name": "swipebox",
3-
"version": "1.3.0.2",
3+
"version": "1.4.1",
44
"main": "src/js/jquery.swipebox.js"
55
}

‎grunt/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
swipebox
2+
===
3+
4+
A touchable jQuery lightbox
5+
6+
---
7+
8+
This is where the build task lives.

‎grunt/package.json

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
{
22
"name": "grunt-swipebox",
3-
"version": "1.3.0.2",
3+
"version": "1.4.1",
44
"description": "A touchable jQuery lightbox",
5+
"repository": {
6+
"type": "git",
7+
"url": "git://github.com/brutaldesign/swipebox.git"
8+
},
9+
"license": "MIT",
510
"devDependencies": {
6-
"grunt": "~0.4.2",
7-
"load-grunt-tasks": "~0.2.1",
8-
"grunt-contrib-sass": "~0.7.3",
9-
"grunt-autoprefixer": "~0.7.2",
10-
"grunt-contrib-cssmin": "~0.8.0",
11-
"grunt-contrib-jshint": "~0.8.0",
12-
"grunt-contrib-uglify": "~0.2.7",
13-
"grunt-contrib-watch": "~0.5.3",
14-
"grunt-notify": "~0.2.16"
11+
"grunt": "~0.4.5",
12+
"load-grunt-tasks": "~1.0.0",
13+
"grunt-contrib-sass": "~0.8.1",
14+
"grunt-autoprefixer": "~2.0.0",
15+
"grunt-contrib-cssmin": "~0.10.0",
16+
"grunt-contrib-jshint": "~0.10.0",
17+
"grunt-contrib-uglify": "~0.6.0",
18+
"grunt-contrib-watch": "~0.6.1",
19+
"grunt-notify": "~0.3.1"
1520
}
1621
}

‎scss/swipebox.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ html.swipebox-html.swipebox-touch {
6767
margin-right: -1px;
6868
}
6969

70-
img, .swipebox-video-container {
70+
img,
71+
.swipebox-video-container,
72+
.swipebox-inline-container {
7173
display: inline-block;
7274
max-height: 100%;
7375
max-width: 100%;

‎src/css/swipebox.css

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ html.swipebox-html.swipebox-touch {
1616
z-index: 99999 !important;
1717
overflow: hidden;
1818
-webkit-user-select: none;
19-
-moz-user-select: none;
20-
-ms-user-select: none;
21-
user-select: none;
19+
-moz-user-select: none;
20+
-ms-user-select: none;
21+
user-select: none;
2222
}
2323

2424
#swipebox-container {
@@ -29,7 +29,7 @@ html.swipebox-html.swipebox-touch {
2929

3030
#swipebox-slider {
3131
-webkit-transition: -webkit-transform 0.4s ease;
32-
transition: transform 0.4s ease;
32+
transition: transform 0.4s ease;
3333
height: 100%;
3434
left: 0;
3535
top: 0;
@@ -53,7 +53,9 @@ html.swipebox-html.swipebox-touch {
5353
width: 1px;
5454
margin-right: -1px;
5555
}
56-
#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {
56+
#swipebox-slider .slide img,
57+
#swipebox-slider .slide .swipebox-video-container,
58+
#swipebox-slider .slide .swipebox-inline-container {
5759
display: inline-block;
5860
max-height: 100%;
5961
max-width: 100%;
@@ -70,7 +72,7 @@ html.swipebox-html.swipebox-touch {
7072
width: 100%;
7173
padding: 5%;
7274
-webkit-box-sizing: border-box;
73-
box-sizing: border-box;
75+
box-sizing: border-box;
7476
}
7577
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
7678
width: 100%;
@@ -93,7 +95,7 @@ html.swipebox-html.swipebox-touch {
9395
#swipebox-bottom-bar,
9496
#swipebox-top-bar {
9597
-webkit-transition: 0.5s;
96-
transition: 0.5s;
98+
transition: 0.5s;
9799
position: absolute;
98100
left: 0;
99101
z-index: 999;
@@ -106,15 +108,15 @@ html.swipebox-html.swipebox-touch {
106108
}
107109
#swipebox-bottom-bar.visible-bars {
108110
-webkit-transform: translate3d(0, -50px, 0);
109-
transform: translate3d(0, -50px, 0);
111+
transform: translate3d(0, -50px, 0);
110112
}
111113

112114
#swipebox-top-bar {
113115
top: -50px;
114116
}
115117
#swipebox-top-bar.visible-bars {
116118
-webkit-transform: translate3d(0, 50px, 0);
117-
transform: translate3d(0, 50px, 0);
119+
transform: translate3d(0, 50px, 0);
118120
}
119121

120122
#swipebox-title {
@@ -172,18 +174,18 @@ html.swipebox-html.swipebox-touch {
172174

173175
.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
174176
-webkit-animation: rightSpring 0.3s;
175-
animation: rightSpring 0.3s;
177+
animation: rightSpring 0.3s;
176178
}
177179
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
178180
-webkit-animation: leftSpring 0.3s;
179-
animation: leftSpring 0.3s;
181+
animation: leftSpring 0.3s;
180182
}
181183

182184
.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
183185
-webkit-backface-visibility: hidden;
184-
backface-visibility: hidden;
186+
backface-visibility: hidden;
185187
-webkit-transition: all .3s ease;
186-
transition: all .3s ease;
188+
transition: all .3s ease;
187189
content: ' ';
188190
position: absolute;
189191
z-index: 999;
@@ -195,12 +197,12 @@ html.swipebox-html.swipebox-touch {
195197
.swipebox-touch #swipebox-container:before {
196198
left: 0;
197199
-webkit-box-shadow: inset 10px 0px 10px -8px #656565;
198-
box-shadow: inset 10px 0px 10px -8px #656565;
200+
box-shadow: inset 10px 0px 10px -8px #656565;
199201
}
200202
.swipebox-touch #swipebox-container:after {
201203
right: 0;
202204
-webkit-box-shadow: inset -10px 0px 10px -8px #656565;
203-
box-shadow: inset -10px 0px 10px -8px #656565;
205+
box-shadow: inset -10px 0px 10px -8px #656565;
204206
}
205207
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
206208
opacity: 1;
@@ -213,11 +215,9 @@ html.swipebox-html.swipebox-touch {
213215
0% {
214216
left: 0;
215217
}
216-
217218
50% {
218219
left: -30px;
219220
}
220-
221221
100% {
222222
left: 0;
223223
}
@@ -227,11 +227,9 @@ html.swipebox-html.swipebox-touch {
227227
0% {
228228
left: 0;
229229
}
230-
231230
50% {
232231
left: -30px;
233232
}
234-
235233
100% {
236234
left: 0;
237235
}
@@ -240,11 +238,9 @@ html.swipebox-html.swipebox-touch {
240238
0% {
241239
left: 0;
242240
}
243-
244241
50% {
245242
left: 30px;
246243
}
247-
248244
100% {
249245
left: 0;
250246
}
@@ -253,11 +249,9 @@ html.swipebox-html.swipebox-touch {
253249
0% {
254250
left: 0;
255251
}
256-
257252
50% {
258253
left: 30px;
259254
}
260-
261255
100% {
262256
left: 0;
263257
}

‎src/css/swipebox.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/jquery.swipebox.js

Lines changed: 76 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
useCSS : true,
1111
useSVG : true,
1212
initialIndexOnArray : 0,
13+
removeBarsOnMobile : true,
1314
hideCloseButtonOnMobile : false,
1415
hideBarsDelay : 3000,
1516
videoMaxWidth : 1140,
@@ -18,7 +19,9 @@
1819
afterOpen: null,
1920
afterClose: null,
2021
loopAtEnd: false,
21-
autoplayVideos: false
22+
autoplayVideos: false,
23+
queryStringData: {},
24+
toggleClassOnLoad: ''
2225
},
2326

2427
plugin = this,
@@ -172,7 +175,7 @@
172175
} );
173176
}
174177

175-
if ( isMobile ) {
178+
if ( isMobile && plugin.settings.removeBarsOnMobile ) {
176179
$( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove();
177180
}
178181

@@ -715,7 +718,7 @@
715718
isVideo : function ( src ) {
716719

717720
if ( src ) {
718-
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\-_]+)/ ) ) {
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\-_]+)/ ) ) {
719722
return true;
720723
}
721724

@@ -727,46 +730,98 @@
727730

728731
},
729732

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+
730763
/**
731764
* Get video iframe code from URL
732765
*/
733766
getVideo : function( url ) {
734767
var iframe = '',
735-
youtubeUrl = url.match( /watch\?v=([a-zA-Z0-9\-_]+)/ ),
736-
youtubeShortUrl = url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/),
737-
vimeoUrl = url.match( /vimeo\.com\/([0-9]*)/ );
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 = '';
738772
if ( youtubeUrl || youtubeShortUrl) {
739773
if ( youtubeShortUrl ) {
740774
youtubeUrl = youtubeShortUrl;
741775
}
742-
iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '?autoplay='+ plugin.settings.autoplayVideos + '" frameborder="0" allowfullscreen></iframe>';
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>';
743781

744782
} else if ( vimeoUrl ) {
745-
746-
iframe = '<iframe width="560" height="315" src="//player.vimeo.com/video/' + vimeoUrl[1] + '?byline=0&amp;portrait=0&amp;color=' + plugin.settings.vimeoColor + '&autoplay=' + plugin.settings.autoplayVideos + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
747-
748-
}
749-
750-
if ( youtubeUrl || youtubeShortUrl || 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>';
751790

752791
} else {
753792
iframe = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
754793
}
755794

756-
return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videomaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
795+
return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videoMaxWidth + 'px"><div class="swipebox-video">' + iframe + '</div></div>';
757796
},
758797

759798
/**
760799
* Load image
761800
*/
762801
loadMedia : function ( src, callback ) {
763-
if ( ! this.isVideo( src ) ) {
764-
var img = $( '<img>' ).on( 'load', function() {
765-
callback.call( img );
766-
} );
767-
768-
img.attr( 'src', src );
769-
}
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+
}
770825
},
771826

772827
/**

0 commit comments

Comments
 (0)