Skip to content

Commit e42888c

Browse files
author
Constantin
committed
Improved bar animation and gesture detection
1 parent 86e45c3 commit e42888c

File tree

10 files changed

+92
-108
lines changed

10 files changed

+92
-108
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#############
44
grunt
55
demo/sass
6+
dist
67

78
#################
89
## Eclipse

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,8 +239,7 @@ <h3>Options</h3>
239239
</footer>
240240
</div>
241241
<script src="lib/ios-orientationchange-fix.js"></script>
242-
<script src="lib/jquery-2.0.3.min.js"></script>
243-
<script src="lib/jquery.isotope.min.js"></script>
242+
<script src="lib/jquery-2.1.0.min.js"></script>
244243
<script src="src/js/jquery.swipebox.js"></script>
245244
<script type="text/javascript">
246245
;( function( $ ) {

‎lib/jquery-2.0.3.min.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎lib/jquery-2.1.0.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/jquery.isotope.min.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎sass/swipebox.scss‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
2+
13
@import "compass";
24
@import "compass/css3/user-interface";
35
@mixin bar($color) {
46
background-color:$color;
57
@include background-image(linear-gradient( $color, darken($color, 20%)));
68
}
79

8-
// html.swipebox {
9-
// overflow: hidden!important;
10-
// }
10+
html.swipebox-html.swipebox-touch {
11+
overflow: hidden!important;
12+
}
1113

1214
#swipebox-overlay img {
1315
border: none!important;
@@ -101,11 +103,7 @@
101103
bottom: -50px;
102104

103105
&.visible-bars {
104-
bottom: 0;
105-
}
106-
107-
&.force-visible-bars {
108-
bottom: 0!important;
106+
@include translateY(-50px);
109107
}
110108

111109
#swipebox-prev,
@@ -152,11 +150,7 @@
152150
text-align: center;
153151

154152
&.visible-bars {
155-
top: 0;
156-
}
157-
158-
&.force-visible-bars {
159-
top: 0!important;
153+
@include translateY(50px);
160154
}
161155
}
162156

‎src/css/swipebox.css‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
2+
html.swipebox-html.swipebox-touch {
3+
overflow: hidden !important;
4+
}
5+
16
#swipebox-overlay img {
27
border: none !important;
38
}
@@ -87,10 +92,11 @@
8792
bottom: -50px;
8893
}
8994
#swipebox-action.visible-bars {
90-
bottom: 0;
91-
}
92-
#swipebox-action.force-visible-bars {
93-
bottom: 0 !important;
95+
-webkit-transform: translateY(-50px);
96+
-moz-transform: translateY(-50px);
97+
-ms-transform: translateY(-50px);
98+
-o-transform: translateY(-50px);
99+
transform: translateY(-50px);
94100
}
95101
#swipebox-action #swipebox-prev,
96102
#swipebox-action #swipebox-next,
@@ -127,10 +133,11 @@
127133
text-align: center;
128134
}
129135
#swipebox-caption.visible-bars {
130-
top: 0;
131-
}
132-
#swipebox-caption.force-visible-bars {
133-
top: 0 !important;
136+
-webkit-transform: translateY(50px);
137+
-moz-transform: translateY(50px);
138+
-ms-transform: translateY(50px);
139+
-o-transform: translateY(50px);
140+
transform: translateY(50px);
134141
}
135142

136143
#swipebox-slider.rightSpring {

‎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: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
/**
2-
* Swipebox - A touchable jQuery lightbox
3-
*
4-
* @author Constantin Saguin - @brutaldesign
5-
* @link http://csag.co
6-
* @github http://github.com/brutaldesign/swipebox
7-
* @version 1.2.5
8-
* @license MIT License
9-
*/
1+
/*! Swipebox v1.2.6 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
102

113
;( function ( window, document, $, undefined ) {
124

@@ -27,8 +19,8 @@
2719
elements = [], // slides array [ { href:'...', title:'...' }, ...],
2820
selector = elem.selector,
2921
$selector = $( selector ),
30-
isTouch = document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
31-
supportSVG = !! ( window.SVGSVGElement ),
22+
isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
23+
supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', "svg").createSVGRect,
3224
winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
3325
winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
3426
/* jshint multistr: true */
@@ -103,7 +95,7 @@
10395
title: title
10496
} );
10597
} );
106-
98+
10799
index = $elem.index( $( this ) );
108100
event.preventDefault();
109101
event.stopPropagation();
@@ -148,7 +140,7 @@
148140
var $this = this;
149141

150142
$( 'body' ).append( html );
151-
143+
152144
if ( $this.doCssTrans() ) {
153145
$( '#swipebox-slider' ).css( {
154146
'-webkit-transition' : 'left 0.4s ease',
@@ -188,8 +180,13 @@
188180

189181
$this.setDim();
190182
$this.actions();
191-
$this.keyboard();
192-
$this.gesture();
183+
184+
if ( isMobile ) {
185+
$this.gesture();
186+
} else {
187+
$this.keyboard();
188+
}
189+
193190
$this.animBars();
194191
$this.resize();
195192

@@ -270,50 +267,49 @@
270267
* Touch navigation
271268
*/
272269
gesture : function () {
273-
if ( isTouch ) {
274-
var $this = this,
275-
distance = null,
276-
swipMinDistance = 10,
277-
startCoords = {},
278-
endCoords = {},
279-
bars = $( '#swipebox-caption, #swipebox-action' );
270+
271+
var $this = this,
272+
distance = null,
273+
swipMinDistance = 10,
274+
startCoords = {},
275+
endCoords = {};
276+
var bars = $( '#swipebox-caption, #swipebox-action' );
280277

281-
bars.addClass( 'visible-bars' );
282-
$this.setTimeout();
278+
bars.addClass( 'visible-bars' );
279+
$this.setTimeout();
283280

284-
$( 'body' ).bind( 'touchstart', function( event ) {
281+
$( 'body' ).bind( 'touchstart', function( event ) {
285282

286-
$( this ).addClass( 'touching' );
283+
$(this).addClass( 'touching' );
287284

288-
endCoords = event.originalEvent.targetTouches[0];
289-
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
285+
endCoords = event.originalEvent.targetTouches[0];
286+
startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
290287

291-
$( '.touching' ).bind( 'touchmove', function( event ) {
292-
event.preventDefault();
293-
event.stopPropagation();
294-
endCoords = e.originalEvent.targetTouches[0];
288+
$( '.touching' ).bind( 'touchmove',function( event ) {
289+
event.preventDefault();
290+
event.stopPropagation();
291+
endCoords = event.originalEvent.targetTouches[0];
295292

296-
} );
297-
293+
} );
294+
298295
return false;
299296

300-
} ).bind( 'touchend', function( event ) {
301-
297+
} ).bind( 'touchend',function( event ) {
302298
event.preventDefault();
303299
event.stopPropagation();
304300

305301
distance = endCoords.pageX - startCoords.pageX;
306-
302+
307303
if ( distance >= swipMinDistance ) {
308-
304+
309305
// swipeLeft
310306
$this.getPrev();
311-
312-
} else if ( distance <= - swipMinDistance ) {
313307

308+
} else if ( distance <= - swipMinDistance ) {
309+
314310
// swipeRight
315311
$this.getNext();
316-
312+
317313
} else {
318314
// tap
319315
if ( ! bars.hasClass( 'visible-bars' ) ) {
@@ -328,9 +324,8 @@
328324

329325
$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
330326

331-
} );
327+
} );
332328

333-
}
334329
},
335330

336331
/**
@@ -406,16 +401,20 @@
406401
}
407402
} );
408403

409-
$( '#swipebox-action' ).hover( function() {
404+
if ( ! isMobile ) {
405+
406+
$( '#swipebox-action' ).hover( function() {
410407
$this.showBars();
411-
bars.addClass( 'force-visible-bars' );
408+
bars.addClass( 'visible-bars' );
412409
$this.clearTimeout();
413410

414-
}, function() {
415-
bars.removeClass( 'force-visible-bars' );
416-
$this.setTimeout();
411+
}, function() {
412+
bars.removeClass( 'visible-bars' );
413+
$this.setTimeout();
417414

418-
} );
415+
} );
416+
417+
}
419418
},
420419

421420
/**
@@ -448,26 +447,30 @@
448447
*/
449448
actions : function () {
450449
var $this = this;
450+
451+
var action = isMobile ? 'touchend' : 'click';
451452

452453
if ( elements.length < 2 ) {
454+
453455
$( '#swipebox-prev, #swipebox-next' ).hide();
456+
454457
} else {
455-
$( '#swipebox-prev' ).bind( 'click touchend', function( event ) {
458+
$( '#swipebox-prev' ).bind( action, function( event ) {
456459
event.preventDefault();
457460
event.stopPropagation();
458461
$this.getPrev();
459462
$this.setTimeout();
460463
} );
461464

462-
$( '#swipebox-next' ).bind( 'click touchend', function( event ) {
465+
$( '#swipebox-next' ).bind( action, function( event ) {
463466
event.preventDefault();
464467
event.stopPropagation();
465468
$this.getNext();
466469
$this.setTimeout();
467470
} );
468471
}
469472

470-
$( '#swipebox-close' ).bind( 'click touchend', function() {
473+
$( '#swipebox-close' ).bind( action, function() {
471474
$this.closeSlide();
472475
} );
473476
},
@@ -508,6 +511,9 @@
508511
*/
509512
openSlide : function ( index ) {
510513
$( 'html' ).addClass( 'swipebox-html' );
514+
if ( isMobile ) {
515+
$( 'html' ).addClass( 'swipebox-touch' );
516+
}
511517
$( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
512518
this.setSlide( index, true );
513519
},
@@ -594,7 +600,7 @@
594600
var youtubeShortUrl = url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/);
595601
var vimeoUrl = url.match( /vimeo\.com\/([0-9]*)/ );
596602
if ( youtubeUrl || youtubeShortUrl) {
597-
if ( youtubeShortUrl ){
603+
if ( youtubeShortUrl ) {
598604
youtubeUrl = youtubeShortUrl;
599605
}
600606
iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '" frameborder="0" allowfullscreen></iframe>';
@@ -651,7 +657,7 @@
651657
this.setSlide( index );
652658
this.preloadMedia( index-1 );
653659
}
654-
else{
660+
else {
655661

656662
$( '#swipebox-slider' ).addClass( 'leftSpring' );
657663
setTimeout( function() {
@@ -664,7 +670,8 @@
664670
* Close
665671
*/
666672
closeSlide : function () {
667-
$( 'html' ).removeClass( 'swipebox' );
673+
$( 'html' ).removeClass( 'swipebox-html' );
674+
$( 'html' ).removeClass( 'swipebox-touch' );
668675
$( window ).trigger( 'resize' );
669676
this.destroy();
670677
},

0 commit comments

Comments
 (0)