/************************* LIGHTBOX author: Andy Croxall (mitya@mitya.co.uk) OVERVIEW: CSS-indepedent, jQuery-powered lightbox script and supporting functions to centre the element being showcased and also a function which replaces JS's default alert()/confirm() functions with one which uses the lightbox script. DESCRIPTION & USAGE: LIGHTBOX Builds and handles lightbox. Should be run as a method of the element you want to showcase, e.g. $('#myimage').lightbox(); Lightbox is built and prepared quietly when page loads If run on #lightbox, i.e. $('#lightbox').lightbox(), or $.prototype.lightbox.doHide() called, the lightbox hides. Lightbox also closes on click on lightbox itself (excluding central element), or on click of any elements in centralElement that is a button or has .close. You can prevent buttons from closing the LB if you need to by giving them 'noLBClose' as a class or rel. $.prototype.lightbox.doHide() can receive 2 args - noFade (bool) and callback (func). noFade, if true, hides lightbox simply, no fade. Lightbox is styled here - no dependency on CSS rules. Obviously the central element is not styled here - should be done in CSS. CENTREELEMENT FUNC Used by the lightbox to centre the element being showcased, but can be used independently of lightbox. Defined on the jQuery prototype, so just run it on the element(s) you want to centre, e.g. $('.myClass').centreElement(). Expects 3 args, all optional: - horiz: centre on X axis (default: true) - vert: centre on Y axis (default: true) - justReturnValues: if true, returns the potential left/top coords of the element(s) were they centred, but doesn't actually centre them. Returns as an array [left, top], without 'px'. (Default: false) Note: for purposes of assured positioning, func lifts the element(s) out of the DOM and replaces them as first children of the body. Centres on both axies by default, though you can stipulate just one by passing horizontally and or vertically depending on args (both true by default) LBDIALOG FUNC Lightbox-using replacement for JS's in-built alert()/confirm() functions. Expects 3 args, only the first of which is required: - content: the html to display in the dialog box - OKButton: a right button will be put out whether you pass this or not, but this allows you to tailor it. An object containing sub options including - text: the text to display on the button (default: 'OK') - callback: a function to be called onclick - noLBClose: if passed, lightbox won't close when button is clicked (useful if callback send user to another page, therefore no point killing lightbox) - cancelButton: as with rightButton, but this acts as your negative button in the event you want the dialog to act as a confirm(), not alert() - css: an optional of CSS pairings to further style your alert - error: if true, a red heading saying 'error' will appear above your message, saving you the trouble of coding it in @content - success: as with error, but a green 'success' header instead Note: if wanting confirm() not alert(), be sure to pass cancelButton, otherwise only the OK button will be put out, and the dialog will be an alert. Note: onclick, buttons will effect any callbacks passed but also close the lightbox, unless 'noLBClose' is passed in their params object Note: evaluates integrity of passed params at start and won't run if invalid args passed *************************/ //prep var ie6 = navigator.appVersion.match(/MSIE 6\.0/); //build lightbox onload $(document).ready(function() { //build var lightboxDiv = document.createElement('div'); lightboxDiv.id = 'lightbox'; $(lightboxDiv).click(function() { $(this).lightbox(); }); document.body.insertBefore(lightboxDiv, document.body.childNodes[0]); //style it (doing it here means the script is portable, don't need to tell users to add rules to their CSS sheets) $('#lightbox').css({opacity: 1, opacity: .6, filter: 'alpha(opacity=60)', width: '100%', height: !ie6 ? '100%' : '1000px', background: '#444', position: 'absolute', left: 0, top: 0, zIndex: 100, display: 'none'}); //on scroll, silently reposition LB, even if hidden, so its position takes into account page scroll pos $(window).scroll($.prototype.lightbox.snapToScrollPos) }); //func for handling it $.prototype.lightbox = function(noFade) { //prep var ac = arguments.callee; var centralElement = this.get(0); try { if (ie6) $('select').css('visibility', 'hidden'); } catch(e) {} //as well as closing the lightbox when clicking outside of the central element, also close if any