📄 fancyzoom.js
字号:
// FancyZoom.js - v1.1 - http://www.fancyzoom.com//// Copyright (c) 2008 Cabel Sasser / Panic Inc// All rights reserved.// // Requires: FancyZoomHTML.js// Instructions: Include JS files in page, call setupZoom() in onLoad. That's it!// Any <a href> links to images will be updated to zoom inline.// Add rel="nozoom" to your <a href> to disable zooming for an image.// // Redistribution and use of this effect in source form, with or without modification,// are permitted provided that the following conditions are met:// // * USE OF SOURCE ON COMMERCIAL (FOR-PROFIT) WEBSITE REQUIRES ONE-TIME LICENSE FEE PER DOMAIN.// Reasonably priced! Visit www.fancyzoom.com for licensing instructions. Thanks!//// * Non-commercial (personal) website use is permitted without license/payment!//// * Redistribution of source code must retain the above copyright notice,// this list of conditions and the following disclaimer.//// * Redistribution of source code and derived works cannot be sold without specific// written prior permission.//// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,// EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF// LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTMLvar zoomTime = 5; // Milliseconds between frames of zoom animationvar zoomSteps = 15; // Number of zoom animation framesvar includeFade = 1; // Set to 1 to fade the image in / out as it zoomsvar minBorder = 90; // Amount of padding between large, scaled down images, and the window edgesvar shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsersvar zoomImagesURI = 'images-global/zoom/'; // Location of the zoom and shadow images// Init. Do not add anything below this line, unless it's something awesome.var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0;var zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image();var preloadAnimTimer = 0;var zoomActive = new Array(); var zoomTimer = new Array(); var zoomOrigW = new Array(); var zoomOrigH = new Array();var zoomOrigX = new Array(); var zoomOrigY = new Array();var zoomID = "ZoomBox";var theID = "ZoomImage";var zoomCaption = "ZoomCaption";var zoomCaptionDiv = "ZoomCapDiv";if (navigator.userAgent.indexOf("MSIE") != -1) { var browserIsIE = true;}// Zoom: Setup The Page! Called in your <body>'s onLoad handler.function setupZoom() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID);}// Zoom: Inject Javascript functions into hrefs pointing to images, one by one!// Skip any href that contains a rel="nozoom" tag.// This is done at page load time via an onLoad() handler.function prepZooms() { if (! document.getElementsByTagName) { return; } var links = document.getElementsByTagName("a"); for (i = 0; i < links.length; i++) { if (links[i].getAttribute("href")) { if (links[i].getAttribute("href").search(/(.*)\.(jpg|jpeg|gif|png|bmp|tif|tiff)/gi) != -1) { if (links[i].getAttribute("rel") != "nozoom") { links[i].onclick = function (event) { return zoomClick(this, event); }; links[i].onmouseover = function () { zoomPreload(this); }; } } } }}// Zoom: Load an image into an image object. When done loading, function sets preloadActive to false,// so other bits know that they can proceed with the zoom.// Preloaded image is stored in imgPreload and swapped out in the zoom function.function zoomPreload(from) { var theimage = from.getAttribute("href"); // Only preload if we have to, i.e. the image isn't this image already if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) { preloadActive = true; imgPreload = new Image(); // Set a function to fire when the preload is complete, setting flags along the way. imgPreload.onload = function() { preloadActive = false; } // Load it! imgPreload.src = theimage; }}// Zoom: Start the preloading animation cycle.function preloadAnimStart() { preloadTime = new Date(); document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px'; document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px'; document.getElementById("ZoomSpin").style.visibility = "visible"; preloadFrame = 1; document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png'; preloadAnimTimer = setInterval("preloadAnim()", 100);}// Zoom: Display and ANIMATE the jibber-jabber widget. Once preloadActive is false, bail and zoom it up!function preloadAnim(from) { if (preloadActive != false) { document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png'; preloadFrame++; if (preloadFrame > 12) preloadFrame = 1; } else { document.getElementById("ZoomSpin").style.visibility = "hidden"; clearInterval(preloadAnimTimer); preloadAnimTimer = 0; zoomIn(preloadFrom); }}// ZOOM CLICK: We got a click! Should we do the zoom? Or wait for the preload to complete?// todo?: Double check that imgPreload src = clicked srcfunction zoomClick(from, evt) { var shift = getShift(evt); // Check for Command / Alt key. If pressed, pass them through -- don't zoom! if (! evt && window.event && (window.event.metaKey || window.event.altKey)) { return true; } else if (evt && (evt.metaKey|| evt.altKey)) { return true; } // Get browser dimensions getSize(); // If preloading still, wait, and display the spinner. if (preloadActive == true) { // But only display the spinner if it's not already being displayed! if (preloadAnimTimer == 0) { preloadFrom = from; preloadAnimStart(); } } else { // Otherwise, we're loaded: do the zoom! zoomIn(from, shift); } return false; }// Zoom: Move an element in to endH endW, using zoomHost as a starting point.// "from" is an object reference to the href that spawned the zoom.function zoomIn(from, shift) { zoomimg.src = from.getAttribute("href"); // Determine the zoom settings from where we came from, the element in the <a>. // If there's no element in the <a>, or we can't get the width, make stuff up if (from.childNodes[0].width) { startW = from.childNodes[0].width; startH = from.childNodes[0].height; startPos = findElementPos(from.childNodes[0]); } else { startW = 50; startH = 12; startPos = findElementPos(from); } hostX = startPos[0]; hostY = startPos[1]; // Make up for a scrolled containing div. // TODO: This HAS to move into findElementPos. if (document.getElementById('scroller')) { hostX = hostX - document.getElementById('scroller').scrollLeft; } // Determine the target zoom settings from the preloaded image object endW = imgPreload.width; endH = imgPreload.height; // Start! But only if we're not zooming already! if (zoomActive[theID] != true) { // Clear everything out just in case something is already open if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { // Wipe timer if shadow is fading in still if (fadeActive["ZoomImage"]) { clearInterval(fadeTimer["ZoomImage"]); fadeActive["ZoomImage"] = false; fadeTimer["ZoomImage"] = false; } document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)'; } document.getElementById("ZoomClose").style.visibility = "hidden"; // Setup the CAPTION, if existing. Hide it first, set the text. if (includeCaption) { document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; if (from.getAttribute('title') && includeCaption) { // Yes, there's a caption, set it up document.getElementById(zoomCaption).innerHTML = from.getAttribute('title'); } else { document.getElementById(zoomCaption).innerHTML = ""; } } // Store original position in an array for future zoomOut. zoomOrigW[theID] = startW; zoomOrigH[theID] = startH; zoomOrigX[theID] = hostX; zoomOrigY[theID] = hostY; // Now set the starting dimensions zoomimg.style.width = startW + 'px'; zoomimg.style.height = startH + 'px'; zoomdiv.style.left = hostX + 'px'; zoomdiv.style.top = hostY + 'px'; // Show the zooming image container, make it invisible if (includeFade == 1) { setOpacity(0, zoomID); } zoomdiv.style.visibility = "visible"; // If it's too big to fit in the window, shrink the width and height to fit (with ratio). sizeRatio = endW / endH; if (endW > myWidth - minBorder) { endW = myWidth - minBorder; endH = endW / sizeRatio; } if (endH > myHeight - minBorder) { endH = myHeight - minBorder; endW = endH * sizeRatio; } zoomChangeX = ((myWidth / 2) - (endW / 2) - hostX); zoomChangeY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll); zoomChangeW = (endW - startW); zoomChangeH = (endH - startH); // Shift key? if (shift) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } // Setup Zoom zoomCurrent = 0; // Setup Fade with Zoom, If Requested if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (0 - 100) / tempSteps; } else { fadeAmount = 0; } // Do It! zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime); zoomActive[theID] = true; }}// Zoom it back out.function zoomOut(from, evt) { // Get shift key status. // IE events don't seem to get passed through the function, so grab it from the window. if (getShift(evt)) { tempSteps = zoomSteps * 7; } else { tempSteps = zoomSteps; } // Check to see if something is happening/open if (zoomActive[theID] != true) { // First, get rid of the shadow if necessary. if (document.getElementById("ShadowBox")) { document.getElementById("ShadowBox").style.visibility = "hidden"; } else if (! browserIsIE) { // Wipe timer if shadow is fading in still if (fadeActive["ZoomImage"]) { clearInterval(fadeTimer["ZoomImage"]); fadeActive["ZoomImage"] = false; fadeTimer["ZoomImage"] = false; } document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)'; } // ..and the close box... document.getElementById("ZoomClose").style.visibility = "hidden"; // ...and the caption if necessary! if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") { // fadeElementSetup(zoomCaptionDiv, 100, 0, 5, 1); document.getElementById(zoomCaptionDiv).style.visibility = "hidden"; } // Now, figure out where we came from, to get back there startX = parseInt(zoomdiv.style.left); startY = parseInt(zoomdiv.style.top); startW = zoomimg.width; startH = zoomimg.height; zoomChangeX = zoomOrigX[theID] - startX; zoomChangeY = zoomOrigY[theID] - startY; zoomChangeW = zoomOrigW[theID] - startW; zoomChangeH = zoomOrigH[theID] - startH; // Setup Zoom zoomCurrent = 0; // Setup Fade with Zoom, If Requested if (includeFade == 1) { fadeCurrent = 0; fadeAmount = (100 - 0) / tempSteps; } else { fadeAmount = 0; }⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -