// 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
'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 // //
// //
// //
//
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. //
X //
//
//
 
//
//
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 = ' //
 
//
 
//
 
//
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); //
//
//
 
//
//
//
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 // //
//
//
//
//
//
//
//
//
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+'http://www.ysek.cn/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+'http://www.ysek.cn/zoom-caption-r.png'); inCapImg2.setAttribute('width', '13'); inCapImg2.setAttribute('height', '26'); inCapImg2.style.display = 'block'; inCapCol3.appendChild(inCapImg2); } }