Add support for fading between photos, Bugfix for single image naviga…

…tion, option for caption delay

README.md

@@ -28,11 +28,13 @@ var lightbox = $('.gallery a').simpleLightbox(options);
 | captionType | 'attr' | string | how to get the caption. You can choose between attr, data or text |
 | captionsData | title | string | get the caption from given attribute |
 | captionPosition | 'bottom' | string | the position of the caption. Options are top, bottom or outside (note that outside can be outside the visible viewport!) |
+| captionDelay | 0 | int | adds a delay before the caption shows (in ms) |
 | close | true | bool | show the close button or not |
 | closeText | '×' | string | text or html for the close button |
 | showCounter | true | bool | show current image index or not |
 | fileExt | 'png|jpg|jpeg|gif' | regexp or false | list of fileextensions the plugin works with or false for disable the check | 
 | animationSpeed | 250 | int | how long takes the slide animation |
+| animationSlide | true | bool | weather to slide in new photos or not, disable to fade |
 | preloading | true | bool | allows preloading next und previous images |
 | enableKeyboard | true | bool | allow keyboard arrow navigation and close with ESC key |
 | loop | true | bool | enables looping through images |
@@ -83,6 +85,7 @@ var lightbox2 = $('.lighbox-2 a').simpleLightbox();
 ```
 
 ### Changelog
+**1.7.0 - Add support for fading between photos, Bugfix for single image navigation, option for caption delay**  
 **1.6.0 - Option for caption position. Disable prev or next arrow if loop is false and position is first or last.**  
 **1.5.1 - Bugfix for multiple lightboxes on one page**  
 **1.5.0 - Added options for disabling rightclick and scrolling, changed default prev- and next-button text**  

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "homepage": "http://andreknieriem.de/simple-lightbox",
   "authors": [
     "André Rinas <[email protected]> (http://andreknieriem.de)"

dist/simple-lightbox.js

@@ -17,6 +17,7 @@ $.fn.simpleLightbox = function( options )
 		nav:				true,
 		navText:			['‹','›'],
 		captions:			true,
+		captionDelay:		0,
 		captionSelector:	'img',
 		captionType:		'attr',
 		captionsData:		'title',
@@ -25,6 +26,7 @@ $.fn.simpleLightbox = function( options )
 		closeText:			'×',
 		showCounter:		true,
 	 	fileExt:			'png|jpg|jpeg|gif',
+	 	animationSlide:		true,
 	 	animationSpeed:		250,
 	 	preloading:			true,
 	 	enableKeyboard:		true,
@@ -167,15 +169,20 @@ $.fn.simpleLightbox = function( options )
 					if(index > 0 && index < $(selector).length -1){ $('.sl-prev, .sl-next').show(); }
 				}
 
+				if($(selector).length == 1) $('.sl-prev, .sl-next').hide();
+
 				if(dir == 1 || dir == -1){
 					var css = { 'opacity': 1.0 };
-					if( canTransisions ) {
-						slide(0, 100 * dir + 'px');
-						setTimeout( function(){ slide( options.animationSpeed / 1000, 0 + 'px'), 50 });
-					}
-					else {
-						css.left = parseInt( $('.sl-image').css( 'left' ) ) + 100 * dir + 'px';
+					if( options.animationSlide ) {
+						if( canTransisions ) {
+							slide(0, 100 * dir + 'px');
+							setTimeout( function(){ slide( options.animationSpeed / 1000, 0 + 'px'), 50 });
+						}
+						else {
+							css.left = parseInt( $('.sl-image').css( 'left' ) ) + 100 * dir + 'px';
+						}
 					}
+
 					$('.sl-image').animate( css, options.animationSpeed, function(){
 						animating = false;
 						setCaption(captionText);
@@ -189,7 +196,7 @@ $.fn.simpleLightbox = function( options )
 		},
 		setCaption = function(captiontext){
 			if(captiontext != '' && typeof captiontext !== "undefined" && options.captions){
-				caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast');
+				caption.html(captiontext).hide().appendTo($('.sl-image')).delay(options.captionDelay).fadeIn('fast');
 			}
 		},
 		slide = function(speed, pos){
@@ -212,8 +219,10 @@ $.fn.simpleLightbox = function( options )
 			index = (newIndex < 0) ? $(selector).length -1: (newIndex > $(selector).length -1) ? 0 : newIndex;
 			$('.sl-wrapper .sl-counter .sl-current').text(index +1);
       	var css = { 'opacity': 0 };
-			if( canTransisions ) slide(options.animationSpeed / 1000, ( -100 * dir ) - swipeDiff + 'px');
-			else css.left = parseInt( $('.sl-image').css( 'left' ) ) + -100 * dir + 'px';
+			if( options.animationSlide ) {
+			  if( canTransisions ) slide(options.animationSpeed / 1000, ( -100 * dir ) - swipeDiff + 'px');
+			  else css.left = parseInt( $('.sl-image').css( 'left' ) ) + -100 * dir + 'px';
+			}
 			$('.sl-image').animate( css, options.animationSpeed, function(){
 				setTimeout( function(){
 					// fadeout old image
@@ -348,8 +357,10 @@ $.fn.simpleLightbox = function( options )
 		e.preventDefault();
 		swipeEnd = e.originalEvent.pageX || e.originalEvent.touches[ 0 ].pageX;
 		swipeDiff = swipeStart - swipeEnd;
-		if( canTransisions ) slide( 0, -swipeDiff + 'px' );
-		else image.css( 'left', imageLeft - swipeDiff + 'px' );
+		if( options.animationSlide ) {
+		  if( canTransisions ) slide( 0, -swipeDiff + 'px' );
+		  else image.css( 'left', imageLeft - swipeDiff + 'px' );
+		}
 	})
 	.on( 'touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel',function(e)
 	{
@@ -358,7 +369,7 @@ $.fn.simpleLightbox = function( options )
 			if( Math.abs( swipeDiff ) > options.swipeTolerance ) {
 				loadImage( swipeDiff > 0 ? 1 : -1 );	
 			}
-			else
+			else if( options.animationSlide )
 			{
 				if( canTransisions ) slide( options.animationSpeed / 1000, 0 + 'px' );
 				else image.animate({ 'left': imageLeft + 'px' }, options.animationSpeed / 2 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Touch-friendly image lightbox for mobile and desktop with jQuery",
   "main": "dist/simple-lightbox.js",
   "repository": {