Categories

.uiThumbbox()

Categories: UI

ep.uiThumbbox( options )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.thumbbox

Description: Create a thumbnail box for a given set of images.

  • ep.uiThumbbox( options )

    version added: 6.14.0

    options   A map of additional options pass to the method.

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().

  • Create a thumbbox (list style).

    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>
    
    Code:
    ep('#thumbbox01')
      .uiThumbbox({
        images  : '#images img',
        width : 200,
        height  : 200,
        action  : "slides",
        view  : "list"
     });
    
    
    
  • event

    version added: 6.14.0

    The event that changes the current image.

    Default: "click"

  • images

    version added: 6.14.0

    A set of images which will be displayed.

    Default: "img"

  • width

    version added: 6.14.0

    The width of the thumbnail.

    Default: 100

  • height

    version added: 6.14.0

    The height of the thumbnail.

    Default: 100

  • view

    version added: 6.14.0

    The style of the thumbbox (list / slide / fisheye).

    Default: "list"