/* * Smoothbox v20080623 by Boris Popoff (http://gueschla.com) * To be used with mootools 1.2 * * Based on Cody Lindley's Thickbox, MIT License * * Licensed under the MIT License: * http://www.opensource.org/licenses/mit-license.php */ // on page load call TB_init window.addEvent('domready', TB_init); // prevent javascript error before the content has loaded TB_WIDTH = 0; TB_HEIGHT = 0; var TB_doneOnce = 0; // add smoothbox to href elements that have a class of .smoothbox function TB_init(){ $$("a.smoothbox").each(function(el){ el.onclick = TB_bind }); } function TB_bind(event){ var event = new Event(event); // stop default behaviour event.preventDefault(); // remove click border this.blur(); // get caption: either title or name attribute var caption = this.title || this.name || ""; // get rel attribute for image groups var group = this.rel || false; // display the box for the elements href TB_show(caption, this.href, group); this.onclick = TB_bind; return false; } // called when the user clicks on a smoothbox link function TB_show(caption, url, rel){ // create iframe, overlay and box if non-existent if (!$("TB_overlay")) { new Element('iframe').setProperty('id', 'TB_HideSelect').injectInside(document.body); $('TB_HideSelect').setOpacity(0); new Element('div').setProperty('id', 'TB_overlay').injectInside(document.body); $('TB_overlay').setOpacity(0); TB_overlaySize(); new Element('div').setProperty('id', 'TB_load').injectInside(document.body); $('TB_load').innerHTML = ""; TB_load_position(); $('TB_overlay').set('tween', { duration: 400 }); $('TB_overlay').tween('opacity', 0, 0.6); } if (!$("TB_load")) { new Element('div').setProperty('id', 'TB_load').injectInside(document.body); $('TB_load').innerHTML = ""; TB_load_position(); } if (!$("TB_window")) { new Element('div').setProperty('id', 'TB_window').injectInside(document.body); $('TB_window').setOpacity(0); } $("TB_overlay").onclick = TB_remove; window.onscroll = TB_position; // check if a query string is involved var baseURL = url.match(/(.+)?/)[1] || url; // regex to check if a href refers to an image var imageURL = /\.(jpe?g|png|gif|bmp)/gi; // check for images if (baseURL.match(imageURL)) { var dummy = { caption: "", url: "", html: "" }; var prev = dummy, next = dummy, imageCount = ""; // if an image group is given if (rel) { function getInfo(image, id, label){ return { caption: image.title, url: image.href, html: " " + label + "" } } // find the anchors that point to the group var imageGroup = []; $$("a.smoothbox").each(function(el){ if (el.rel == rel) { imageGroup[imageGroup.length] = el; } }) var foundSelf = false; // loop through the anchors, looking for ourself, saving information about previous and next image for (var i = 0; i < imageGroup.length; i++) { var image = imageGroup[i]; var urlTypeTemp = image.href.match(imageURL); // look for ourself if (image.href == url) { foundSelf = true; imageCount = "Image " + (i + 1) + " of " + (imageGroup.length); } else { // when we found ourself, the current is the next image if (foundSelf) { next = getInfo(image, "next", "Next >"); // stop searching break; } else { // didn't find ourself yet, so this may be the one before ourself prev = getInfo(image, "prev", "< Prev"); } } } } imgPreloader = new Image(); imgPreloader.onload = function(){ imgPreloader.onload = null; // Resizing large images var x = window.getWidth() - 150; var y = window.getHeight() - 150; var imageWidth = imgPreloader.width; var imageHeight = imgPreloader.height; if (imageWidth > x) { imageHeight = imageHeight * (x / imageWidth); imageWidth = x; if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y; } } else if (imageHeight > y) { imageWidth = imageWidth * (y / imageHeight); imageHeight = y; if (imageWidth > x) { imageHeight = imageHeight * (x / imageWidth); imageWidth = x; } } // End Resizing // TODO don't use globals TB_WIDTH = imageWidth + 30; TB_HEIGHT = imageHeight + 60; // TODO empty window content instead $("TB_window").innerHTML += "" + "
"; $("TB_closeWindowButton").onclick = TB_remove; function buildClickHandler(image){ return function(){ $("TB_window").dispose(); new Element('div').setProperty('id', 'TB_window').injectInside(document.body); TB_show(image.caption, image.url, rel); return false; }; } var goPrev = buildClickHandler(prev); var goNext = buildClickHandler(next); if ($('TB_prev')) { $("TB_prev").onclick = goPrev; } if ($('TB_next')) { $("TB_next").onclick = goNext; } document.onkeydown = function(event){ var event = new Event(event); switch (event.code) { case 27: TB_remove(); break; case 190: if ($('TB_next')) { document.onkeydown = null; goNext(); } break; case 188: if ($('TB_prev')) { document.onkeydown = null; goPrev(); } break; } } // TODO don't remove loader etc., just hide and show later $("TB_ImageOff").onclick = TB_remove; TB_position(); TB_showWindow(); } imgPreloader.src = url; } else { //code to show html pages var queryString = url.match(/\?(.+)/)[1]; var params = TB_parseQuery(queryString); TB_WIDTH = (params['width'] * 1) + 30; TB_HEIGHT = (params['height'] * 1) + 40; var ajaxContentW = TB_WIDTH - 30, ajaxContentH = TB_HEIGHT - 45; if (url.indexOf('TB_iframe') != -1) { urlNoQuery = url.split('TB_'); $("TB_window").innerHTML += "