/*!
* jQuery UI AriaLightbox (12.08.10)
* http://github.com/fnagel/jQuery-Accessible-RIA
*
* Copyright (c) 2009 Felix Nagel for Namics (Deustchland) GmbH
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*
* Depends: ui.core.js 1.8
*/
/*
USAGE:::::::::::::
* Take a look in the html file or the (german) pdf file delivered with this example
* The widget gets all the elements in the document which matches choosen selector
* There are to modes: singleview and galleryview defined with imageArray: []
* Options
imageArray: activates galleryview of set to imageArray: []
altText: which attr (within the image) as alt attr
descText: which attr (within the image) as description text
prevText: text on the button
nextText: see above
titleText: titleText of the lightbox
pictureText: string: picture
ofText: string: of
closeText: string: close element
pos: position of the lightbox, possbible values: auto, offset, or [x,y] (like pos: "100,300")
autoHeight: margin to top when pos: auto is used
offsetX: number: if pos:"offset" its the distance betwen lightbox and mousclick position
offsetY: see above
disableWidth: min width of the screen (otherwise widget is disabled)
disableHeight: max width of the screen
useDimmer: boolean, activate or deactivate dimmer
animationSpeed: in millseconds or jQuery keywors aka "slow", "fast"
zIndex: number: z-index for overlay elements
background: color in HTML notation
opacity: decimal betwen 1-0
makeHover: deactivate hover events for images
em: muliplicator for relative width (em) calculation, normally not to be edited
jqAddress You need to add the add the jQuery Address file, please see demo file!
enable enable browser history support
title
enable enable title change
split set delimiter string
* Callbacks
onShow
onChangePicture
onClose
onPrev
onNext
* public Methods
startGallery parameter: event
close
next
prev
disable
enable
disable
destroy
*/
(function($) {
$.widget("ui.ariaLightbox", {
version: '1.8',
options: {
// text strings
altText: function() {
// $(this) is the triggered element (in this case the link element)
return $(this).find("img").attr("alt");
},
descText: function() {
return $(this).find("img").attr("title");
},
prevText: "previous picture",
nextText: "next picture",
titleText: "Lightbox",
pictureText: "Picture",
ofText: "of",
closeText: "Close [ESC]",
// positioning
pos: "auto",
autoHeight: 50,
offsetX: 10,
offsetY: 10,
// disable lightbox if screens below:
disableWidth: 550,
disableHeight: 550,
// config screen dimmer
useDimmer: true,
animationSpeed: "slow",
zIndex: 1000,
background: "black",
opacity: 0.8,
// misc
makeHover: true,
em: 0.0568182,
// don not alter this var
activeImage: 0,
// jQuery Address
jqAddress: {
enable: true,
title: {
enable: true,
split: ' | '
}
}
},
_create: function() {
var options = this.options, self = this;
// save all elements if its a gallery
if (options.imageArray) {
options.selector = options.imageArray;
options.imageArray = self.element.find(options.imageArray);
// make hover
if (options.makeHover) options.imageArray.each(function() { self._makeHover($(this)); });
} else {
// make hover
if (options.makeHover) self._makeHover(self.element);
}
// add jQuery Address stuff
if ($.address && options.jqAddress.enable) {
$.address.externalChange(function(event) {
// Select the proper picture
if (event.value == "" && options.wrapperElement) self.close();
// gallery mode
else if (options.imageArray) {
for (var x = 0; x < options.imageArray.length; x++) {
if ($(options.imageArray[x]).attr("href") == event.value) {
options.activeImage = x;
// no second argument as there is no mouse click event
self._open($(options.imageArray[x]));
self._setButtonState();
return;
}
}
// single mode
} else {
// no second argument as there is no mouse click event
if (self.element.attr("href") == event.value) self._open(self.element);
}
});
}
// set trigger event
self.element.click(function (event) {
// single image?
if (!options.imageArray) {
return self._open($(this), event);
} else {
// get the a tag with our selector within the choosen context
target = $(event.target).closest(options.selector, self.element);
if (target.length) {
// set active element if gallery mode is activated
options.activeImage = options.imageArray.index(target);
return self._open(target, event);
}
}
});
// only set resize event when lightbox is activated
if (options.useDimmer)
$(window).resize(function(){
if (!options.disabled) self._dimmerResize();
});
},
// call gallery from link
startGallery: function (event, index){
index = (index) ? index : 0;
this.options.activeImage = index;
return this._open($(this.options.imageArray[index]), event);
},
// check if lightbox is already opened
_open: function (element, event){
var options = this.options, self = this;
// only activate when widget isnt disabled and screen isn't to small
if (!options.disabled && $(window).width()-options.disableWidth > 0 && $(window).height()-options.disableHeight > 0) {
// save clicked element (needed if lightbox is controlled by keyboard only)
if (!options.imageArray && event) options.clickedElement = event.currentTarget;
else options.clickedElement = element;
// if wrapper element isnt found, create it
options.wrapperElement = $("body>div#ui-lightbox-wrapper");
if(!options.wrapperElement.length) self._show(element, event);
else self._changePicture(element, event);
return false; // do not follow link
}
return true;
},
// called if lightbox wrapper element is not injected yet
_show: function (element, event){
var options = this.options, self = this;
// build html
var html = "\n";
html += '