/** * The Shadowbox class. * * This file is part of Shadowbox. * * Shadowbox is an online media viewer application that supports all of the * web's most popular media publishing formats. Shadowbox is written entirely * in JavaScript and CSS and is highly customizable. Using Shadowbox, website * authors can showcase a wide assortment of media in all major browsers without * navigating users away from the linking page. * * You should have received a license with this distribution explaining the terms * under which Shadowbox may be used. If you did not, you may obtain a copy of the * license at http://shadowbox-js.com/LICENSE * * @author Michael J. I. Jackson * @copyright 2007-2009 Michael J. I. Jackson * @version SVN: $Id: shadowbox.js 20M 2009-04-29 04:26:23Z (local) $ */ /** * The Shadowbox class. Used to display different media on a web page using a * Lightbox-like effect. * * Known issues: * * - Location.toString exception in FF3 when loading Flash content into an * iframe (such as a YouTube video). Known Flash bug, will not be fixed. * http://bugs.adobe.com/jira/browse/FP-561 * * Useful resources: * * - http://www.alistapart.com/articles/byebyeembed * - http://www.w3.org/TR/html401/struct/objects.html * - http://www.dyn-web.com/dhtml/iframes/ * - http://www.apple.com/quicktime/player/specs.html * - http://www.apple.com/quicktime/tutorials/embed2.html * - http://www.howtocreate.co.uk/wrongWithIE/?chapter=navigator.plugins * - http://msdn.microsoft.com/en-us/library/ms532969.aspx * - http://support.microsoft.com/kb/316992 * - http://www.alistapart.com/articles/flashembedcagematch */ var Shadowbox = function(){ var ua = navigator.userAgent.toLowerCase(), // the Shadowbox object S = { /** * The current version of Shadowbox. * * @var String * @public */ version: "3.0b", /** * The name of the adapter currently being used. * * @var String * @public */ adapter: null, /** * The array index of the current gallery that is currently being viewed. * * @var Number * @public */ current: -1, /** * An array containing the gallery objects currently being viewed. In the * case of non-gallery items, this will only hold one object. * * @var Array * @public */ gallery: [], /** * A cache of options for links that have been set up for use with * Shadowbox. * * @var Array * @public */ cache: [], /** * The current content object. * * @var Object * @public */ content: null, /** * Holds the current dimensions of Shadowbox as calculated by its skin. * Contains the following properties: * * - height: The total height of #sb-wrapper (including title & info bars) * - width: The total width of #sb-wrapper * - inner_h: The height of #sb-body * - inner_w: The width of #sb-body * - top: The top to use for #sb-wrapper * - left: The left to use for #sb-wrapper * - oversized: True if the content is oversized (too large for the viewport) * - resize_h: The height to use for resizable content * - resize_w: The width to use for resizable content * * @var Object * @public */ dimensions: null, /** * Holds all loaded language hashes * * @var Object * @public */ lang: {}, /** * Contains plugin support information. Each property of this object is a * boolean indicating whether that plugin is supported. * * - fla: Flash player * - qt: QuickTime player * - wmp: Windows Media player * - f4m: Flip4Mac plugin * * @var Object * @public */ plugins: null, /** * Contains the base path of the Shadowbox script. * * Note: This property will automatically be populated in Shadowbox.load. * * @var String * @public */ path: '', /** * Contains the default options for Shadowbox. * * @var Object * @public */ options: { adapter: null, // the library adapter to use animate: true, // enable all animations, except for fades animateFade: true, // enable fade animations autoplayMovies: true, // automatically play movies autoDimensions: false, // use the dimensions of the first piece as // the initial dimensions (if they are // available) continuous: false, // enables continuous galleries. When enabled, // user will be able to skip to the first // gallery item from the last using next and // vice versa counterLimit: 10, // limit to the number of counter links that // are displayed in a "skip" style counter counterType: 'default', // counter type. May be either "default" or // "skip". Skip counter displays a link for // each item in gallery displayCounter: true, // display the gallery counter displayNav: true, // show the navigation controls downloadScript: '{0}', // a server-side script to route download links through /** * Easing function used for animations. Based on a cubic polynomial. * * @param Number x The state of the animation (% complete) * @return Number The adjusted easing value */ ease: function(x){ return 1 + Math.pow(x - 1, 3); }, enableKeys: true, // enable keyboard navigation /** * An object containing names of plugins and links to their respective * download pages. */ errors: { fla: { name: 'Flash', url: 'http://www.adobe.com/products/flashplayer/' }, qt: { name: 'QuickTime', url: 'http://www.apple.com/quicktime/download/' }, wmp: { name: 'Windows Media Player', url: 'http://www.microsoft.com/windows/windowsmedia/' }, f4m: { name: 'Flip4Mac', url: 'http://www.flip4mac.com/wmv_download.htm' } }, /** * A map of players to the file extensions they support. Each member of * this object is the name of a player (with one exception), whose value * is an array of file extensions that player will "play". The one * exception to this rule is the "qtwmp" member, which contains extensions * that may be played using either QuickTime or Windows Media Player. * * - img: Image file extensions * - swf: Flash SWF file extensions * - flv: Flash video file extensions (will be played by JW FLV player) * - qt: Movie file extensions supported by QuickTime * - wmp: Movie file extensions supported by Windows Media Player * - qtwmp: Movie file extensions supported by both QuickTime and Windows Media Player * - iframe: File extensions that will be display in an iframe * * IMPORTANT: If this object is to be modified, it must be copied in its * entirety and tweaked because it is not merged recursively with the * default. Also, any modifications must be passed into Shadowbox.init * for speed reasons. */ ext: { img: ['png', 'jpg', 'jpeg', 'gif', 'bmp'], swf: ['swf'], flv: ['flv'], qt: ['dv', 'mov', 'moov', 'movie', 'mp4'], wmp: ['asf', 'wm', 'wmv'], qtwmp: ['avi', 'mpg', 'mpeg'], iframe: ['asp', 'aspx', 'cgi', 'cfm', 'htm', 'html', 'jsp', 'pl', 'php', 'php3', 'php4', 'php5', 'phtml', 'rb', 'rhtml', 'shtml', 'txt', 'vbs'] }, fadeDuration: 0.35, // duration of the fading animations (seconds) navFadeDuration: 0.18, // duration of the fading animations when hiding navigation (seconds) /** * Parameters to pass to flash 's. */ flashParams: { bgcolor: '#000000', allowFullScreen: true }, flashVars: {}, // flash vars flashVersion: '9.0.115', // minimum required flash version suggested // by JW FLV player /** * How to handle content that is too large to display in its entirety * (and is resizable). A value of 'resize' will resize the content while * preserving aspect ratio and display it at the smaller resolution. If * the content is an image, a value of 'drag' will display the image at * its original resolution but it will be draggable within Shadowbox. A * value of 'none' will display the content at its original resolution * but it may be cropped. */ handleOversize: 'resize', /** * The mode to use when handling unsupported media. May be either * 'remove' or 'link'. If it is 'remove', the unsupported gallery item * will merely be removed from the gallery. If it is the only item in * the gallery, the link will simply be followed. If it is 'link', a * link will be provided to the appropriate plugin page in place of the * gallery element. */ handleUnsupported: 'link', initialHeight: 160, // initial height (pixels) initialWidth: 320, // initial width (pixels) language: 'en', // the language to use modal: false, // trigger Shadowbox.close() when overlay is // clicked onChange: null, // hook function to be fired when changing // from one item to the next. Is passed the // item that is about to be displayed onClose: null, // hook function to be fired when closing. // is passed the most recent item onFinish: null, // hook function to be fired when finished // loading content. Is passed current // gallery item onOpen: null, // hook function to be fired when opening. // is passed the current gallery item onPrint: null, // called before printing (this is bound to Shadowbox) // is passed any arguments of Shadowbox.print() call onDownload: null, // called before download (this is bound to Shadowbox) // is passed any arguments of Shadowbox.print() call overlayColor: '#000', // color to use for modal overlay overlayOpacity: 0.7, // opacity to use for modal overlay players: ['swf', 'img', 'flv', 'iframe', 'html', 'wmp', 'qt'], // the players to load /** * Set a default position and default size. * * @var Object * @public */ defaultDimensions: { top: null, left: null, minHeight: null, minWidth: null, maxHeight: null, // TODO: currently ignored maxWidth: null // TODO: currently ignored }, resizeDuration: 0.35, // duration of resizing animations (seconds) showOverlay: true, // show the overlay showMovieControls: true, // enable movie controls on movie players /** * A custom class of 'sb-mode-' will be appended to #sb-container * * @var String * @public */ skinMode: 'default', skipSetup: true, // skip calling Shadowbox.setup() during // shadowbox.init() slideshowDelay: 0, // delay to use for slideshows (seconds). If // set to any duration other than 0, is interval // at which slideshow will advance useSizzle: false, // use sizzle.js to support css selectors viewportPadding: 20 // amount of padding to maintain around the // edge of the viewport at all times (pixels) }, /** * Some simple browser detection variables. * * @var Object * @public */ client: { isIE: ua.indexOf('msie') > -1, isIE6: ua.indexOf('msie 6') > -1, isIE7: ua.indexOf('msie 7') > -1, isGecko: ua.indexOf('gecko') > -1 && ua.indexOf('safari') == -1, isWebkit: ua.indexOf('applewebkit/') > -1, isWindows: ua.indexOf('windows') > -1 || ua.indexOf('win32') > -1, isMac: ua.indexOf('macintosh') > -1 || ua.indexOf('mac os x') > -1, isLinux: ua.indexOf('linux') > -1 }, /** * An object containing some regular expressions we'll need later. Compiled * up front for speed. * * @var Object * @public */ regex: { domain: /:\/\/(.*?)[:\/]/, // domain prefix inline: /#(.+)$/, // inline element id rel: /^(light|shadow)box/i, // rel attribute format gallery: /^(light|shadow)box\[(.*?)\]/i, // rel attribute format for gallery link unsupported: /^unsupported-(\w+)/, // unsupported media type param: /\s*([a-z_]*?)\s*=\s*(.+)\s*/ // rel string parameter }, /** * A map of library object names to their corresponding Shadowbox adapter * names. * * @var Object * @public */ libraries: { Prototype: 'prototype', jQuery: 'jquery', MooTools: 'mootools', YAHOO: 'yui', dojo: 'dojo', Ext: 'ext' }, /** * Applies the given set of options to those currently in use. * * Note: Options will be reset on Shadowbox.open() so this function is * only useful after it has already been called (while Shadowbox is * open). * * @param Object opts The options to apply * @return void * @public */ applyOptions: function(opts){ if(opts){ // store defaults, use apply to break reference default_options = apply({}, S.options); apply(S.options, opts); } }, /** * Builds an object from the original link element data to store in cache. * These objects contain (most of) the following keys: * * - el: the link element * - title: the object's title * - player: the player to use for the object * - content: the object's URL * - gallery: the gallery the object belongs to (optional) * - height: the height of the object (only necessary for movies) * - width: the width of the object (only necessary for movies) * - options: custom options to use (optional) * * A custom set of options may be passed in here that will be applied when * this object is displayed. However, any options that are specified in * the link's HTML markup will trump options given here. * * @param HTMLElement link The link element to process * @param Object opts A set of options to use for the object * @return Object An object representing the link * @public */ buildCacheObj: function(link, opts){ var href = link.href, // don't use getAttribute() here obj = { el: link, title: link.getAttribute('title'), options: apply({}, opts || {}), content: href, description: S.lib.getDescription(link), printable: opts.printable === undefined || !!opts.printable }; // remove link-level options from top-level options each(['player', 'title', 'height', 'width', 'gallery', 'printable', 'download'], function(o){ if(typeof obj.options[o] != 'undefined'){ obj[o] = obj.options[o]; delete obj.options[o]; } }); if(!obj.player) obj.player = getPlayer(href); // HTML options always trump JavaScript options, so do these last var rel = link.getAttribute('rel'); if(rel){ // extract gallery name from shadowbox[name] format var m = rel.match(S.regex.gallery); if(m) obj.gallery = escape(m[2]); // other parameters each(rel.split(';'), function(p){ m = p.match(S.regex.param); if(m){ if(m[1] == 'options') eval('apply(obj.options,' + m[2] + ')'); else obj[m[1]] = m[2]; } }); } return obj; }, /** * Jumps to the piece in the current gallery with the given index. * * @param Number n The gallery index to view * @return void * @public */ change: function(n){ if(!S.gallery) return; // no current gallery if(!S.gallery[n]){ // index does not exist if(!S.options.continuous){ return; }else{ n = n < 0 ? S.gallery.length - 1 : 0; // loop } } // update current S.current = n; if(typeof slide_timer == 'number'){ clearTimeout(slide_timer); slide_timer = null; slide_delay = slide_start = 0; // reset slideshow variables } if(S.options.onChange) S.options.onChange(); loadContent(); }, /** * Removes all onclick listeners from elements that have been setup with * Shadowbox and clears all objects from cache. * * @return void * @public */ clearCache: function(){ each(S.cache, function(obj){ if(obj.el) S.lib.removeEvent(obj.el, 'click', handleClick); }); S.cache = []; }, /** * Deactivates Shadowbox. * * @return void * @public */ close: function(){ if(!active) return; // already closed active = false; listenKeys(false); // remove the content if(S.content){ S.content.remove(); S.content = null; } // clear slideshow variables if(typeof slide_timer == 'number') clearTimeout(slide_timer); slide_timer = null; slide_delay = 0; if(S.options.onClose) S.options.onClose(); S.skin.onClose(); S.revertOptions(); // reset troublesome elements to stored visibility settings each(v_cache, function(c){ c[0].style.visibility = c[1]; }); }, /** * Gets the id that should be used for content elements. * * @return String The content element id * @public */ contentId: function(){ return content_id; }, /** * Gets the values that should appear in the counter (if the skin * supports counters). If a "skip" style counter is used, the return * value should be an array of all counter indexes that should be * displayed. If the "default" counter is used, the return value will * be a simple "1 of 5" message as a string. The skin can use the return * type to determine how to build the counter. * * @return mixed The counter as described above * @public */ getCounter: function(){ var len = S.gallery.length; if(S.options.counterType == 'skip'){ // limit the counter? var c = [], i = 0, end = len, limit = parseInt(S.options.counterLimit) || 0; if(limit < len && limit > 2){ // support large galleries var h = Math.floor(limit / 2); i = S.current - h; if(i < 0) i += len; end = S.current + (limit - h); if(end > len) end -= len; } while(i != end){ if(i == len) i = 0; c.push(i++); } }else var data = [S.current + 1, len] var c = S.lang[S.options.language].of.replace(/\{(\d+)\}/g, function(m, n){ return data[n]; }); return c; }, /** * Gets the current gallery object. * * @return Object The current gallery item * @public */ getCurrent: function(){ return S.current > -1 ? S.gallery[S.current] : null; }, /** * Determines if there is a next piece to display in the current * gallery. * * @return Boolean True if there is another piece * @public */ hasNext: function(){ return S.gallery.length > 1 && (S.current != S.gallery.length - 1 || S.options.continuous); }, /** * Initializes the Shadowbox environment. Should be called by the user in * the of the HTML document. * * Note: This function attempts to load all Shadowbox dependencies * dynamically using document.write. However, if these dependencies are * already included, they won't be loaded again. * * @param Object opts (optional) The default options to use * @return void * @public */ init: function(opts){ if(initialized) return; // don't initialize twice initialized = true; opts = opts || {}; init_options = opts; // apply options if(opts) apply(S.options, opts); // compile file type regular expressions here for speed for(var e in S.options.ext) S.regex[e] = new RegExp('\.(' + S.options.ext[e].join('|') + ')\s*$', 'i'); if(!S.path){ // determine script path automatically var path_re = /(.+)shadowbox\.js/i, path; each(document.getElementsByTagName('script'), function(s){ if((path = path_re.exec(s.src)) != null){ S.path = path[1]; return false; } }); } // load skin if (!S.skin) { U.include(S.path + 'shadowbox-skin.js'); } // determine adapter if(S.options.adapter) S.adapter = S.options.adapter; else{ for(var lib in S.libraries){ if(typeof window[lib] != 'undefined'){ S.adapter = S.libraries[lib]; break; } } if(!S.adapter) S.adapter = 'base'; } // load dependencies if(S.options.useSizzle && !window['Sizzle']) U.include(S.path + 'libraries/sizzle/sizzle.js'); if(!S.lang[S.options.language]) U.include(S.path + 'languages/shadowbox-' + S.options.language + '.js'); each(S.options.players, function(p){ if((p == 'swf' || p == 'flv') && !window['swfobject']) U.include(S.path + 'libraries/swfobject/swfobject.js'); if(!S[p]) U.include(S.path + 'players/shadowbox-' + p + '.js'); }); if(!S.lib) U.include(S.path + 'adapters/shadowbox-' + S.adapter + '.js'); }, /** * Tells whether or not Shadowbox is currently activated. * * @return Boolean True if activated, false otherwise * @public */ isActive: function(){ return active; }, /** * Tells whether or not Shadowbox is currently in the middle of a * slideshow in a paused state. * * @return Boolean True if paused, false otherwise * @public */ isPaused: function(){ return slide_timer == 'paused'; }, /** * Loads Shadowbox into the DOM. Is called automatically by each adapter * as soon as the DOM is ready. * * @return void * @public */ load: function(){ // apply skin options, re-apply user init options in case they overwrite if(S.skin.options){ apply(S.options, S.skin.options); apply(S.options, init_options); } S.skin.init(S.lang[S.options.language]); // set up window resize event handler var id; S.lib.addEvent(window, 'resize', function(){ // use 50 ms event buffering to prevent jerky window resizing if(id){ clearTimeout(id); id = null; } // check if activated because IE7 fires window resize event // when container display is set to block if(active){ id = setTimeout(function(){ if(S.skin.onWindowResize) S.skin.onWindowResize(); var c = S.content; if(c && c.onWindowResize) c.onWindowResize(); }, 50); } }); if(!S.options.skipSetup) S.setup(); }, /** * Jumps to the next piece in the gallery. * * @return void * @public */ next: function(){ S.change(S.current + 1); }, /** * Opens the given object in Shadowbox. This object may be either an * anchor/area element, or an object similar to the one created by * Shadowbox.buildCacheObj(). * * @param mixed obj The object or link element that defines * what to display * @return void * @public */ open: function(obj){ // if it's a link element, build an object on the fly if(U.isLink(obj)) obj = S.buildCacheObj(obj); // set up the gallery if(obj.constructor == Array){ S.gallery = obj; S.current = 0; }else{ if(!obj.gallery){ // single item, no gallery S.gallery = [obj]; S.current = 0; }else{ // gallery item, build gallery from cached gallery elements S.current = null; S.gallery = []; each(S.cache, function(c){ if(c.gallery && c.gallery == obj.gallery){ if(S.current == null && c.content == obj.content && c.title == obj.title) S.current = S.gallery.length; S.gallery.push(c); } }); // if not found in cache, prepend to front of gallery if(S.current == null){ S.gallery.unshift(obj); S.current = 0; } } } obj = S.getCurrent(); if(obj.options){ S.revertOptions(); S.applyOptions(obj.options); } // filter gallery for unsupported elements var g, r, m, s, a, oe = S.options.errors, msg, el; for(var i = 0; i < S.gallery.length; ++i){ // use apply to break the reference to the original object here // because we'll be modifying the properties of the gallery objects // directly and we don't want to taint them in case they are used // again in a future call g = S.gallery[i] = apply({}, S.gallery[i]); r = false; // remove the element? if(g.player == 'unsupported'){ // don't support this at all r = true; }else if(m = S.regex.unsupported.exec(g.player)){ // handle unsupported elements if(S.options.handleUnsupported == 'link'){ g.player = 'html'; // generate a link to the appropriate plugin download page(s) switch(m[1]){ case 'qtwmp': s = 'either'; a = [oe.qt.url, oe.qt.name, oe.wmp.url, oe.wmp.name]; break; case 'qtf4m': s = 'shared'; a = [oe.qt.url, oe.qt.name, oe.f4m.url, oe.f4m.name]; break; default: s = 'single'; if(m[1] == 'swf' || m[1] == 'flv') m[1] = 'fla'; a = [oe[m[1]].url, oe[m[1]].name]; } msg = S.lang[S.options.language].errors[s].replace(/\{(\d+)\}/g, function(m, n){ return a[n]; }); g.content = '
' + msg + '
'; }else r = true; }else if(g.player == 'inline'){ // inline element, retrieve innerHTML m = S.regex.inline.exec(g.content); if(m){ var el = U.get(m[1]); if(el) { g.htmlContentOriginId = m[1]; g.content = el.innerHTML; } else throw 'Cannot find element with id ' + m[1]; }else throw 'Cannot find element id for inline content'; }else if(g.player == 'swf' || g.player == 'flv'){ var version = (g.options && g.options.flashVersion) || S.options.flashVersion; if(!swfobject.hasFlashPlayerVersion(version)){ // express install will be triggered because the client // does not have the minimum required version of flash // installed, set height and width to those of express // install swf g.width = 310; // minimum height is 127, but +20 pixels on top and bottom // looks better g.height = 177; } } if(r){ S.gallery.splice(i, 1); // remove from gallery if(i < S.current) --S.current; // maintain integrity of S.current else if(i == S.current) S.current = i > 0 ? i - 1 : i; // look for supported neighbor --i; // decrement index for next loop } } // anything left to display? if(S.gallery.length){ if(!active){ // fire onOpen hook if(typeof S.options.onOpen == 'function' && S.options.onOpen(obj) === false) return; // hide elements troublesome for modal overlays v_cache = []; each(['select', 'object', 'embed', 'canvas'], function(tag){ each(document.getElementsByTagName(tag), function(el){ v_cache.push([el, el.style.visibility || 'visible']); el.style.visibility = 'hidden'; }); }); // set initial dimensions & load var h = S.options.autoDimensions && 'height' in obj ? obj.height : S.options.initialHeight; var w = S.options.autoDimensions && 'width' in obj ? obj.width : S.options.initialWidth; S.skin.onOpen(h, w, loadContent); }else loadContent(); active = true; } }, /** * Pauses the current slideshow. * * @return void * @public */ pause: function(){ if(typeof slide_timer != 'number') return; var time = new Date().getTime(); slide_delay = Math.max(0, slide_delay - (time - slide_start)); // if there's any time left on current slide, pause the timer if(slide_delay){ clearTimeout(slide_timer); slide_timer = 'paused'; if(S.skin.onPause) S.skin.onPause(); } }, /** * Sets the timer for the next image in the slideshow to be displayed. * * @return void * @public */ play: function(){ if(!S.hasNext()) return; if(!slide_delay) slide_delay = S.options.slideshowDelay * 1000; if(slide_delay){ slide_start = new Date().getTime(); slide_timer = setTimeout(function(){ slide_delay = slide_start = 0; // reset slideshow S.next(); }, slide_delay); if(S.skin.onPlay) S.skin.onPlay(); } }, /** * Jumps to the previous piece in the gallery. * * @return void * @public */ previous: function(){ S.change(S.current - 1); }, /** * Reverts Shadowbox' options to the last default set in use before * Shadowbox.applyOptions() was called. * * @return void * @public */ revertOptions: function(){ apply(S.options, default_options); }, /** * Calculates the dimensions for Shadowbox according to the given * parameters. Will determine if content is oversized (too large for the * viewport) and will automatically constrain resizable content * according to user preference. * See options.defaultDimensions for the possibility of defining default dimensions. * * @param Number height The content height * @param Number width The content width * @param Number max_h The maximum height available (should * be the height of the viewport) * @param Number max_w The maximum width available (should * be the width of the viewport) * @param Number tb The extra top/bottom pixels that are * required for borders/toolbars * @param Number lr The extra left/right pixels that are * required for borders/toolbars * @param Boolean resizable True if the content is able to be * resized. Defaults to false * @return Object The Shadowbox.dimensions object * @public */ getDimensions: function(height, width, max_h, max_w, tb, lr, resizable){ var h = height = parseInt(height), w = width = parseInt(width), pad = parseInt(S.options.viewportPadding) || 0; // if options.defaultDimensions is set, override calculated size var ratio = w / h; var minHeight = this.options.defaultDimensions.minHeight || 0, minWidth = this.options.defaultDimensions.minWidth || 0; var prevent_resize = !!(minHeight || minWidth); // calculate the max height var extra_h = 2 * pad + tb; if(h + extra_h >= max_h) h = max_h - extra_h; h = Math.max(minHeight, h); // calculate the max width var extra_w = 2 * pad + lr; if(w + extra_w >= max_w) w = max_w - extra_w; w = Math.max(minWidth, w); // handle oversized content var resize_h = height, resize_w = width, change_h = (height - h) / height, change_w = (width - w) / width, oversized = (change_h > 0 || change_w > 0); if(!prevent_resize && resizable && oversized && S.options.handleOversize == 'resize'){ // adjust resized height/width, preserve original aspect ratio if(change_h > change_w) w = Math.round((width / height) * h); else if(change_w > change_h) h = Math.round((height / width) * w); resize_w = w; resize_h = h; } // shadowbox dimensions var sb_height = h + tb, sb_width = w + lr; // set top position, use default if set var top = (max_h - (h + extra_h)) / 2 + pad; if (this.options.defaultDimensions.top && this.options.defaultDimensions.top + h + extra_h < max_h) { top = this.options.defaultDimensions.top; } top = Math.max(0, top); // set left position, use default if set var left = (max_w - (w + extra_w)) / 2 + pad; if (this.options.defaultDimensions.left && this.options.defaultDimensions.left + w + extra_w < max_w) { left = this.options.defaultDimensions.left; } left = Math.max(0, left); // position of inner content if its wrapper is larger var content_left = Math.max(0, (w - resize_w) /2), content_top = Math.max(0, (h - resize_h) /2); // update Shadowbox.dimensions var dimensions = { height: sb_height, width: sb_width, inner_h: h, inner_w: w, content_left: content_left, content_top: content_top, top: top, left: left, oversized: oversized, resize_h: resize_h, resize_w: resize_w, greater_dim: ratio > 1 ? 'width' : 'height' }; return dimensions; }, /** * Sets Shadowbox.dimensions to the dimensions calculated by * Shadowbox.getDimensions and returns them. * * See Shadowbox.getDimensions for signature. * * @return Object The Shadowbox.dimensions object * @public */ setDimensions: function() { return this.dimensions = this.getDimensions.apply(this, arguments); }, /** * Sets up listeners on the given links that will trigger Shadowbox. If no * links are given, this method will set up every anchor element on the page * with the appropriate rel attribute. It is important to note that any * options given here will be applied to all link elements. Multiple calls * to this method may be needed if different options are desired. * * Note: Because AREA elements do not support the rel attribute, they must * be explicitly passed to this method. * * @param Array links An array (or array-like) list of anchor * and/or area elements to set up * @param Object opts Some options to use for the given links * @return void * @public */ setup: function(links, opts){ // get links if none specified if(!links){ var links = [], rel; each(document.getElementsByTagName('a'), function(a){ rel = a.getAttribute('rel'); if(rel && S.regex.rel.test(rel)) links.push(a); }); }else{ var len = links.length; if(len){ if(window['Sizzle']){ if(typeof links == 'string') links = Sizzle(links); // lone selector else if(len == 2 && links.push && typeof links[0] == 'string' && links[1].nodeType) links = Sizzle(links[0], links[1]); // selector + context } }else links = [links]; // single link } each(links, function(link){ if(typeof link.shadowboxCacheKey == 'undefined'){ // assign cache key expando, use integer primitive to avoid // memory leak in IE link.shadowboxCacheKey = S.cache.length; // add onclick listener S.lib.addEvent(link, 'click', handleClick); } S.cache[link.shadowboxCacheKey] = S.buildCacheObj(link, opts); }); }, /** * Prints current content. * * @return void */ print: function () { if (this.content.obj.printable === false) { return false; } if (this.options.onPrint && false === this.options.onPrint.apply(this, arguments)) { return false; } switch (this.content.obj.player) { case 'iframe': try { U.get(this.content.id).contentWindow.print(); } catch (ex) { window.print(); } break; default: window.print(); break; } return true; }, /** * Starts a download-link for the current content. * * @return void */ download: function () { if (this.options.onDownload && false === this.options.onDownload.apply(this, arguments)) { return false; } else { if (this.content.obj.download) { location = this.options.downloadScript.replace(/\{0\}/g, this.content.obj.download); return true; } } return false; } }, U = S.util = { /** * Animates any numeric (not color) style of the given element from its * current state to the given value. Defaults to using pixel-based * measurements. * * @param HTMLElement el The element to animate * @param String p The property to animate (in camelCase) * @param mixed to The value to animate to * @param Number d The duration of the animation (in * seconds) * @param Function cb A callback function to call when the * animation completes * @return void * @public */ animate: function(el, p, to, d, cb){ var from = parseFloat(S.lib.getStyle(el, p)); if(isNaN(from)) from = 0; var delta = to - from; if(delta == 0){ if(cb) cb(); return; // nothing to animate } var op = p == 'opacity'; function fn(ease){ var to = from + ease * delta; if(op) U.setOpacity(el, to); else el.style[p] = to + 'px'; // default unit is px } // cancel the animation here if duration is 0 or if set in the options if(!d || (!op && !S.options.animate) || (op && !S.options.animateFade)){ fn(1); if(cb) cb(); return; } d *= 1000; // convert to milliseconds var begin = new Date().getTime(), end = begin + d, time, timer = setInterval(function(){ time = new Date().getTime(); if(time >= end){ // end of animation clearInterval(timer); fn(1); if(cb) cb(); }else fn(S.options.ease((time - begin) / d)); }, 10); // 10 ms interval is minimum on webkit }, /** * Applies all properties of e to o. * * @param Object o The original object * @param Object e The extension object * @return Object The original object with all properties * of the extension object applied * @public */ apply: function(o, e){ for(var p in e) o[p] = e[p]; return o; }, /** * A utility function used by the fade functions to clear the opacity * style setting of the given element. Required in some cases for IE. * * @param HTMLElement el The element * @return void * @public */ clearOpacity: function(el){ var s = el.style; if(window.ActiveXObject){ // be careful not to overwrite other filters! if(typeof s.filter == 'string' && (/alpha/i).test(s.filter)) s.filter = s.filter.replace(/[\w\.]*alpha\(.*?\);?/i, ''); }else s.opacity = ''; }, /** * Calls the given function for each element of obj. The obj element must * be array-like (meaning it must have a length property and be able to * be accessed using the array square bracket syntax). If scope is not * explicitly given, the callback will be called with a scope of the * current item. Will stop execution if a callback returns false. * * @param mixed obj An array-like object containing the * elements * @param Function fn The callback function * @param mixed scope The scope of the callback * @return void * @public */ each: function(obj, fn, scope){ for(var i = 0, len = obj.length; i < len; ++i) if(fn.call(scope || obj[i], obj[i], i, obj) === false) return; }, /** * Gets an element by its id. * * @param String id The element id * @return HTMLElement A reference to the element with the * given id * @public */ get: function(id){ return document.getElementById(id); }, /** * Dynamically includes a JavaScript file in the current page. * * @param String file The name of the js file to include * @return void * @public */ include: function(){ var includes = {}; return function(file){ if(includes[file]) return; // don't include same file twice includes[file] = true; document.write('<\/script>'); } }(), /** * Determines if the given object is an anchor/area element. * * @param mixed obj The object to check * @return Boolean True if the object is a link element * @public */ isLink: function(obj){ if(!obj || !obj.tagName) return false; var up = obj.tagName.toUpperCase(); return up == 'A' || up == 'AREA'; }, /** * Removes all child nodes from the given element. * * @param HTMLElement el The element * @return void * @public */ removeChildren: function(el){ while(el.firstChild) el.removeChild(el.firstChild); }, /** * Sets the opacity of the given element to the specified level. * * @param HTMLElement el The element * @param Number o The opacity to use * @return void * @public */ setOpacity: function(el, o){ var s = el.style; if(window.ActiveXObject){ s.zoom = 1; // trigger hasLayout s.filter = (s.filter || '').replace(/\s*alpha\([^\)]*\)/gi, '') + (o == 1 ? '' : ' alpha(opacity=' + (o * 100) + ')'); }else s.opacity = o; } }, // shorthand apply = U.apply, each = U.each, /** * The initial options object that was given by the user. * * @var Object * @private */ init_options, /** * Keeps track of whether or not Shadowbox.init has been called. * * @var Boolean * @private */ initialized = false, /** * Stores the default set of options in case a custom set of options is used * on a link-by-link basis so we can restore them later. * * @var Object * @private */ default_options = {}, /** * The id to use for content objects. * * @var String * @private */ content_id = 'sb-content', /** * Keeps track of whether or not Shadowbox is activated. * * @var Boolean * @private */ active = false, /** * The timeout id for the slideshow transition function. * * @var Number * @private */ slide_timer, /** * Keeps track of the time at which the current slideshow frame was * displayed. * * @var Number * @private */ slide_start, /** * The delay on which the next slide will display. * * @var Number * @private */ slide_delay = 0, /** * A cache for elements that are troublesome for modal overlays. * * @var Array * @private */ v_cache = []; // detect plugin support if(navigator.plugins && navigator.plugins.length){ var names = []; each(navigator.plugins, function(p){ names.push(p.name); }); names = names.join(); var detectPlugin = function(n){ return names.indexOf(n) > -1; } var f4m = detectPlugin('Flip4Mac'); S.plugins = { fla: detectPlugin('Shockwave Flash'), qt: detectPlugin('QuickTime'), wmp: !f4m && detectPlugin('Windows Media'), // if it's Flip4Mac, it's not really WMP f4m: f4m } }else{ function detectPlugin(n){ try{ var axo = new ActiveXObject(n); }catch(e){} return !!axo; } S.plugins = { fla: detectPlugin('ShockwaveFlash.ShockwaveFlash'), qt: detectPlugin('QuickTime.QuickTime'), wmp: detectPlugin('wmplayer.ocx'), f4m: false } } /** * Determines the player needed to display the file at the given URL. If * the file type is not supported, the return value will be 'unsupported'. * If the file type is not supported but the correct player can be * determined, the return value will be 'unsupported-*' where * will be the * player abbreviation (e.g. 'qt' = QuickTime). * * @param String url The url of the file * @return String The name of the player to use * @private */ function getPlayer(url){ var re = S.regex, p = S.plugins, m = url.match(re.domain), d = m && document.domain == m[1]; // same domain if(url.indexOf('#') > -1 && d) return 'inline'; var q = url.indexOf('?'); if(q > -1) url = url.substring(0, q); // strip query string for player detection purposes if(re.img.test(url)) return 'img'; if(re.swf.test(url)) return p.fla ? 'swf' : 'unsupported-swf'; if(re.flv.test(url)) return p.fla ? 'flv' : 'unsupported-flv'; if(re.qt.test(url)) return p.qt ? 'qt' : 'unsupported-qt'; if(re.wmp.test(url)){ if(p.wmp) return 'wmp'; if(p.f4m) return 'qt'; if(S.client.isMac) return p.qt ? 'unsupported-f4m' : 'unsupported-qtf4m'; return 'unsupported-wmp'; } if(re.qtwmp.test(url)){ if(p.qt) return 'qt'; if(p.wmp) return 'wmp'; return S.client.isMac ? 'unsupported-qt' : 'unsupported-qtwmp'; } if(!d || re.iframe.test(url)) return 'iframe'; return 'unsupported'; // same domain, not supported } /** * Handles all clicks on links that have been set up to work with Shadowbox * and cancels the default event behavior when appropriate. * * @param HTMLEvent e The click event object * @return void * @private */ function handleClick(e){ // get anchor/area element var link; if(U.isLink(this)){ link = this; // jQuery, Prototype, YUI }else{ link = S.lib.getTarget(e); // Ext, standalone while(!U.isLink(link) && link.parentNode) link = link.parentNode; } //S.lib.preventDefault(e); // good for debugging if(link){ // if this link has already been set up, use the cached version var key = link.shadowboxCacheKey; if(typeof key != 'undefined' && typeof S.cache[key] != 'undefined') link = S.cache[key]; S.open(link); if(S.gallery.length) S.lib.preventDefault(e); // stop event } } /** * Sets up a listener on the document for keystrokes. * * @param Boolean on True to enable the listener, false to turn * it off * @return void * @private */ function listenKeys(on){ if(!S.options.enableKeys) return; S.lib[(on ? 'add' : 'remove') + 'Event'](document, 'keydown', handleKey); } /** * A listener function that is fired when a key is pressed. * * @param mixed e The event object * @return void * @private */ function handleKey(e){ var code = S.lib.keyCode(e); // attempt to prevent default key action S.lib.preventDefault(e); switch(code){ case 81: // q case 88: // x case 27: // esc S.close(); break; case 37: // left S.previous(); break; case 39: // right S.next(); break; case 32: // space S[(typeof slide_timer == 'number' ? 'pause' : 'play')](); } } /** * Loads the Shadowbox with the current piece. * * @return void * @private */ function loadContent(){ var obj = S.getCurrent(); if(!obj) return; // determine player, inline is really just HTML var p = obj.player == 'inline' ? 'html' : obj.player; if(typeof S[p] != 'function') throw 'Unknown player: ' + p; var change = false; if(S.content){ // changing from some previous content S.content.remove(); // remove old content change = true; S.revertOptions(); if(obj.options) S.applyOptions(obj.options); } // make sure the body element doesn't have any children, just in case U.removeChildren(S.skin.bodyEl()); // load the content S.content = new S[p](obj); listenKeys(false); // disable the keyboard while content is loading S.skin.onLoad(S.content, change, function(){ if(!S.content) return; if(typeof S.content.ready != 'undefined'){ // if content object has a ready property, wait for it to be // ready before loading var id = setInterval(function(){ if(S.content){ if(S.content.ready){ clearInterval(id); id = null; S.skin.onReady(contentReady); } }else{ // content has been removed clearInterval(id); id = null; } }, 100); }else S.skin.onReady(contentReady); }); // preload neighboring gallery images if(S.gallery.length > 1){ var next = S.gallery[S.current + 1] || S.gallery[0]; if(next.player == 'img'){ var a = new Image(); a.src = next.content; } var prev = S.gallery[S.current - 1] || S.gallery[S.gallery.length - 1]; if(prev.player == 'img'){ var b = new Image(); b.src = prev.content; } } } /** * Callback that should be called with the content is ready to be loaded. * * @return void * @private */ function contentReady(){ if(!S.content) return; S.content.append(S.skin.bodyEl(), content_id, S.dimensions); S.skin.onFinish(finishContent); } /** * Callback that should be called when the content is finished loading. * * @return void * @private */ function finishContent(){ if(!S.content) return; if(S.content.onLoad) S.content.onLoad(); if(S.options.onFinish) S.options.onFinish(); if(!S.isPaused()) S.play(); // kick off next slide listenKeys(true); // re-enable keyboard when finished } return S; }();