Sizing bug fixes, image extensions option

.gitignore

@@ -1,2 +1,6 @@
 demo/images/Thumbs.db
-.vscode
+.vscode
+node_modules/
+package-lock.json
+package.json
+gulpfile.js

README.md

@@ -68,6 +68,7 @@ $(function(){
 		,closeOnSideClick: true
 		,nextOnContentClick: false
 		,useGestures: true
+		,imageExt: ['png','jpg','jpeg','webp','gif'] //to determine if a target url is an image file
 	});
 });
 ```

demo/index.html

@@ -186,9 +186,9 @@ <h2>Custom events</h2>
 			<span class="text-muted">© 2018 Pavel Khoroshkov &nbsp; <a href="http://pgood.space/">pgood.space</a></span>
 		</div>
 	</footer>
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 	<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
 	<script src="../jquery.viewbox.min.js"></script>
 	<script>

jquery.viewbox.js

@@ -23,6 +23,7 @@
 		,closeOnSideClick: true
 		,nextOnContentClick: false
 		,useGestures: true
+		,imageExt: ['png','jpg','jpeg','webp','gif']
 	},options);
 
 	var $links = $(this)
@@ -107,10 +108,15 @@
 		var $body = get('body')
 			,$content = get('content')
 			,$header = get('header')
+			,$footer = get('footer')
 			,w,h;
 		if(width){
 			$content.width(width);
 			$header.width(width);
+			$footer.width(width);
+		}else if(!state){
+			$header.width(1);
+			$footer.width(1);
 		}
 		if(height)
 			$content.height(height);
@@ -154,8 +160,8 @@
 	};
 
 	function isImage(href){
-		if(href)
-			return href.match(/(png|jpg|jpeg|gif)(\?.*)?$/i);
+		if(href && $.isArray(options.imageExt) && options.imageExt.length)
+			return href.match(new RegExp('('+options.imageExt.join('|')+')(\\?.*)?$','i'));
 	};
 
 	function isAnchor(href){
@@ -207,36 +213,41 @@
 		}
 	};
 
-	function showImage(href,caption){
+	function showImage(href,caption,footer){
 		var $img = $('<img class="viewbox-image" alt="">').attr('src',href);
 		if(!isImageLoaded($img))
 			loader(true);
+		set('header',caption);
 		set('content','');
-		set('header','');
-		openWindow();
+		set('footer',footer);
 		var $body = get('body')
 			,counter = 0
 			,$content = get('content')
 			,$header = get('header')
-			,timerId = window.setInterval(function(){
+			,$footer = get('footer')
+			,hasHeader = Boolean(jQuery.type(caption) === 'string' && caption.length)
+			,hasFooter = Boolean(jQuery.type(footer) === 'string' && footer.length);
+		$header.toggle(hasHeader);
+		$footer.toggle(hasFooter);
+		openWindow();
+		var timerId = window.setInterval(function(){
 				if(!isImageLoaded($img) && counter < 1000){
 					counter++;
 					return;
 				};
-
 				window.clearInterval(timerId);
 				loader(false);
-
 				$('body').append($img);
 
-				$header.hide();
-
 				var wOffset = $body.width() - $content.width() + options.margin*2
 					,hOffset = $body.height() - $content.height() + options.margin*2
+					,headerHeight = hasHeader ? $header.outerHeight(): 0
+					,footerHeight = hasFooter ? $footer.outerHeight() : 0
 					,windowWidth = $(window).width() - wOffset
-					,windowHeight = $(window).height() - hOffset
+					,windowHeight = $(window).height() - hOffset - headerHeight - footerHeight
 					,w = $img.width()
 					,h = $img.height();
+
 				$img.detach();
 
 				if(w > windowWidth){
@@ -248,20 +259,22 @@
 					h = windowHeight;
 				};
 				locked = true;
+				$header.add($footer).animate(
+					{width: w}
+					,options.resizeDuration
+				);
+				$content.animate(
+					{width: w,height: h}
+					,options.resizeDuration
+				);
 				$body.animate(
 					{
 						'margin-left': -(w + wOffset)/2 + options.margin
 						,'margin-top': -(h + hOffset)/2 + options.margin
 					}
 					,options.resizeDuration
-				);
-				$content.animate(
-					{width: w,height: h}
-					,options.resizeDuration
 					,function(){
 						$content.append($img);
-						$header.show().width(w);
-						set('header',caption);
 						locked = false;
 					}
 				);
@@ -339,7 +352,7 @@
 			else
 				$fullScreenBtn.hide();
 		});
-	}
+	};
 
 	if(options.closeOnSideClick){
 		$container.click(function(){

viewbox.css

@@ -8,6 +8,8 @@
 	z-index: 700;
 }
 .viewbox-body{
+	display: flex;
+	flex-direction: column;
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -21,15 +23,25 @@
 	overflow: auto;
 }
 .viewbox-header{
-	margin: 10px;
+	padding: 10px 0 0;
+	margin: 0 10px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
 }
 .viewbox-content{
 	margin: 10px;
 	width: 300px;
 	height: 300px;
 }
 .viewbox-footer{
-	margin: 10px;
+	padding: 0 0 10px;
+	margin: 0 10px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 100%;
 }
 .viewbox-content .viewbox-image{
 	width: 100%;