Add image repositioning feature

script/lightbox.js

@@ -114,7 +114,38 @@
     // on the page below.
     //
     // Github issue: https://github.com/lokesh/lightbox2/issues/663
-    $('<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div><div id="lightbox" tabindex="-1" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""/><div class="lb-nav"><a class="lb-prev" aria-label="Previous image" href="" ></a><a class="lb-next" aria-label="Next image" href="" ></a></div><div class="lb-loader"><a class="lb-cancel" href="#"></a></div></div></div><div class="lb-dataContainer desktop"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
+    $('\
+		<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>\
+		<div id="lightbox" tabindex="-1" class="lightbox">\
+			<div class="lb-outerContainer">\
+				<div class="lb-container">\
+					<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />\
+					<div class="lb-nav">\
+						<div class="lb-prev-area">\
+							<a class="lb-prev" aria-label="Previous image" href="" ></a>\
+						</div>\
+						<div class="lb-next-area">\
+							<a class="lb-next" aria-label="Next image" href="" ></a>\
+						</div>\
+					</div>\
+				<div class="lb-loader">\
+					<a class="lb-cancel" href="#"></a>\
+				</div>\
+			</div>\
+		</div>\
+		<div class="lb-dataContainer desktop">\
+			<div class="lb-data">\
+				<div class="lb-details">\
+					<span class="lb-caption"></span>\
+					<span class="lb-number"></span>\
+				</div>\
+				<div class="lb-closeContainer">\
+					<a class="lb-close"></a>\
+				</div>\
+			</div>\
+		</div>\
+	').appendTo($('body'));
+
 
     // Cache jQuery objects
     this.$lightbox       = $('#lightbox');
@@ -234,6 +265,7 @@
     this.sizeOverlay();
 
     //ADDED-START
+	//Manage Zoom Event
     this.$nav.mousewheel((e) => {
     	var asImg = self.album[this.currentImageIndex];
     	if(!asImg.type != 'video') {
@@ -257,6 +289,42 @@
             this.$image.css('--translate-y', fTransY+'px');
     	}
     });
+
+	//Manage Repositioning Event	
+	this.$nav.on('mousedown', (e)=>{
+		if(this.$image.css('--scale') > 1) {
+			//The following block gets the X/Y offset (the difference between where it starts and where it was clicked)
+			this.gMouseDownOffsetX = e.clientX - parseFloat(this.$image.css('--translate-x') || 0);
+			this.gMouseDownOffsetY = e.clientY - parseFloat(this.$image.css('--translate-y') || 0);
+
+			//Change cursor
+			this.$container.addClass('moving');
+
+			$window.on('mousemove', divMove);
+		}
+	});
+
+	$window.on('mouseup', ()=>{
+		$window.off('mousemove', divMove);
+		this.$container.removeClass('moving');
+	});
+
+	function divMove(e){
+		//var oImage = self.album[self.currentImageIndex];
+		let iZoom = self.$image.css('--scale');
+
+		let fTransX = e.clientX - self.gMouseDownOffsetX;
+		let fTransY = e.clientY - self.gMouseDownOffsetY;
+
+		var fTransMaxX = (iZoom - 1) * self.$image.width() / 2;
+		var fTransMaxY = (iZoom - 1) * self.$image.height() / 2;
+
+		fTransX = Math.max(Math.min(fTransX, fTransMaxX), fTransMaxX * -1);
+		fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
+
+		self.$image.css('--translate-x', fTransX + 'px');
+		self.$image.css('--translate-y', fTransY + 'px');
+	}
     //ADDED-END
 
     this.album = [];

style/_lightbox.scss

@@ -101,6 +101,10 @@
 		.lb-container {
 			overflow: hidden;
 		
+			&.moving {
+				cursor: grab;
+			}
+
 			.lb-image {
 				image-orientation: from-image;
 				border-radius: 0;
@@ -124,29 +128,54 @@
 			}
 			
 			.lb-nav {
+
+				.lb-prev-area, .lb-next-area {
+					position: absolute;
+					top: 0;
+					height: 100%;
+					width: 50%;
+					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+					
+					&.lb-next-area {
+						right: 0;
+					}
+
+					&:hover a.lb-prev, &:hover a.lb-next {
+						filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+						opacity: 1;
+					}
+				}
+
 				a.lb-prev, a.lb-next {
 					color: white;
 					text-decoration: none;
 					text-shadow: 0px 1px 1px rgba(0,0,0,0.8);
+					width: 150px;
+					height: 150px;
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+
+					-webkit-transition: opacity 0.4s;
+					-moz-transition: opacity 0.4s;
+					-o-transition: opacity 0.4s;
+					transition: opacity 0.4s;
 					
 					&:before {
 						position: absolute;
-						top: calc(50% - 1em);
+						top: 50%;
+						transform: translateY(-50%);
 					}
 				}
 			
 				a.lb-prev {
 					@include lightbox-icon(prev);
-					&:before {
+					left: 0;
-						left: 2em;
-					}
 				}
 			
 				a.lb-next {
 					@include lightbox-icon(next);
-					&:before {
+					right: 0;
-						right: 2em;
-					}
 				}
 			}
 		}

style/_mobile.scss

@@ -63,6 +63,21 @@
 			text-align: center;
 		}
 	}
+
+	.lightbox .lb-outerContainer .lb-container .lb-nav {
+		a.lb-prev, a.lb-next  {
+			height: 100%;
+			width: 100%;
+		}
+
+		a.lb-prev::before {
+			left: 1em;
+		}
+
+		a.lb-next::before {
+			right: 1em;
+		}
+	} 
 }
 
 @media only screen and (min-width: 801px) {