https://somersetnlv.org/apps/js/photo_viewer/photo_viewer_20171101.js

1/* 
2	Depends on DialogBoxes 
3*/ 
4var PhotoViewer = {
5	show : function(imageSource, captionText, defaultWidth, maxWidth) {
6		// Close the current dialog
7		if(DialogBoxes.IsDialogOpen) {
8			DialogBoxes.hide();
9		}
10		
11		var imageContainer = document.getElementById("PV_imageContainer");
12		if(!imageContainer) {
13			imageContainer = document.createElement("div");
14			imageContainer.setAttribute("id", "PV_imageContainer");
15			imageContainer.setAttribute("style", "display: none;")
16			document.body.appendChild(imageContainer);
17		}
18		
19		var imageDiv = document.getElementById("PV_imageDiv");
20		if(!imageDiv) {
21			imageDiv = document.createElement("div");
22			imageDiv.setAttribute("id", "PV_imageDiv");
23			imageContainer.appendChild(imageDiv);
24		}
25		
26		var cachedImage = document.createElement("img");
27		cachedImage.onload = function(e) {
28			var naturalWidth = cachedImage.naturalWidth || cachedImage.offsetWidth || cachedImage.width;
29			var naturalHeight = cachedImage.naturalHeight || cachedImage.offsetHeight || cachedImage.height;
30			var width = parseInt(defaultWidth || naturalWidth);
31			if(typeof maxWidth!="undefined" && parseInt(maxWidth)>0 && parseInt(maxWidth)<width) {
32				width = parseInt(maxWidth);
33			}
34			var height = Math.ceil(naturalHeight/naturalWidth*width);
35			//cachedImage.setAttribute("style", "width: " + width + "px; border: 5px solid white;");
36			cachedImage.setAttribute("style", "width: " + width + "px; padding: 5px; background: white; border: 1px solid black;");
37			cachedImage.setAttribute("alt", captionText!="" ? captionText : "");
38						
39			var close = document.createElement("img");
40			close.setAttribute("style", "padding: 0 3px 5px 0; float: right; cursor: pointer;");
41			close.setAttribute("alt", "Close");
42			close.setAttribute("title", "Close")
43			close.src = "/apps/pics/close.gif";
44			close.onclick = DialogBoxes.hide;
45			
46			while(imageDiv.hasChildNodes()) {
47				imageDiv.removeChild(imageDiv.lastChild);
48			}
49			imageDiv.appendChild(close);
50			imageDiv.appendChild(cachedImage);
51
52			if(captionText!="") {
53				var caption = document.createElement("p");
54				caption.innerHTML = captionText;
55				caption.setAttribute("style", "display: inline-block; margin: 6px 8px; padding: 8px 12px; border-radius: 4px; background: rgba(0,0,0,0.3); font-size: 1em; line-height: 1.3em; z-index: 9999; color: #FAFAFA; text-align: left;");
56				imageDiv.appendChild(caption);
57			}
58			DialogBoxes.show({ srcDiv: "PV_imageDiv", w: width+12, h: height+(captionText!="" ? 120 : 30), onClick: DialogBoxes.hide });
59		};
60		
61		cachedImage.onerror = function(e) {
62			alert("Sorry, the image could not be loaded.");
63			if(DialogBoxes.IsDialogOpen) {
64				DialogBoxes.hide();
65			}
66		};
67
68		cachedImage.src = imageSource.replace(/#/g, '%23');
69	}	
70};
71