Added current index indicator/counter

andreknieriem · Aug 16, 2015 · c7d5651 · c7d5651
1 parent 90038f1
commit c7d5651
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ var lightbox = $('.gallery a').simpleLightbox(options);
 | captionsData | title | string | get the caption from title or data-title attribute |
 | close | true | bool | show the close button or not |
 | closeText | 'X' | string | text or html for the close button |
+| showCounter | true | bool | show current image index or not |
 | fileExt | 'png&#124;jpg&#124;jpeg&#124;gif' | regexp | list of fileextensions the plugin works with | 
 | animationSpeed | 250 | int | how long takes the slide animation |
 | preloading | true | bool | allows preloading next und previous images |
@@ -65,6 +66,7 @@ var gallery = $('.gallery a').simpleLightbox();
 gallery.next(); // Next Image
 ```
 ### Changelog
+**1.3.0 - Added current index indicator/counter**  
 **1.2.0 - Added option for captions attribute (title or data-title)**  
 **1.1.2 - Bugfix for looping images**  
 **1.1.1 - Bugfix for loading indicator and removed a log-event**  

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "simplelightbox",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "homepage": "http://andreknieriem.de/simple-lightbox",
   "authors": [
     "André Knieriem <info@andreknieriem.de> (http://andreknieriem.de)"

diff --git a/dist/simple-lightbox.js b/dist/simple-lightbox.js
@@ -1,6 +1,6 @@
 
 /*
-	By Andre Knieriem, www.andreknieriem.de
+	By André Knieriem, www.andreknieriem.de
 	Available for use under the MIT License
 */
 
@@ -17,9 +17,9 @@ $.fn.simpleLightbox = function( options )
 		nav:			true,
 		navText:		['&larr;','&rarr;'],
 		captions:		true,
-		captionsData:	'title',
 		close:			true,
 		closeText:		'X',
+		showCounter:	true,
 	 	fileExt:		'png|jpg|jpeg|gif',
 	 	animationSpeed:	250,
 	 	preloading:		true,
@@ -72,6 +72,7 @@ $.fn.simpleLightbox = function( options )
 		closeBtn = $('<button>').addClass('sl-close').html(options.closeText),
 		spinner = $('<div>').addClass('sl-spinner').html('<div></div>'),
 		nav = $('<div>').addClass('sl-navigation').html('<button class="sl-prev">'+options.navText[0]+'</button><button class="sl-next">'+options.navText[1]+'</button>'),
+		counter = $('<div>').addClass('sl-counter').html('<span class="sl-current"></span>/<span class="sl-total"></span>'),
 		animating = false,
 		index = 0,
 		image = $(),
@@ -87,6 +88,13 @@ $.fn.simpleLightbox = function( options )
 	        	.appendTo('body');
 	        image = $('.sl-image');
 	        if(options.close) closeBtn.appendTo($('.sl-wrapper'));
+	        if(options.showCounter){
+	        	if($(selector).length > 1){
+	        		counter.appendTo($('.sl-wrapper'));
+	        		$('.sl-wrapper .sl-counter .sl-total').text($(selector).length);
+	        	}
+
+	        }
 	        if(options.nav) nav.appendTo($('.sl-wrapper'));
 	        if(options.spinner) spinner.appendTo($('.sl-wrapper'));
 		},
@@ -103,6 +111,8 @@ $.fn.simpleLightbox = function( options )
         	$('.sl-close').fadeIn('fast');
         	spinner.show();
         	nav.fadeIn('fast');
+        	$('.sl-wrapper .sl-counter .sl-current').text(index +1);
+        	counter.fadeIn('fast');
         	adjustImage();
         	if(options.preloading){
 		    	preload();
@@ -139,7 +149,7 @@ $.fn.simpleLightbox = function( options )
 				.fadeIn('fast');
 				opened = true;
 
-				var captionText = (options.captionsData == 'title') ? $(selector).eq(index).find('img').prop('title') : $(selector).eq(index).find('img').data('title');
+				var captionText = $(selector).eq(index).find('img').prop('title');
 				if(dir == 1 || dir == -1){
 					var css = { 'opacity': 1.0 };
 					if( canTransisions ) {
@@ -162,7 +172,7 @@ $.fn.simpleLightbox = function( options )
 		},
 		setCaption = function(captiontext){
 			if(captiontext != '' && options.captions){
-				caption.html(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast');
+				caption.text(captiontext).hide().appendTo($('.sl-image')).fadeIn('fast');
 			}
 		},
 		slide = function(speed, pos){
@@ -184,6 +194,7 @@ $.fn.simpleLightbox = function( options )
 			if(animating || (newIndex < 0 || newIndex >= $(selector).length) && options.loop == false ) return;
 			animating = true;
 			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';
@@ -203,7 +214,7 @@ $.fn.simpleLightbox = function( options )
 			var elem = $(selector).eq(index), 
 				triggered = false;
 			elem.trigger($.Event('close.simplelightbox'));
-		    $('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption').fadeOut('fast', function(){
+		    $('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter').fadeOut('fast', function(){
 		    	if(!triggered) elem.trigger($.Event('closed.simplelightbox'));
 		    	triggered = true;
 		    });

diff --git a/dist/simple-lightbox.min.js b/dist/simple-lightbox.min.js
diff --git a/dist/simplelightbox.css b/dist/simplelightbox.css
@@ -36,11 +36,19 @@
   z-index: 15;
 }
 /* line 33, ../sass/simplelightbox.scss */
+.sl-wrapper .sl-counter {
+  display: none;
+  position: fixed;
+  top: 30px;
+  left: 30px;
+  z-index: 15;
+}
+/* line 41, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-navigation {
   width: 100%;
   display: none;
 }
-/* line 36, ../sass/simplelightbox.scss */
+/* line 44, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-navigation button {
   position: fixed;
   top: 50%;
@@ -52,28 +60,28 @@
   display: block;
   z-index: 15;
 }
-/* line 46, ../sass/simplelightbox.scss */
+/* line 54, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-navigation button.sl-next {
   right: 40px;
 }
-/* line 50, ../sass/simplelightbox.scss */
+/* line 58, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-navigation button.sl-prev {
   left: 40px;
 }
-/* line 56, ../sass/simplelightbox.scss */
+/* line 64, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-image {
   position: fixed;
   -ms-touch-action: none;
   touch-action: none;
   z-index: 10000;
 }
-/* line 61, ../sass/simplelightbox.scss */
+/* line 69, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-image img {
   margin: 0;
   padding: 0;
   display: block;
 }
-/* line 66, ../sass/simplelightbox.scss */
+/* line 74, ../sass/simplelightbox.scss */
 .sl-wrapper .sl-image .sl-caption {
   display: none;
   padding: 10px;
@@ -85,8 +93,17 @@
   left: 0;
   right: 0;
 }
+/* line 86, ../sass/simplelightbox.scss */
+.sl-wrapper .sl-image .sl-download {
+  display: none;
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  color: #fff;
+  z-index: 5;
+}
 
-/* line 80, ../sass/simplelightbox.scss */
+/* line 97, ../sass/simplelightbox.scss */
 .sl-spinner {
   display: none;
   border: 5px solid #333;