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:

.. code-block:: html
   :linenos:

   ...
   <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 :ref:`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.