蓝色靓丽ECSHOP模板

// ----------------------------------------------------------------------------------- // // Litebox v1.0 // A combined effort between detrate and gannon // 07/03/06 // // Source edited from Lightbox v2.02 // by Lokesh Dhakar - http://www.huddletogether.com // // For more information on this script, visit: // http://doknowevil.net/litebox // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // // Credit also due to those who have helped, inspired, and made their code available to the public. // Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others. // // ----------------------------------------------------------------------------------- // // Configuration // var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif"; var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest) var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable // ----------------------------------------------------------------------------------- // // Global Variables // var imageArray = new Array; var activeImage; if(resizeSpeed > 10){ resizeSpeed = 10;} if(resizeSpeed < 1){ resizeSpeed = 1;} resizeDuration = (11 - resizeSpeed) * 100; // ----------------------------------------------------------------------------------- // // Additional methods for Element added by SU, Couloir // - further additions by Lokesh Dhakar (huddletogether.com) // Object.extend(Element, { hide: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = 'none'; } }, show: function() { for (var i = 0; i < arguments.length; i++) { var element = $(arguments[i]); element.style.display = ''; } }, getWidth: function(element) { element = $(element); return element.offsetWidth; }, setWidth: function(element,w) { element = $(element); element.style.width = w +"px"; }, getHeight: function(element) { element = $(element); return element.offsetHeight; }, setHeight: function(element,h) { element = $(element); element.style.height = h +"px"; }, setTop: function(element,t) { element = $(element); element.style.top = t +"px"; }, setSrc: function(element,src) { element = $(element); element.src = src; }, setInnerHTML: function(element,content) { element = $(element); element.innerHTML = content; } }); // ----------------------------------------------------------------------------------- // // Extending built-in Array object // Array.prototype.removeDuplicates = function () { for(i = 1; i < this.length; i++){ if(this[i][0] == this[i-1][0]){ this.splice(i,1); } } } Array.prototype.empty = function () { for(i = 0; i <= this.length; i++){ this.shift(); } } // ----------------------------------------------------------------------------------- // // Structuring of code inspired by Scott Upton (http://www.uptonic.com/) // var Lightbox = Class.create(); Lightbox.prototype = { // initialize() // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of // the function inserts html at the bottom of the page which is used to display the shadow // overlay and the image container. // initialize: function() { if (!document.getElementsByTagName){ return; } var anchors = document.getElementsByTagName('a'); // loop through all anchor tags for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel')); // use the string.match() method to catch 'lightbox' references in the rel attribute if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ anchor.onclick = function () {myLightbox.start(this); return false;} } } var objBody = document.getElementsByTagName("body").item(0); var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.onclick = function() { myLightbox.end(); return false; } objBody.appendChild(objOverlay); var objLightbox = document.createElement("div"); objLightbox.setAttribute('id','lightbox'); objLightbox.style.display = 'none'; objBody.appendChild(objLightbox); var objOuterImageContainer = document.createElement("div"); objOuterImageContainer.setAttribute('id','outerImageContainer'); objLightbox.appendChild(objOuterImageContainer); var objImageContainer = document.createElement("div"); objImageContainer.setAttribute('id','imageContainer'); objOuterImageContainer.appendChild(objImageContainer); var objLightboxImage = document.createElement("img"); objLightboxImage.setAttribute('id','lightboxImage'); objImageContainer.appendChild(objLightboxImage); var objHoverNav = document.createElement("div"); objHoverNav.setAttribute('id','hoverNav'); objImageContainer.appendChild(objHoverNav); var objPrevLink = document.createElement("a"); objPrevLink.setAttribute('id','prevLink'); objPrevLink.setAttribute('href','#'); objHoverNav.appendChild(objPrevLink); var objNextLink = document.createElement("a"); objNextLink.setAttribute('id','nextLink'); objNextLink.setAttribute('href','#'); objHoverNav.appendChild(objNextLink); var objLoading = document.createElement("div"); objLoading.setAttribute('id','loading'); objImageContainer.appendChild(objLoading); var objLoadingLink = document.createElement("a"); objLoadingLink.setAttribute('id','loadingLink'); objLoadingLink.setAttribute('href','#'); objLoadingLink.onclick = function() { myLightbox.end(); return false; } objLoading.appendChild(objLoadingLink); var objLoadingImage = document.createElement("img"); objLoadingImage.setAttribute('src', fileLoadingImage); objLoadingLink.appendChild(objLoadingImage); var objImageDataContainer = document.createElement("div"); objImageDataContainer.setAttribute('id','imageDataContainer'); objImageDataContainer.className = 'clearfix'; objLightbox.appendChild(objImageDataContainer); var objImageData = document.createElement("div"); objImageData.setAttribute('id','imageData'); objImageDataContainer.appendChild(objImageData); var objImageDetails = document.createElement("div"); objImageDetails.setAttribute('id','imageDetails'); objImageData.appendChild(objImageDetails); var objCaption = document.createElement("span"); objCaption.setAttribute('id','caption'); objImageDetails.appendChild(objCaption); var objNumberDisplay = document.createElement("span"); objNumberDisplay.setAttribute('id','numberDisplay'); objImageDetails.appendChild(objNumberDisplay); var objBottomNav = document.createElement("div"); objBottomNav.setAttribute('id','bottomNav'); objImageData.appendChild(objBottomNav); var objBottomNavCloseLink = document.createElement("a"); objBottomNavCloseLink.setAttribute('id','bottomNavClose'); objBottomNavCloseLink.setAttribute('href','#'); objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; } objBottomNav.appendChild(objBottomNavCloseLink); var objBottomNavCloseImage = document.createElement("img"); objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage); objBottomNavCloseLink.appendChild(objBottomNavCloseImage); overlayEffect = new fx.Opacity(objOverlay, { duration: 300 }); overlayEffect.hide(); imageEffect = new fx.Opacity(objLightboxImage, { duration: 350, onComplete: function() { imageDetailsEffect.custom(0,1); }}); imageEffect.hide(); imageDetailsEffect = new fx.Opacity('imageDataContainer', { duration: 400, onComplete: function() { navEffect.custom(0,1); }}); imageDetailsEffect.hide(); navEffect = new fx.Opacity('hoverNav', { duration: 100 })