Media Viewer

The MediaViewer is an advanced lightbox with versatile functionalities, beautiful design and has rich features. The component’s main purpose is to display gallery item in whichever rich media forms it can be (photos, audios, videos, inline, ajax, embedded iframe).

Markup

Item can optioanlly be extended with media form. The minimum attribute requirements are “data-extended” and “data-type” which are declared inside the item anchor tag. Different media forms may have additional data attributes that affect the app behaviour. For examples:

1
2
3
4
5
6
7
8
...
<li>
  <a
    href="path/to/item1.jpg"
    data-type="photo"
    data-extended="path/to/extended/1.jpg">Item 1 title</a>
   <p>Item 1 description</p>
 </li>

Photos

  • data-type: photo

  • data-extended: Path to full size photo item

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

Audios

  • data-type: audio

  • data-extended: Path to audio item

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

Videos

  • data-type: video

  • data-extended: Array of path to videos item, mp4 and webm sources should be provided for maximum compatibility

  • data-poster: Path to item image that will be used as the video poster (input of videojs)

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

AJAX

  • data-type: ajax

  • data-extended: Path to ajax resources

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

Inline

  • data-type: inline

  • data-extended: The id of html element in the current document

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

Embed

  • data-type: embed

  • data-extended: The iframe source

  • data-thumbnail: Path to item thumbnail that is used in MediaViewer thumbnail bar

Config Object

Configurations can be passed to main configuration object under “mediaviewer” key. See Configurations for complete list of available parameters.

General Container

Inline, AJAX and embedded type use a general div container to display their contents. To customize the container width and height properties modify the options “containerWidth” and “containerHeight” in “mediaviewer” object.