new lightbox interface v1

masks/project.html

@@ -87,9 +87,10 @@ function initPage(asHash) {
 		//Lightbox options
 		lightbox.option({
 			alwaysShowNavOnTouchDevices: true,
-			albumLabel: oSpot.lang('media_count', ['%1', '%2']),
+			albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',/*oSpot.lang('media_count', ['%1', '%2']),*/
 			fadeDuration: 300,
 			imageFadeDuration: 400,
+			positionFromTop: 0,
 			resizeDuration: 600,
 			hasVideo: true
 		});
@@ -509,14 +510,14 @@ function getPost(asPost) {
 			break;
 		case 'media':
 			var bVideo = (asPost.subtype == 'video');
-			var sTakenOn = (asPost.taken_on == '0000-00-00 00:00:00')?'':(' '+oSpot.lang('and')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', [asPost.taken_on_formatted+self.tmp('site_tz_notice')]));
+			var sTakenOn = (asPost.taken_on != '0000-00-00 00:00:00')?'<br /><br /><i class="fa fa-'+asPost.subtype+'-shot fa-lg fa-fw push"></i>'+asPost.taken_on_formatted+self.tmp('site_tz_notice'):'';
 			var $Image = $('<img>', {'src': asPost.thumb_path, title: oSpot.lang(bVideo?'click_watch':'click_zoom')});
 			$Body = $('<a>', {
 				'class': 'drill',
 				href: asPost.media_path,
 				'data-video': (bVideo?'true':'false'),
 				'data-lightbox': 'post-medias',
-				'data-title': oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang('add_on', [sAbsTime+sTakenOn]), 'data-orientation': asPost.rotate
+				'data-title': '<i class="fa fa-upload fa-lg fa-fw push"></i>'+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
 			}).append($Image).append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
 			break;
 		case 'post':

script/lightbox.js

@@ -275,13 +275,15 @@
 
 	
     // Position Lightbox
-    var top  = $window.scrollTop() + this.options.positionFromTop;
+    //ADDED-START
-    var left = $window.scrollLeft();
+    //var top  = $window.scrollTop() + this.options.positionFromTop;
-    this.$lightbox.css({
+    //var left = $window.scrollLeft();
+    this.$lightbox/*.css({
       top: top + 'px',
       left: left + 'px'
-    }).fadeIn(this.options.fadeDuration);
+    })*/.fadeIn(this.options.fadeDuration);
-
+    //ADDED-END
+    
     // Disable scrolling of the page while open
     if (this.options.disableScrolling) {
       $('body').addClass('lb-disable-scrolling');
@@ -398,9 +400,13 @@
 
       // Calculate the max image dimensions for the current viewport.
       // Take into account the border around the image and an additional 10px gutter on each side.
-      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+      //ADDED-START
-      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
+      //maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
-
+      //maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
+      maxImageWidth  = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - self.$lightbox.find('.lb-dataContainer').outerWidth();
+      maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop;
+      //ADDED-END
+      
       /*
       SVGs that don't have width and height attributes specified are reporting width and height
       values of 0 in Firefox 47 and IE11 on Windows. To fix, we set the width and height to the max
@@ -496,7 +502,10 @@
     //ADDED-END
     
     function postResize() {
-      self.$lightbox.find('.lb-dataContainer').width(newWidth);
+      //ADDED-START
+      //self.$lightbox.find('.lb-dataContainer').width(newWidth);
+      self.$lightbox.height(newHeight);
+      //ADDED-END
       self.$lightbox.find('.lb-prevLink').height(newHeight);
       self.$lightbox.find('.lb-nextLink').height(newHeight);
 
@@ -589,7 +598,10 @@
 
     if (this.album.length > 1 && this.options.showImageNumberLabel) {
       var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
-      this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
+      //ADDED-START
+      //this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
+      this.$lightbox.find('.lb-number').empty().append(labelText).fadeIn('fast');
+      //ADDED-END
     } else {
       this.$lightbox.find('.lb-number').hide();
     }

script/spot.js

@@ -96,8 +96,9 @@ function Spot(asGlobals)
 	};
 	
 	this.lang = function(sKey, asParams) {
-		asParams = asParams || [];
+		var sParamType = $.type(asParams);
-		if($.type(asParams) != 'array') asParams = [asParams];
+		if(sParamType == 'undefined') asParams = [];
+		else if($.type(asParams) != 'array') asParams = [asParams];
 		var sLang = '';
 		
 		if(sKey in self.consts.lang) {

style/_fa.scss

@@ -43,7 +43,7 @@ $fa-css-prefix: fa;
 
 /* Feed */
 .#{$fa-css-prefix}-post:before { content: fa-content($fa-var-comment); }
-.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-camera-alt); }
+.#{$fa-css-prefix}-media:before { content: fa-content($fa-var-photo-video); }
 .#{$fa-css-prefix}-message:before { content: fa-content($fa-var-map-marker); }
 .#{$fa-css-prefix}-message-in:before { content: fa-content($fa-var-shoe-prints); }
 .#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
@@ -51,6 +51,9 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
 .#{$fa-css-prefix}-drill-picture:before { content: fa-content($fa-var-search); }
 .#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
+.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
+.#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
+.#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
 
 /* Feed - Poster */
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }