Categories

.mobileSlides()

Categories: UI

ep.mobileSlides( options )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.mobile.slides

Description: Create a slideshow on mobile devices for a given set of images.

  • ep.mobileSlides( options )

    version added: 6.15.0

    options   A map of additional options pass to the method.

The ep.mobileSlides() 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()>.
  • Create a simple slideshow.

    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>
    
    Code:
    ep('#slides01')
      .mobileSlides({
        images  : '#images img',
      });
    
    
  • images

    version added: 6.15.0

    A set of images which will be displayed.

    Default: "img"

  • open

    • .uiTooltip( 'open' )

      version added: 6.15.0

    Open the slideshow (overlay).

  • close

    • .uiTooltip( 'close' )

      version added: 6.15.0

    Close the slideshow.