| // 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"> </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"> </td> |
| // <td bgcolor="#ffffff"> </td> |
| // <td background="/images/zoom-shadow5.png"> </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 = ' '; |
| 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 = ' '; |
| 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 = ' '; |
| 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"> </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 = ' '; |
| 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); |
| } |
| } |
