/** * Create a view of navigable slides. * * The `ep.uiSliderbox()` method creates a view of slides which are navigable with touch swipe gestures and * clickable areas on the left and right side. * * ### Examples * Create a simple slidebox with 3 slide and 2 content boxes per slide. * * JavaScript: * * ep('#slidebox') * .uiSlidebox({ * view: 2, * speed: 600 * }); * * HTML: * * <div id="slidebox"> * <ul> * <li> * <img alt="Bild 1" src="ep/ui/slideboxTest_Image1.jpg"/> * </li> * <li> * <p> * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod, * risus dictum vulputate varius, sapien elit feugiat massa, in feugiat lacus diam vel ipsum. * </p> * </li> * <li> * <p> * Nulla lacinia felis in nulla auctor non condimentum sapien vestibulum. Donec quis ornare arcu. * Nullam semper, nunc eget faucibus condimentum, velit massa pulvinar lorem, id dignissim lectus * diam ac elit. Morbi mattis venenatis posuere. Nulla congue risus id orci vestibulum sed tempor * dolor molestie. * </p> * </li> * <li> * <img alt="Bild 2" src="ep/ui/slideboxTest_Image2.jpg"/> * </li> * <li> * <img alt="Bild 3" src="ep/ui/slideboxTest_Image3.jpg"/> * </li> * </ul> * </div> * * @class jQuery.ui.uiSlidebox * @extends jQuery.widget * * @uses ep.ui.core * @uses jQuery.event.special.load * @uses jQuery.event.special.touch * @uses jQuery.fn.class * @uses jQuery.tmpl * @uses jQuery.ui.widget * @since 6.15.0 */ /** * @event changeslide This event is triggered when the slide change to an other. * @member jQuery.ui.uiSlidebox * * @since 6.15.0 */ /** * @cfg {Number} view A count of how many content box are displayed per slide view. */ /** * @cfg {Number} speed The animation time in seconds for the slide effect. */ /** * See `jQuery.ui.uiSlidebox` for details. * * @param {Object} options A map of additional options pass to the method. * @param {Number} view A count of how many content box are displayed per slide view. * @param {Number} speed The animation time in seconds for the slide effect. * * @fires changeslide * * @method uiSlidebox * @member jQuery * * @since 6.15.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module ep.ui.slidebox * * @revision $Revision: 1.19 $ */ /*global define,window*/ /*jslint nomen:true, vars:true*/ define("ep/ui/slidebox", ["jquery", "ep", "vendor/sly", "jquery/ui/widget", "$ready!"], function ($, ep, Sly) { 'use strict'; $.widget("ui.uiSlidebox", { options: { view: 2, arrow: true, speed: 300, maxWidth: 200 }, _create: function () { var self = this, o = self.options, slides, container; self.container = self.element; self.wrapper = self.container.children().addClass("slidee"); slides = self.wrapper.children(); var resizeItems = function () { var slidesPerView = o.view; var maxSlideSize = o.maxWidth; var minPadding = 10; var windowWidth = $(window).width(); var slidesWidth = Math.floor(windowWidth / slidesPerView); var emptyWindowSpace = windowWidth - (maxSlideSize * slidesPerView); var slidePadding = Math.floor(emptyWindowSpace / (slidesPerView * 2)); if (slidePadding < minPadding) { slidePadding = minPadding; } if (slidesWidth > maxSlideSize) { slidesWidth = maxSlideSize; } self.container.width(windowWidth); self.wrapper.css("max-width", slides.length * (slidesWidth + 2 * slidePadding)); slides.width(slidesWidth).css('padding-left', slidePadding).css('padding-right', slidePadding); }; resizeItems(); self.sly = new Sly(self.container[0], { horizontal: 1, itemNav: 'centered', activateOn: null, smart: 1, mouseDragging: 1, touchDragging: 1, startAt: 0, scrollBy: 1, activatePageOn: 'click', speed: 300, elasticBounds: 1 }, { moveEnd: function () { self.container.trigger('changeSlide', { slide: self.sly.rel.activePage, slides: self.sly.items.length }); } }).init(); $(window).on('resize', function () { resizeItems(); self.sly.reload(); }); }, /** * Go to an specified slide. * * @param {Number,String} slide Number of the slide to go, accept also 'prev' and 'next'. * * @method goTo * @member jQuery.ui.uiSlidebox * * @since 6.15.0 */ goTo: function (i) { var sly = this.sly; if (i === 'next') { sly.next(); } else if (i === 'prev') { sly.prev(); } else { sly.activatePage(i); } }, destroy: function () { var self = this; self.wrapper.removeClass('slidee'); self.sly.destroy(); self._superApply(arguments); } }); return ep; });