Material Admin Extended Dark

## Media

## Thumbnail

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

#### Basic Example

By default, thumbnails are designed to showcase linked images with minimal required markup.

    <a href="#" class="thumbnail">
        <img src="demo/img/300x200.gif" alt="">
    </a>

#### Custom content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    <div class="thumbnail">
        <img src="demo/img/300x200.gif" alt="">
        <div class="caption">
            <h4>Thumbnail label</h4>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

            <a href="#" class="btn btn-sm btn-default" role="button">Button</a>
        </div>
    </div>

Source files:

- LESS: `/less/inc/bootstrap-overrides/thumbnail.less`
- HTML: `/media/html`

## LightGallery Lightbox

JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery.

Official website and detailed documentation at https://github.com/sachinchoolur/lightGallery

You can check the live preview at `/media.html`

In order to use this plugin, make sure to include it's Javascript asset file in the `<head>` section.

    <!-- CSS -->
    <link href="vendors/bower_components/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet">

    <!-- JS -->
    <script src="vendors/bower_components/lightgallery/lib/lightgallery-all.min.js"></script>

#### Images

    <div class="lightbox">
        <div data-src="media/gallery/1.jpg">
            <div class="lightbox__item">
                <img src="demo/img/gallery/thumbs/1.jpg" alt="" />
            </div>
        </div>
    </div>

    // Please note that this funtion is already included in js/app.min.js(from js/inc/funtions.js) thus you don't to add this again.

    $('.lightbox').lightGallery({
        enableTouch: true
    });

#### Videos

    <div class="lightbox">
        <div data-src="https://www.youtube.com/watch?v=bZrrGF2MHIs">
            <div class="lightbox__item">
                <img src="demo/img/gallery/thumbs/1.jpg" alt="" />
            </div>
        </div>
    </div>

Source files:

- Plugin
  - CSS: `/vendors/bower_components/lightgallery/dist/css/lightgallery.min.css`
  - JS: `/vendors/bower_components/lightgallery/lib/lightgallery-all.min.js`
- LESS: `/less/inc/vendor-overrides/light-gallery.less`
- HTML: `/media/html`
- JS(function): `/js/inc/functions.js`

## Carousel

A slideshow component for cycling through elements, like a carousel.

This is a Bootstrap's javascript component. You can check it's complete documentation at http://getbootstrap.com/javascript/#carousel

You can check the live preview at `/media.html`

In order to use this plugin, make sure to include it's Javascript asset file in the `<head>` section.

    <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="demo/img/carousel/c-1.jpg" alt="">
                <div class="carousel-caption">
                    <h3>First Slide Label</h3>
                    <p>Some sample text goes here...</p>
                </div>
            </div>
            <div class="item">
                <img src="demo/img/carousel/c-2.jpg" alt="">
            </div>
            <div class="item">
                <img src="demo/img/carousel/c-3.jpg" alt="">
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="zmdi zmdi-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="zmdi zmdi-chevron-right"></span>
        </a>
    </div>

Source files:

- LESS: `/less/inc/bootstrap-overrides/carousel.less`
- HTML: `/media/html`

## Responsive Embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

This is a Bootstrap component and you check it's detailed documentation at http://getbootstrap.com/components/#responsive-embed

#### 4:3 Aspect Ratio

    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/Kxe_RRonq0o"></iframe>
    </div>

#### 16:9 Aspect Ratio

    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/aaZXDm3RXuo"></iframe>
    </div>

Source files:

- HTML: `/media/html`