Categories

ep.ui.imgData()

Categories: UI

ep.ui.imgData( selector )

Plugin: ep.ui.core

Description: Advanced form handling.

  • ep.ui.imgData( selector )

    version added: 6.14.0

    selector   A string containing a selector expression to find images.

  • ep.ui.imgData( element )

    version added: 6.14.0

    element   An image DOM element.

  • ep.ui.imgData( jQuery object )

    version added: 6.14.0

    jQuery object   An existing jQuery object containing images.

  • ep.ui.imgData( elementArray )

    version added: 6.14.0

    elementArray   An array containing a set of image DOM elements.

  • ep.ui.imgData( dataArray )

    version added: 6.14.0

    dataArray   An array containing a set of imageData items.

The ep.ui.imgData() method read the extended image data of elements an handle them in an array like object.

The item objects of an image data object: { "desc" : <description>, "href" : <path to an url / image>, "src" : <path to default image>, "srcXs": <path to thumbnail image>, "srcS" : <path to small image>, "srcM" : <path to medium image>, "srcL" : <path to large image>, "node" : <the source DOM element (optional)> }
  • Find all images.

    HTML:
    <ul>
    					  <li>
    					    <a href="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010.jpg">
    					      <img
    					      	alt="Eureka El Capitan IV"
    					      	src="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010.jpg"
    					      	data-src-xs="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_xs.jpg"
    					      	data-src-s="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_s.jpg"
    					      	data-src-m="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_m.jpg"
    					      	data-src-l="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010.jpg"
    					      />
    					    </a>
    					  </li>
    					  <li>
    					    <a href="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2.jpg">
    					      <img
    					      	alt="Eureka El Capitan IV"
    					      	src="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2.jpg"
    					      	data-src-xs="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2_xs.jpg"
    					      	data-src-s="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2_s.jpg"
    					      	data-src-m="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2_m.jpg"
    					      	data-src-l="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_2.jpg"
    					      />
    					    </a>
    					  </li>
    					  <li>
    					    <a href="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3.jpg">
    					      <img
    					      	alt="Eureka El Capitan IV"
    					      	src="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3.jpg"
    					      	data-src-xs="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3_xs.jpg"
    					      	data-src-s="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3_s.jpg"
    					      	data-src-m="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3_m.jpg"
    					      	data-src-l="/WebRoot/Store/Shops/DemoShop/Products/eg_1000111010/eg_1000111010_3.jpg"
    					      />
    					    </a>
    					  </li>
    					</ul>
    
    Code:
    ep.ui.imgData('img');
    
    
  • change

    This event is triggered when the current item of image dat object is changed.

  • resize

    This event is triggered while the window resize.

  • resizestop

    This event is triggered when the window resize is stopped.

  • .current()

    • .current()

      version added: 6.14.0

    Retrieve the item which is marked as current of the image data object.

  • .current()

    • .current( index )

      version added: 6.14.0

      index   A zero-based integer indicating which item to mark as current.

    Mark an item of the image data object as current.

  • .each()

    • .each( callback(indexInArray, imageData) )

      version added: 6.14.0

      callback   The function that will be executed on every image data item object.

    Iterate over a imaga data object, executing a function for each item.

  • .get()

    • .get( [ index ] )

      version added: 6.14.0

      index   A zero-based integer indicating which item to retrieve.

    Retrieve the items matched by the image data object.

    The .get() method grants us access to the items underlying each image data object. Without a parameter, .get() returns an array of all items.
  • .next()

    • .next()

      version added: 6.14.0

    Retrieve the item after the current item of the image data object.

    May is undefined, if current item the last of the image data object.
  • .off()

    • .off( events, [, handler(eventObject)] )

      version added: 6.14.0

      events   One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      handler(eventObject)   A handler function previously attached for the event(s).

    Remove an event handler from the image data object.

  • .on()

    • .on( events, handler(eventObject) )

      version added: 6.14.0

      events   One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

      handler(eventObject)   A function to execute when the event is triggered.

    Attach an event handler function for one or more events to the image data object.

  • .prev()

    • .prev()

      version added: 6.14.0

    Retrieve the item before the current item of the image data object.

    May is undefined, if current item the first of the image data object.
  • .trigger()

    • .trigger( eventType )

      version added: 6.14.0

      eventType   A string containing a JavaScript event type, such as click or submit.

    • .trigger( event )

      version added: 6.14.0

      event   A jQuery.Event object.

    Execute all handlers and behaviors attached to the image data object for the given event type.