/** * Create a slideshow on mobile devices for a given set of images. * * The `ep.uiMobileslides()` method creates a slideshow for a given set of images. * * This slideshow is displayed in an overlay on top of the mobile web site. A click on the applied element opens * the slideshow. * This are the major differences to `ep.uiSlides()`. * * ### Examples * Create a simple slideshow. * * JavaScript: * * ep('#slides01') * .uiMobileslides({ * images : '#images img', * }); * * HTML: * * <ul id="images" style="display:none;"> * <li> * <img * alt="Bild 1" * src="ep/ui/slidesTest_Image1.jpg" * data-src-m="ep/ui/slidesTest_Image1.jpg" * data-src-l="ep/ui/slidesTest_Image1.jpg" * /> * </li> * <li> * <img * alt="Bild 2" * src="ep/ui/slidesTest_Image2.jpg" * data-src-m="ep/ui/slidesTest_Image2.jpg" * data-src-l="ep/ui/slidesTest_Image2.jpg" * /> * </li> * <li> * <img * alt="Bild 3" * src="ep/ui/slidesTest_Image1.jpg" * data-src-m="ep/ui/slidesTest_Image1.jpg" * data-src-l="ep/ui/slidesTest_Image1.jpg" * /> * </li> * </ul> * <div id="slides01"">Open slideshow</div> * * @class jQuery.ui.uiMobileslides * @extends jQuery.widget * * @uses ep.ui.core * @uses ep.ui.slidebox * @uses jQuery.event.special.touch * @uses jQuery.tmpl * @uses jQuery.ui.widget * @since 6.15.0 */ /** * Open the slideshow (overlay). * * @method open * @member jQuery.ui.uiMobileslides * * @since 6.15.0 */ /** * @cfg {Array,Element,String} images A set of images which will be displayed. */ /** * See `jQuery.ui.uiMobileslides` for details. * * @param {Object} options A map of additional options pass to the method. * @param {Array,Element,String} images A set of images which will be displayed. * * @method uiMobileslides * @member jQuery * * @since 6.15.0 */ /* * @copyright © Copyright 2006-2012, epages GmbH, All Rights Reserved. * * @module ep.ui.slides */ /*globals define, window, navigator*/ /*jslint nomen:true*/ define("ep/ui/mobileslides", [ "jquery", "ep", "$tmpl!./mobileslides", "jquery/ui/widget", "ep/ui/core", "ep/ui/slidebox"], function ($, ep, tmplSlides) { 'use strict'; var body, win = $(window), mobile, has_stateHandling = (typeof (window.history.pushState) === 'function' && typeof (window.history.replaceState) === 'function'), preventDefault = function (event) { event.preventDefault(); }; $.widget("ui.uiMobileslides", { options: { images: "img" // selector / array of data / data / image node / array of image nodes / jQuery object }, _create: function () { var self = this, o = self.options, imgs = self.images = ep.ui.imgData(o.images).on("change", $.proxy(self, "_change")), tmplData = { tBack: "Back", tFullSize: "Fullsize", images: imgs }; if (has_stateHandling) { window.history.replaceState({ 'mobileSlideOpen': false }, 'Test', window.location.href); } win.on('popstate', function (_event) { if (_event.originalEvent.state && !_event.originalEvent.state.mobileSlideOpen) { self.close(); } }); win.on("resize", $.proxy(self, "_resize")); self.element.on("click", $.proxy(self, "_open")); // load template and add element names to instance $.extend(self, tmplSlides([tmplData]).appendTo("body").hide().tmplItem("elements")); self.back.on("click", function () { if (has_stateHandling) { window.history.back(); } else { self.close(); } }); self.fullsize.on("click", $.proxy(self, "_fullsize")); $('.ep-mobileSlides-body').uiSlidebox({ view: 1.0, arrow: true, maxWidth: 1000 }); self.body.on("changeSlide", function (event, o) { self.count.text((o.slide + 1 || 1) + " / " + o.slides); }); $('.ep-mobileSlides-foot').uiSlidebox({ view: 4, arrow: true, maxWidth: 1000 }); self.foot.on("click", "li", function () { imgs.current($(this).data("index")); }); self.scrollTop = 0; self._setOptions(o); }, _init: function () { var self = this; if (!body) { body = $("body"); } if (!mobile) { mobile = $(".MobileLayout"); } self._resize(); }, _fullsize: function (event) { event.preventDefault(); window.location.href = this.images.current().href; }, _resize: function () { this.container.height(win.height() + (/iPhone/.test(navigator.userAgent) ? 60 : 0)); }, _change: function () { var self = this; self.body.uiSlidebox("goTo", self.images.currentItem); }, _open: function (event) { event.preventDefault(); if (has_stateHandling) { window.history.pushState({ 'mobileSlideOpen': true }, 'Test', window.location.href); } this.open(); this._resize(); }, open: function () { var self = this; // save current scroll position to restore self.scrollTop = body.prop("scrollTop"); body.prop("scrollTop", 0).on("scroll.mobileSlides", preventDefault); self.container.show(); // Re init sizes self.body.uiSlidebox(); self.foot.uiSlidebox(); mobile.hide(); // Prevent mark of links in bottom layers in Android 2.x }, /** * Close the slideshow. * * @method close * @member jQuery.ui.uiMobileslides * * @since 6.15.0 */ close: function () { var self = this; body.prop("scrollTop", self.scrollTop).off("scroll.mobileSlides", preventDefault); mobile.show(); // Prevent mark of links in bottom layers in Android 2.x self.container.hide(); }, destroy: function () { var self = this; self.images.off(".mobileSlides"); self.container.remove(); self._superApply(arguments); } }); return ep; });