Merge branch 'dev'

Author: Constantin

README.md

@@ -61,10 +61,11 @@ $( '.swipebox' ).swipebox();
 ```javascript
 useCSS : true, // false will force the use of jQuery for animations
 initialIndexOnArray: 0, // which image index to init when a array is passed
-hideBarsOnMobile : true, // false will show the caption and navbar on mobile devices
-hideBarsDelay : 3000, // 0 to always show caption and action bar
+hideCloseButtonOnMobile : false, // true will hide the close button on mobile devices
+hideBarsDelay : 3000, // delay before hiding bars on desktop
 videoMaxWidth : 1140, // videos max width
 beforeOpen: function(){} , // called before opening
+afterOpen: null, // called after opening
 afterClose: function(){}, // called after closing
 loopAtEnd: false // true will return to the first image after the last image is reached
 ```
@@ -73,4 +74,6 @@ loopAtEnd: false // true will return to the first image after the last image is
 
 I want to keep this plugin as simple as possible. I won't merge pull requests for additional features such as download buttons, social like buttons, IE8 compatibility etc... But feel free to fork the project and customize it to suit to your needs. Most wanted PR are for bug fixes. Also, a future improvement will be to allow zoom on touchable devices.
 
+If you want to submit a pull request please be sure to grunt the whole thing (mostly jshintrc validation and minified file) and send me a demo URL. Also, please comment your code.
+
 Thanks for your understanding and thank you all for your helpful support!

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "swipebox",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "main": "src/js/jquery.swipebox.js"
 }

demo/normalize.css

@@ -118,6 +118,8 @@ module.exports = function(grunt) {
 				files: ['../scss/*.scss', '../demo/scss/*.scss'],
 				tasks: [
 					'sass',
+					'autoprefixer',
+					'cssmin',
 					'notify:scss'
 				],
 			},

demo/style.css

@@ -1,6 +1,6 @@
 {
   "name": "grunt-swipebox",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "A touchable jQuery lightbox",
   "devDependencies": {
     "grunt": "~0.4.2",

grunt/gruntfile.js

@@ -13,7 +13,7 @@
 	<meta itemprop="name" content="Swipebox | A touchable jQuery lightbox">
 	<meta itemprop="image" content="http://swipebox.csag.co/images/swipe250.jpg">
 	<meta itemprop="description" content="Swipebox is a jQuery lightbox plugin for desktop, mobile and tablet">
-	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Noto+Serif:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
+	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Merriweather:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" href="demo/normalize.css">
 	<link rel="stylesheet" href="demo/bagpakk.min.css">
 	<link rel="stylesheet" href="demo/style.css">
@@ -219,11 +219,14 @@ <h3>Options</h3>
 	$( '.swipebox' ).swipebox( {
 		useCSS : true, <span>// false will force the use of jQuery for animations</span>
 		useSVG : true, <span>// false to force the use of png for buttons</span>
-		hideBarsOnMobile : true, <span>// false will show the caption and navbar on mobile devices</span>
-		hideBarsDelay : 3000, <span>// delay before hiding bars</span>
+		initialIndexOnArray : 0, <span>// which image index to init when a array is passed</span>
+		hideCloseButtonOnMobile : false, <span>// true will hide the close button on mobile devices</span>
+		hideBarsDelay : 3000, <span>// delay before hiding bars on desktop</span>
 		videoMaxWidth : 1140, <span>// videos max width</span>
 		beforeOpen: function() {}, <span>// called before opening</span>
+		afterOpen: null, <span>// called after opening</span>
 		afterClose: function() {} <span>// called after closing</span>
+		loopAtEnd: false <span>// true will return to the first image after the last image is reached</span>
 	} );
 
 } )( jQuery );

grunt/package.json

@@ -35,7 +35,14 @@ html.swipebox-html.swipebox-touch {
 	user-select: none;
 }
 
+#swipebox-container{
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
 #swipebox-slider {
+	transition : transform 0.4s ease;
 	height: 100%;
 	left: 0;
 	top: 0;
@@ -78,9 +85,6 @@ html.swipebox-html.swipebox-touch {
 			width: 100%;
 			padding:5%;
 			box-sizing: border-box;
-			-webkit-box-sizing: border-box;
-			-moz-box-sizing: border-box;
-
 			.swipebox-video{
 				width: 100%;
 				height: 0;
@@ -103,121 +107,175 @@ html.swipebox-html.swipebox-touch {
 
 }
 
-#swipebox-action,
-#swipebox-caption{
+#swipebox-bottom-bar,
+#swipebox-top-bar{
+	transition : 0.5s;
 	position: absolute;
 	left: 0;
 	z-index: 999;
 	height: 50px;
 	width: 100%;
 }
 
-#swipebox-action {
+#swipebox-bottom-bar {
 	bottom: -50px;
 
 	&.visible-bars {
-		-moz-transform: translateY(-50px);
-		-ms-transform: translateY(-50px);
-		-webkit-transform: translateY(-50px);
-		transform: translateY(-50px);
+		transform: translate3d(0,-50px,0);
 	}
+}
 
-	#swipebox-prev, 
-	#swipebox-next, 
-	#swipebox-close {
-		background-image: url(../img/icons.png);
-		background-repeat: no-repeat;
-		border: none!important;
-		text-decoration: none!important;
-		cursor: pointer;
-		position: absolute;
-		width: 50px;
-		height: 50px;
-		top: 0;
+#swipebox-top-bar {
+	top: -50px;
+	
+	&.visible-bars {
+		transform: translate3d(0,50px,0);
 	}
+}
 
-	#swipebox-prev{
-		background-position: -32px 13px;
-		right: 100px;
-	}
+#swipebox-title{
+	display:block;
+	width: 100%;
+	text-align: center;
+}
+
+#swipebox-prev, 
+#swipebox-next, 
+#swipebox-close {
+	background-image: url(../img/icons.png);
+	background-repeat: no-repeat;
+	border: none!important;
+	text-decoration: none!important;
+	cursor: pointer;
+	//position: absolute;
+	width: 50px;
+	height: 50px;
+	top: 0;
+}
+
+#swipebox-arrows{
+	display: block;
+	margin: 0 auto;
+	width: 100%;
+	height: 50px;
+}
+
+#swipebox-prev{
+	background-position: -32px 13px;
+	float: left;
+}
+
+#swipebox-next{
+	background-position: -78px 13px;
+	float: right;
+}
 
-	#swipebox-next{
-		background-position: -78px 13px;
-		right: 40px;
+#swipebox-close{
+	top: 0;
+	right: 0;
+	position: absolute;
+	z-index: 9999;
+	background-position: 15px 12px;
+}
+
+.swipebox-no-close-button #swipebox-close{
+	display: none;
+}
+
+#swipebox-prev,
+#swipebox-next{
+	&.disabled{
+		opacity: 0.3;
 	}
+}
 
-	#swipebox-close{
-		background-position: 15px 12px;
-		left: 40px;
+.swipebox-no-touch{
+	#swipebox-overlay.rightSpring #swipebox-slider {
+		animation : rightSpring 0.3s;
 	}
 
-	#swipebox-prev,
-	#swipebox-next{
-		&.disabled{
-			opacity: 0.3;
-		}
+	#swipebox-overlay.leftSpring  #swipebox-slider{
+		animation : leftSpring 0.3s;
 	}
 }
 
-#swipebox-caption {
-	top: -50px;
-	text-align: center;
-	
-	&.visible-bars {
-		-moz-transform: translateY(50px);
-		-ms-transform: translateY(50px);
-		-webkit-transform: translateY(50px);
-		transform: translateY(50px);
+.swipebox-touch{
+	#swipebox-container {
+		&:before,
+		&:after{
+			backface-visibility:hidden;
+			transition : all .3s ease;
+			content : ' ';
+			position: absolute;
+			z-index: 999;
+			top: 0;
+			height: 100%;
+			width: 20px;
+			opacity: 0;
+		}
+
+		&:before{
+			left: 0;
+			box-shadow: inset 10px 0px 10px -8px #656565;
+		}
+
+		&:after{
+			right: 0;
+			box-shadow: inset -10px 0px 10px -8px #656565;
+		}
 	}
-}
 
-#swipebox-slider.rightSpring {
-	animation : rightSpring 0.3s;
-}
+	#swipebox-overlay.leftSpringTouch #swipebox-container{
+		&:before{
+			opacity: 1;
+		}
+	}
 
-#swipebox-slider.leftSpring {
-	animation : leftSpring 0.3s;
+		
+	#swipebox-overlay.rightSpringTouch #swipebox-container{
+		&:after{
+			opacity: 1;
+		}
+	}
 }
 
 @keyframes rightSpring {
 	0% {
-		margin-left: 0px;
+		left:0;
 	}
 
 	50% {
-		margin-left: -30px;
+		left:-30px;
 	}
 
 	100% {
-		margin-left: 0px;
+		left:0;
 	}
 }
 
 @keyframes leftSpring {
 	0% {
-		margin-left: 0px;
+		left:0;
 	}
 
 	50% {
-		margin-left: 30px;
+		left:30px;
 	}
 
 	100% {
-		margin-left: 0px;
+		left:0;
 	}
 }
 
-@media screen and (max-width: 800px) {
-	#swipebox-action #swipebox-close {
-		left: 0;
-	}
+@media screen and (min-width: 800px) {
 
-	#swipebox-action #swipebox-prev {
-		right: 60px;
+	#swipebox-close{
+		right: 10px;
 	}
 
-	#swipebox-action #swipebox-next {
-		right: 0;
+	#swipebox-arrows{
+		width: 92%;
+		max-width: 800px;
 	}
 }
 
@@ -227,19 +285,20 @@ html.swipebox-html.swipebox-touch {
 	background: #0d0d0d;
 }
 
-#swipebox-action,
-#swipebox-caption {
+#swipebox-bottom-bar,
+#swipebox-top-bar {
 	text-shadow: 1px 1px 1px black;
-	@include bar(#0d0d0d);
+	background: #000;
+	//@include bar(#0d0d0d);
 	opacity: 0.95;
 }
 
-#swipebox-action {
-	border-top: 1px solid rgba(255, 255, 255, 0.2);
+#swipebox-bottom-bar {
+	//border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-#swipebox-caption {
-	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+#swipebox-top-bar {
+	//border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 	color: white!important;
 	font-size: 15px;
 	line-height: 43px;