/** * Create a thumbnail box for a given set of images. * * The `ep.uiThumbbox()` method creates a thumbnail box for a given set of images. A thumbnail is a small preview of an image. * * The thumbbox can be part of the `ep.uiLightbox()` and can also be used with `ep.uiSlides()`. * * ### Examples * Create a thumbbox (list style). * * JavaScript: * * ep('#thumbbox01') * .uiThumbbox({ * images : '#images img', * width : 200, * height : 200, * action : "slides", * view : "list" * }); * * HTML: * * <ul id="images" style="display:none;"> * <li> * <img * alt="Bild 1" * src="ep/ui/thumbboxTest_Image1.jpg" * data-src-m="ep/ui/thumbboxTest_Image1.jpg" * data-src-l="ep/ui/thumbboxTest_Image1.jpg" * /> * </li> * <li> * <img * alt="Bild 2" * src="ep/ui/thumbboxTest_Image2.jpg" * data-src-m="ep/ui/thumbboxTest_Image2.jpg" * data-src-l="ep/ui/thumbboxTest_Image2.jpg" * /> * </li> * <li> * <img * alt="Bild 3" * src="ep/ui/thumbboxTest_Image1.jpg" * data-src-m="ep/ui/thumbboxTest_Image1.jpg" * data-src-l="ep/ui/thumbboxTest_Image1.jpg" * /> * </li> * </ul> * <div id="thumbbox01" style="width:650px;"></div> * * * @class jQuery.ui.uiThumbbox * @extends jQuery.widget * * @uses ep.ui.core * @uses jQuery.fn.class * @uses jQuery.tmpl * @uses jQuery.ui.widget * @since 6.14.0 */ /** * @cfg {String} event The event that changes the current image. */ /** * @cfg {String} images A set of images which will be displayed. */ /** * @cfg {Number} width The width of the thumbnail. */ /** * @cfg {Number} height The height of the thumbnail. */ /** * @cfg {String} view The style of the thumbbox (list / slide / fisheye). */ /** * See `jQuery.ui.uiThumbbox` for details. * * @param {Object} options A map of additional options pass to the method. * @param {String} event The event that changes the current image. * @param {String} images A set of images which will be displayed. * @param {Number} width The width of the thumbnail. * @param {Number} height The height of the thumbnail. * @param {String} view The style of the thumbbox (list / slide / fisheye). * * @method uiThumbbox * @member jQuery * * @since 6.14.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module ep.ui.thumbbox * * @revision $Revision: 1.9 $ */ define("ep/ui/thumbbox", [ "jquery", "ep", "$tmpl!ep/ui/thumbbox", "jquery/fn/class", "jquery/ui/widget", "ep/ui/core" ], function ($, ep, tmplThumbbox){ $.widget( "ui.uiThumbbox", { options: { // action : "lightbox", event : "click", images : "img", // selector / array of data / data / image node / array of image nodes / jQuery object // width : 100, // width of thumbnail height : 100, // height of thumbnail view : "list" // style of thumbbox ("list" / "slide" / "fisheye") }, _create: function(){ var self = this, o = self.options, imgs = self.images = ep.ui.imgData(o.images), width = o.width, height = o.height, srcType = 'srcXs'; if( width > 190 || height > 190 ){ srcType = 'srcL'; } else if( width > 140 || height > 140 ){ srcType = 'srcM'; } else if( width > 90 || height > 90 ){ srcType = 'srcS'; } $.extend( self, tmplThumbbox([{imgData:imgs.get(),srcType:srcType}] ).appendTo(self.element).tmplItem('elements') ); self._setOptions(o); // set current the thumbnail of the current image active self.element.find('li:first').addClass('active'); imgs.on('change', function(){ var currentSrc = imgs.current()[srcType], thumbList = $('img[src="'+currentSrc+'"]').closest('ul'), thumbItem = $('img[src="'+currentSrc+'"]').closest('li'), thumbboxWidth = $('img[src="'+currentSrc+'"]').closest('.ep-uiThumbbox').width(), thumblistLeft = thumbList[0].offsetLeft, thumbLeft = thumbItem[0].offsetLeft; self.element.find('li.active').removeClass('active'); thumbItem.addClass('active'); if(self.options.view === "slide"){ // scroll active thumb into view if necessary if(thumblistLeft + thumbLeft < 0){ thumbList.stop(true, true).animate({ 'left': -thumbLeft + "px" }); }else if(thumblistLeft + thumbLeft > thumbboxWidth){ thumbList.stop(true, true).animate({ 'left': (thumbboxWidth-thumbLeft-thumbItem.outerWidth()) + "px" }); } } }); }, _init: function(){ }, destroy: function(){ var self = this; self.images.off(".uiThumbbox"); self.container.remove(); self._superApply(arguments); }, _setOption: function( key, value ) { var self = this, o = self.options, imgs = self.images; if ( key === "view" ) { // reset slide self.container .off("mousemove.uiThumbbox") .css( "height", "" ) .removeClass(/ep-uiThumbbox-[\w]+/) .addClass("ep-uiThumbbox-"+value); if( value == "slide" ){ // init slide self.container .on("mousemove.uiThumbbox",$.proxy(self, "_slideMove")) .height( self.list.outerHeight(true) ); } } else if( key === "width" ){ self.list .children() .width(value); } else if( key === "height" ){ self.list .children() .height(value) .css("line-height",value+"px"); self._setOption("view",self.options.view); } else if( key === "event" ){ self.element .off(".uiThumbbox", "img") .on(value + ".uiThumbbox", "li", function(event){ var item = $(this).data("item"); if( item !== undefined && item != imgs.currentItem ){ imgs.current( item ); if( o.action ){ imgs.trigger(o.action); } } }); } return this._superApply(arguments); }, _slideMove: function( event ){ var self = this, containerLeft = self.container.offset().left, containerWidth = self.container.width(), listWidth = self.list.width(), mouseLeft = event.pageX - containerLeft, speed = self.list.position().left self.list.stop(true); if(listWidth > containerWidth){ if( mouseLeft < (containerWidth * 1/4) ){ self.list.animate({left: "0px"}, Math.abs(speed*2), 'linear'); } else if( mouseLeft > (containerWidth * 3/4) ){ self.list.animate({left: (containerWidth-listWidth)+"px"}, Math.abs((listWidth-containerWidth+speed)*2), 'linear'); } } } }); return ep; });