/** * Create a lightbox for a given set of images. * * The `ep.uiLightbox()` method creates a lightbox for a given set of images. The lightbox shows the images * in a seperate dialog. * * ### Examples * Create a simple lightbox. * * JavaScript: * * ep('#images') * .uiLightbox({ * images : '#images img', * controls : 'visible', * caption : true, * count : true, * thumbs : true, * closeOnEscape : true, * closeOnClickOut : true * }); * * HTML: * * <ul id="images"> * <li> * <img * alt="Bild 1" * src="ep/ui/lightboxTest_Image1.jpg" * data-src-m="ep/ui/lightboxTest_Image1.jpg" * data-src-l="ep/ui/lightboxTest_Image1.jpg" * /> * </li> * <li> * <img * alt="Bild 2" * src="ep/ui/lightboxTest_Image2.jpg" * data-src-m="ep/ui/lightboxTest_Image2.jpg" * data-src-l="ep/ui/lightboxTest_Image2.jpg" * /> * </li> * <li> * <img * alt="Bild 3" * src="ep/ui/lightboxTest_Image1.jpg" * data-src-m="ep/ui/lightboxTest_Image1.jpg" * data-src-l="ep/ui/lightboxTest_Image1.jpg" * /> * </li> * </ul> * * * @class jQuery.ui.uiLightbox * @extends jQuery.widget * * @uses ep.ui.core * @uses jQuery.fn.size * @uses jQuery.ui.widget * @uses ep.ui.dialog * @uses ep.ui.slides * @uses ep.ui.thumbbox * @since 6.14.0 */ /** * @cfg {String} images A set of images which will be displayed. */ /** * @cfg {String} effect The change over effect. */ /** * @cfg {String} controls The way the controls will be displayed (auto / visible / hidden). */ /** * @cfg {Boolean} caption A boolean indication wether to show the caption of the images. */ /** * @cfg {Boolean} count A boolean indication wether to show the count of the images like (i of n). */ /** * @cfg {Boolean} thumbs A boolean indication wether to show thumbnails inside the lightbox. */ /** * @cfg {Boolean} closeOnEscape A boolean indication wether to close the lightbox by pressing the escape button. */ /** * @cfg {Boolean} closeOnClickOut A boolean indication wether to close the lightbox by clicking outside of the dialog. */ /** * @cfg {String} defaultSize The default size of images used for the slides widget. */ /** * See `jQuery.ui.uiLightbox` for details. * * @param {Object} options A map of additional options pass to the method. * @param {String} images A set of images which will be displayed. * @param {String} effect The change over effect. * @param {String} controls The way the controls will be displayed (auto / visible / hidden). * @param {Boolean} caption A boolean indication wether to show the caption of the images. * @param {Boolean} count A boolean indication wether to show the count of the images like (i of n). * @param {Boolean} thumbs A boolean indication wether to show thumbnails inside the lightbox. * @param {Boolean} closeOnEscape A boolean indication wether to close the lightbox by pressing the escape button. * @param {Boolean} closeOnClickOut A boolean indication wether to close the lightbox by clicking outside of the dialog. * @param {String} defaultSize The default size of images used for the slides widget. * * @method uiLightbox * @member jQuery * * @since 6.14.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module ep.ui.lightbox * * @revision $Revision: 1.14 $ */ define("ep/ui/lightbox", [ "jquery", "ep", "jquery/ui/dialog", "jquery/ui/widget", "ep/ui/core", "ep/ui/dialog", "ep/ui/slides", "ep/ui/thumbbox" ], function ($, ep) { var win = $(window), winWidth = win.width(), winHeight = win.height(), _superDialog = $.ui.uiDialog.prototype, body; $.widget( "ui.uiLightbox", { options: { images : "img", // selector / array of data / data / image node / array of image nodes / jQuery object effect : "standard", // change-over effect controls : 'visible', // show controls or not ('auto' / 'visible' / 'hidden') caption : false, // show caption of images count : false, // show count of images like (i of n) thumbs : false, // show thumbnails inside of lightbox closeOnEscape : true, closeOnClickOut : true, defaultSize : 'M' }, _create: function(){ var self = this, imgs = self.images = ep.ui.imgData(this.options.images) .on("lightbox.uiLightbox", $.proxy(self, "open")) .on("resizestop.uiLightbox", $.proxy(self, "_resizestop")); self.options.modal = true; imgs.each(function(i, item){ if( item.node ){ $(item.node) .on("click.uiLightbox",function(event){ event.preventDefault(); imgs.current(i) .trigger("lightbox"); }); } }); }, _setOption: function( name, value ){ var self = this; if( name == "thumbs" && self.uiDialog ){ self.uiDialog.toggleClass("ep-uiLightbox-showThumbs", value && self.images.length > 1); } self._superApply(arguments); }, destroy: function(){ var self = this; self.images .off(".uiLightbox") .each(function(i, item){ if( item.node ){ $(item.node).off("click.uiLightbox"); } }); if( self.uiDialog ){ self.uiDialog.remove(); } self._superApply(arguments); }, _build: function(){ var self = this, o = self.options; if( !self.uiDialog ){ self.uiDialog = ep('<div class="ep-uiLightbox"/>') .outerWidth(win.width()-100,true) .outerHeight(win.height()-100,true) .attr({ // Setting tabIndex makes the div focusable tabIndex: -1, role: "dialog" }) .on("keydown", function( event ) { if ( self.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE ) { event.preventDefault(); self.close( event ); } }) .appendTo("body") .addClass("ui-dialog ui-hidden ui-front"); // set visibility of thumbs area self._setOption( "thumbs", o.thumbs ); self.slidesWrap = ep('<div class="ep-uiLightbox-slides"/>') .appendTo(self.uiDialog) .uiSlides({ images : o.images, effect : o.effect, controls : o.controls, caption : o.caption, count : o.count, autoplay : false, defaultSize : 'L' }); self.thumbsWrap = ep('<div class="ep-uiLightbox-thumbs"/>') .appendTo(self.uiDialog) .uiThumbbox({ images : o.images, width : 100, height : 100 }); self.ctrlClose = $('<a href="javascript:void(0);" class="ep-uiLightbox-ctrlClose"/>') .prependTo(self.uiDialog) .on("click.uiLightbox",$.proxy(self, "close")); self.ctrlCloseHandler = $('<span>x</span>') .appendTo(self.ctrlClose); } }, _appendTo: _superDialog._appendTo, _allowInteraction: _superDialog._allowInteraction, moveToTop: _superDialog.moveToTop, _moveToTop: _superDialog._moveToTop, _keepFocus: _superDialog._keepFocus, _createOverlay: _superDialog._createOverlay, _destroyOverlay: _superDialog._destroyOverlay, _resizestop: function(){ if( this.uiDialog ){ this.uiDialog .outerWidth( win.width() - 100, true ) .outerHeight( win.height() - 100, true ); } }, open: function(){ this._build(); var self = this; self._createOverlay(); self._moveToTop(); self.uiDialog .removeClass("ui-hidden") .trigger("focus"); self._resizestop(); }, close: function(){ var self = this; self._destroyOverlay(); self.uiDialog .addClass("ui-hidden"); } }); return ep; });