mdrockwell/littlelink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add FancyZoom for QR code image viewing

Browse Source
This commit is contained in:
Mike Rockwell
2025-07-24 23:49:19 -04:00
parent 32f42b074e
commit b259ce34ed
28 changed files with 1083 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
js-global/FancyZoomHTML.js Normal file
View File

@@ -0,0 +1,318 @@
// FancyZoomHTML.js - v1.0
// Used to draw necessary HTML elements for FancyZoom
//
// Copyright (c) 2008 Cabel Sasser / Panic Inc
// All rights reserved.
function insertZoomHTML() {
// All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
var inBody = document.getElementsByTagName("body").item(0);
// WAIT SPINNER
var inSpinbox = document.createElement("div");
inSpinbox.setAttribute('id', 'ZoomSpin');
inSpinbox.style.position = 'absolute';
inSpinbox.style.left = '10px';
inSpinbox.style.top = '10px';
inSpinbox.style.visibility = 'hidden';
inSpinbox.style.zIndex = '525';
inBody.insertBefore(inSpinbox, inBody.firstChild);
var inSpinImage = document.createElement("img");
inSpinImage.setAttribute('id', 'SpinImage');
inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png');
inSpinbox.appendChild(inSpinImage);
// ZOOM IMAGE
//
// <div id="ZoomBox">
// <a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
// <div id="ZoomClose">
// <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
// </div>
// </div>
var inZoombox = document.createElement("div");
inZoombox.setAttribute('id', 'ZoomBox');
inZoombox.style.position = 'absolute';
inZoombox.style.left = '10px';
inZoombox.style.top = '10px';
inZoombox.style.visibility = 'hidden';
inZoombox.style.zIndex = '499';
inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
var inImage1 = document.createElement("img");
inImage1.onclick = function (event) { zoomOut(this, event); return false; };
inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
inImage1.setAttribute('id','ZoomImage');
inImage1.setAttribute('border', '0');
// inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
// inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')
// This must be set first, so we can later test it using webkitBoxShadow.
inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
inImage1.style.display = 'block';
inImage1.style.width = '10px';
inImage1.style.height = '10px';
inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
inZoombox.appendChild(inImage1);
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'ZoomClose');
inClosebox.style.position = 'absolute';
// In MSIE, we need to put the close box inside the image.
// It's 2008 and I'm having to do a browser detect? Sigh.
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
inZoombox.appendChild(inClosebox);
var inImage2 = document.createElement("img");
inImage2.onclick = function (event) { zoomOut(this, event); return false; };
inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
inImage2.setAttribute('width','30');
inImage2.setAttribute('height','30');
inImage2.setAttribute('border','0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
// SHADOW
// Only draw the table-based shadow if the programatic webkitBoxShadow fails!
// Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) {
// SHADOW BASE
var inFixedBox = document.createElement("div");
inFixedBox.setAttribute('id', 'ShadowBox');
inFixedBox.style.position = 'absolute';
inFixedBox.style.left = '50px';
inFixedBox.style.top = '50px';
inFixedBox.style.width = '100px';
inFixedBox.style.height = '100px';
inFixedBox.style.visibility = 'hidden';
inFixedBox.style.zIndex = '498';
inBody.insertBefore(inFixedBox, inZoombox.nextSibling);
// SHADOW
// Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.
// <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
// <tr height="25">
// <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
// <td background="/images/zoom-shadow2.png">&nbsp;</td>
// <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
// </tr>
var inShadowTable = document.createElement("table");
inShadowTable.setAttribute('border', '0');
inShadowTable.setAttribute('width', '100%');
inShadowTable.setAttribute('height', '100%');
inShadowTable.setAttribute('cellpadding', '0');
inShadowTable.setAttribute('cellspacing', '0');
inFixedBox.appendChild(inShadowTable);
var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
inShadowTable.appendChild(inShadowTbody);
var inRow1 = document.createElement("tr");
inRow1.style.height = '25px';
inShadowTbody.appendChild(inRow1);
var inCol1 = document.createElement("td");
inCol1.style.width = '27px';
inRow1.appendChild(inCol1);
var inShadowImg1 = document.createElement("img");
inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png');
inShadowImg1.setAttribute('width', '27');
inShadowImg1.setAttribute('height', '25');
inShadowImg1.style.display = 'block';
inCol1.appendChild(inShadowImg1);
var inCol2 = document.createElement("td");
inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
inRow1.appendChild(inCol2);
// inCol2.innerHTML = '<img src=';
var inSpacer1 = document.createElement("img");
inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif');
inSpacer1.setAttribute('height', '1');
inSpacer1.setAttribute('width', '1');
inSpacer1.style.display = 'block';
inCol2.appendChild(inSpacer1);
var inCol3 = document.createElement("td");
inCol3.style.width = '27px';
inRow1.appendChild(inCol3);
var inShadowImg3 = document.createElement("img");
inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png');
inShadowImg3.setAttribute('width', '27');
inShadowImg3.setAttribute('height', '25');
inShadowImg3.style.display = 'block';
inCol3.appendChild(inShadowImg3);
// <tr>
// <td background="/images/zoom-shadow4.png">&nbsp;</td>
// <td bgcolor="#ffffff">&nbsp;</td>
// <td background="/images/zoom-shadow5.png">&nbsp;</td>
// </tr>
inRow2 = document.createElement("tr");
inShadowTbody.appendChild(inRow2);
var inCol4 = document.createElement("td");
inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
inRow2.appendChild(inCol4);
// inCol4.innerHTML = '&nbsp;';
var inSpacer2 = document.createElement("img");
inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif');
inSpacer2.setAttribute('height', '1');
inSpacer2.setAttribute('width', '1');
inSpacer2.style.display = 'block';
inCol4.appendChild(inSpacer2);
var inCol5 = document.createElement("td");
inCol5.setAttribute('bgcolor', '#ffffff');
inRow2.appendChild(inCol5);
// inCol5.innerHTML = '&nbsp;';
var inSpacer3 = document.createElement("img");
inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif');
inSpacer3.setAttribute('height', '1');
inSpacer3.setAttribute('width', '1');
inSpacer3.style.display = 'block';
inCol5.appendChild(inSpacer3);
var inCol6 = document.createElement("td");
inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
inRow2.appendChild(inCol6);
// inCol6.innerHTML = '&nbsp;';
var inSpacer4 = document.createElement("img");
inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif');
inSpacer4.setAttribute('height', '1');
inSpacer4.setAttribute('width', '1');
inSpacer4.style.display = 'block';
inCol6.appendChild(inSpacer4);
// <tr height="26">
// <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
// <td background="/images/zoom-shadow7.png">&nbsp;</td>
// <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
// </tr>
// </table>
var inRow3 = document.createElement("tr");
inRow3.style.height = '26px';
inShadowTbody.appendChild(inRow3);
var inCol7 = document.createElement("td");
inCol7.style.width = '27px';
inRow3.appendChild(inCol7);
var inShadowImg7 = document.createElement("img");
inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png');
inShadowImg7.setAttribute('width', '27');
inShadowImg7.setAttribute('height', '26');
inShadowImg7.style.display = 'block';
inCol7.appendChild(inShadowImg7);
var inCol8 = document.createElement("td");
inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
inRow3.appendChild(inCol8);
// inCol8.innerHTML = '&nbsp;';
var inSpacer5 = document.createElement("img");
inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif');
inSpacer5.setAttribute('height', '1');
inSpacer5.setAttribute('width', '1');
inSpacer5.style.display = 'block';
inCol8.appendChild(inSpacer5);
var inCol9 = document.createElement("td");
inCol9.style.width = '27px';
inRow3.appendChild(inCol9);
var inShadowImg9 = document.createElement("img");
inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png');
inShadowImg9.setAttribute('width', '27');
inShadowImg9.setAttribute('height', '26');
inShadowImg9.style.display = 'block';
inCol9.appendChild(inShadowImg9);
}
if (includeCaption) {
// CAPTION
//
// <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
// <table border="1" cellpadding="0" cellspacing="0">
// <tr height="26">
// <td><img src="zoom-caption-l.png" width="13" height="26"></td>
// <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
// <td><img src="zoom-caption-r.png" width="13" height="26"></td>
// </tr>
// </table>
// </div>
var inCapDiv = document.createElement("div");
inCapDiv.setAttribute('id', 'ZoomCapDiv');
inCapDiv.style.position = 'absolute';
inCapDiv.style.visibility = 'hidden';
inCapDiv.style.marginLeft = 'auto';
inCapDiv.style.marginRight = 'auto';
inCapDiv.style.zIndex = '501';
inBody.insertBefore(inCapDiv, inZoombox.nextSibling);
var inCapTable = document.createElement("table");
inCapTable.setAttribute('border', '0');
inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to
inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF?
inCapDiv.appendChild(inCapTable);
var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
inCapTable.appendChild(inTbody);
var inCapRow1 = document.createElement("tr");
inTbody.appendChild(inCapRow1);
var inCapCol1 = document.createElement("td");
inCapCol1.setAttribute('align', 'right');
inCapRow1.appendChild(inCapCol1);
var inCapImg1 = document.createElement("img");
inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png');
inCapImg1.setAttribute('width', '13');
inCapImg1.setAttribute('height', '26');
inCapImg1.style.display = 'block';
inCapCol1.appendChild(inCapImg1);
var inCapCol2 = document.createElement("td");
inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
inCapCol2.setAttribute('id', 'ZoomCaption');
inCapCol2.setAttribute('valign', 'middle');
inCapCol2.style.fontSize = '14px';
inCapCol2.style.fontFamily = 'Helvetica';
inCapCol2.style.fontWeight = 'bold';
inCapCol2.style.color = '#ffffff';
inCapCol2.style.textShadow = '0px 2px 4px #000000';
inCapCol2.style.whiteSpace = 'nowrap';
inCapRow1.appendChild(inCapCol2);
var inCapCol3 = document.createElement("td");
inCapRow1.appendChild(inCapCol3);
var inCapImg2 = document.createElement("img");
inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png');
inCapImg2.setAttribute('width', '13');
inCapImg2.setAttribute('height', '26');
inCapImg2.style.display = 'block';
inCapCol3.appendChild(inCapImg2);
}
}