function initImageZoom(_options) { var options = $extend({ rel: 'imagezoom' }, _options || {}); var elements = $$(document.links).filter(function(el) { if ((el.rel) && (el.rel.indexOf(options.rel) != -1)) return true; else return false; }); for (var i = 0; i < elements.length; i++) { var el = elements[i]; el.addEvent("click", function() { this.blur(); var sEl = this; var imgCap = ""; if (this.getElements("img").length > 0) sEl = this.getElements("img")[0]; if ((sEl.alt) && (sEl.alt != "")) imgCap = sEl.alt; else if (sEl.title) imgCap = sEl.title; else if (sEl.parentNode.title) imgCap = sEl.parentNode.title; var _options = $extend({ image: this.href, caption: imgCap, startElement: sEl }, options || {}); _options.image = this.href; _options.caption = imgCap; var imagezoom = new Imagezoom(_options); imagezoom.preloadImage(); imagezoom.show(); return false; }); } } var Imagezoom = function(_options) { var options = $extend({ image: false, caption: "", enableCaptions: true, startElement: false, x: 10, y: 10, initWidth: 50, initHeight: 50, draggable: true, loadImage: "http://www.vreeken.nl/nieuwsbrief/012/imagezoom/images/loading.gif", loadDelay: 150, duration: 800, closeDuration: 500, transition: Fx.Transitions.Cubic.easeOut, startOpacity: 0.6, closeText: 'Close', rel: 'imagezoom', showCaptionBar: true, overlay: false, overlayColor: "#000", overlayOpacity: .75 }, _options || {}); var box = document.createElement("div"); var instance = this; /* shadow divs */ var tl = document.createElement("div"); tl.className = "s s_tl"; var tr = document.createElement("div"); tr.className = "s s_tr"; var bl = document.createElement("div"); bl.className = "s s_bl"; var br = document.createElement("div"); br.className = "s s_br"; var top = document.createElement("div"); top.className = "s s_top"; var bottom = document.createElement("div"); bottom.className = "s s_bottom"; var left = document.createElement("div"); left.className = "s s_left"; var right = document.createElement("div"); right.className = "s s_right"; this.preloadImage = function() { if (options.image != false) { var img = new Image(); img.src = options.image; img.style.visibility = "hidden"; img.style.position = "absolute"; img.style.top = "-9999999999px"; img.setAttribute("id", "imagezoom-" + options.image); $$('body')[0].appendChild(img); } } this.getImage = function() { if (($('imagezoom-' + options.image)) && ($('imagezoom-' + options.image).width != "0")) { var img = $('imagezoom-' + options.image).clone(); img.setAttribute("id", ""); img.style.position = "relative"; img.style.top = "0px"; img.style.visibility = "visible"; } else { instance.preloadImage(); window.setTimeout(function() { instance.getImage(); }, 50); } return img; } this.show = function() { if (options.image != false) { box.style.position = "absolute"; box.style.overflow = "hidden"; box.setAttribute("id", "imagezoom-open-" + options.image); if (options.startElement != false) options.startElement.blur(); var x = options.x; var y = options.y; var boxWidth = options.initWidth; var boxHeight = options.initHeight; if (options.startElement != false) { x = options.startElement.getPosition().x; y = options.startElement.getPosition().y; boxWidth = options.startElement.offsetWidth; boxHeight = options.startElement.offsetHeight; } box.style.left = x + "px"; box.style.top = y + "px"; box.style.width = boxWidth + "px"; box.style.height = boxHeight + "px"; var fx = new Fx.Morph(box); fx.set({opacity: options.startOpacity}); box.className = "imagezoom"; $$('body')[0].appendChild(box); box.style.cursor = "pointer"; box.addEvent("click", function() { var fx = new Fx.Morph(box, {duration: 200}); fx.start({opacity: 0}).chain(function() { $$('body')[0].removeChild(box); }); }); this.loadImage(); } } this.loadImage = function() { if (box.getElements(".loading").length == 0) { var loading = new Image(); loading.src = options.loadImage; loading.className = "loading"; box.appendChild(loading); } if ($('imagezoom-' + options.image)) { var el = $('imagezoom-' + options.image); if (el.width != "0") { var newEl = new Image(); newEl.src = options.image; window.setTimeout(function() { instance.insertImage(newEl) }, options.loadDelay); } else { window.setTimeout(function() { instance.loadImage(); }, 50); } } else { instance.preloadImage(); window.setTimeout(function() { instance.loadImage(); }, 50); } } this.insertImage = function(img) { box.removeEvents("click"); box.style.cursor = "default"; box.style.overflow = "visible"; var w = img.width; var h = img.height; img.style.width = w + "px"; img.style.height = h + "px"; img.className = 'image'; var ptop = (window.getSize().y / 2) + window.getScroll().y - (h/2); var pleft = (window.getSize().x / 2) + window.getScroll().x - (w/2); var fx = new Fx.Morph(box, {duration: options.duration, transition: options.transition}); fx.start({ top: ptop, left: pleft, width: w, height: h, opacity: 1 }).chain(function() { if (options.overlay == true) { if (!$('imagezoom_overlay')) { var overlay = $(document.createElement("div")); overlay.setAttribute("id", "imagezoom_overlay"); overlay.style.backgroundColor = options.overlayColor; overlay.setOpacity(0); $$('body')[0].appendChild(overlay); } else { var overlay = $('imagezoom_overlay'); } overlay.style.width = window.getScrollSize().x + "px"; overlay.style.height = window.getScrollSize().y + "px"; var overlayfx = new Fx.Morph(overlay, {duration: 600}); overlayfx.start({ opacity: options.overlayOpacity }); } var close = $(document.createElement("div")); close.innerHTML = "" + options.closeText + ""; close.className = "close"; close.addEvent("click", function() { instance.close(true); }); var loading = box.getElements(".loading"); if (loading.length > 0) box.removeChild(loading[0]); var elements = [close, tl, tr, bl, br, top, bottom, left, right, img]; for (var i = 0; i < elements.length; i++) { var elFx = new Fx.Morph(elements[i], {duration: 600}); elFx.set({opacity: 0}); box.adopt(elements[i]); elFx.start({opacity: 1}); } var caption; if ((options.caption != "") && (options.enableCaptions == true)) { caption = document.createElement("div"); caption.className = "caption"; caption.innerHTML = "

" + options.caption + "

"; box.appendChild(caption); } instance.addSetNavigation(); if (box.getElements(".caption").length > 0) { caption = box.getElements(".caption")[0]; var cfx = new Fx.Morph(caption, {duration: 200}); cfx.set({opacity: 0}); if (options.showCaptionBar == true) { caption.className += " visibleCaption"; var cStartFx = new Fx.Morph(caption, {duration: 600}); cStartFx.start({ opacity: 1 }); } box.addEvent("mouseenter", function() { cfx.start({opacity: 1}).chain(function() { caption.className += " visibleCaption"; }); }); box.addEvent("mouseleave", function() { cfx.start({opacity: 0}).chain(function() { caption.className = caption.className.replace(/visibleCaption/g, ""); }); }); close.addEvent("mouseenter", function() { cfx.start({opacity: 0}).chain(function() { caption.className = caption.className.replace(/visibleCaption/g, ""); }); }); box.getElements(".image")[0].addEvent("click", function() { var action = "show"; if (caption.className.indexOf("visibleCaption") != -1) action = "hide"; if (action == "show") cfx.start({opacity: 1}).chain(function() { caption.className += " visibleCaption"; }); else cfx.start({opacity: 0}).chain(function() { caption.className = caption.className.replace(/visibleCaption/g, ""); }); }); } top.style.width = box.offsetWidth + "px"; bottom.style.width = box.offsetWidth + "px"; left.style.height = box.offsetHeight + "px"; right.style.height = box.offsetHeight + "px"; if (options.draggable == true) var move = new Drag.Move(box, {handle: img}); }); } this.addSetNavigation = function() { var links = $$(document.links).filter(function(link) { if ((link.rel) && (link.rel.indexOf(options.rel) != -1)) return true; else return false; }); var set = false; for (var i = 0; i < links.length; i++) { if ((links[i].href.indexOf(options.image) != -1) && (links[i].rel) && (links[i].rel.indexOf(options.rel + '[' != -1))) { var rel = links[i].getAttribute("rel"); set = instance.scanRel("after", options.rel + "[", this.scanRel("before", "]", rel)); } } if (set != false) { var prevLink = false; var nextLink = false; var setLinks = new Array(); for (i = 0; i < links.length; i++) { if (links[i].rel.indexOf(options.rel + "[" + set + "]") != -1) { setLinks[setLinks.length] = links[i]; } } for (i = 0; i < setLinks.length; i++) { var link = setLinks[i]; if ((link.href.indexOf(options.image) != -1) && (link.rel) && (link.rel.indexOf(options.rel != -1))) { if (i != 0) prevLink = setLinks[i - 1]; if (i != setLinks.length - 1) nextLink = setLinks[i + 1]; } } if ((prevLink != false) || (nextLink != false)) { if (box.getElements(".caption").length == 0) { var caption = document.createElement("div"); caption.className = "caption"; box.appendChild(caption); } else { var caption = box.getElements(".caption")[0]; } } if (prevLink != false) { var previousButton = $(document.createElement("div")); previousButton.className = "previous"; var prevCap = ''; if (prevLink.title) prevCap = prevLink.title; var prevEl = prevLink; if (prevLink.getElements("img").length > 0) prevEl = prevLink.getElements("img")[0]; previousButton.addEvent("click", function() { var newOptions = $unlink(options); var imagezoomPrev = new Imagezoom($extend(newOptions, { image: prevLink.href, caption: prevCap, rel: options.rel, startElement: prevEl, showCaptionBar: true })); instance.close(); imagezoomPrev.show(); }); caption.appendChild(previousButton); } if (nextLink != false) { var nextButton = $(document.createElement("div")); nextButton.className = "next"; var nextCap = ''; if (nextLink.title) nextCap = nextLink.title; var nextEl = nextLink; if (nextLink.getElements("img").length > 0) nextEl = nextLink.getElements("img")[0]; nextButton.addEvent("click", function() { var newOptions = $unlink(options); var imagezoomNext = new Imagezoom($extend(newOptions, { image: nextLink.href, caption: nextCap, rel: options.rel, startElement: nextEl, showCaptionBar: true })); instance.close(); imagezoomNext.show(); }); caption.appendChild(nextButton); } } } this.scanRel = function(where, needle, string) { var newstring = ''; if (where == "after") { var startpos = string.indexOf(needle) + needle.length; var endpos = string.length; } else if (where == "before") { var startpos = 0; var endpos = string.indexOf(needle); } for (var i = startpos; i < endpos; i++) { newstring += string.charAt(i); } return newstring; } this.close = function(hideOverlay) { var img = box.getElements(".image")[0]; box.removeChild(img); var close = box.getElements(".close")[0]; box.removeChild(close); var caption = box.getElements(".caption"); if (caption.length > 0) box.removeChild(caption[0]); var s = box.getElements(".s"); for (var i = 0; i < s.length; i++) box.removeChild(s[i]); var x = options.x; var y = options.y; var boxWidth = options.initWidth; var boxHeight = options.initHeight; if (options.startElement != false) { x = options.startElement.getPosition().x; y = options.startElement.getPosition().y; boxWidth = options.startElement.offsetWidth; boxHeight = options.startElement.offsetHeight; } if ((hideOverlay == true) && ($('imagezoom_overlay'))) { var oFx = new Fx.Morph($('imagezoom_overlay'), {duration: options.closeDuration}); oFx.start({opacity: 0}).chain(function() { $$('body')[0].removeChild($('imagezoom_overlay')); }); } var fx = new Fx.Morph(box, {duration: options.closeDuration}); fx.start({ left: x, top: y, width: boxWidth, height: boxHeight, opacity: options.startOpacity }).chain(function() { fx.start({ opacity: 0 }).chain(function() { $$('body')[0].removeChild(box); }); }); } }