Material Admin Extended Dark

## Photo Timeline

Photo gallery uses Lightbox component from `/media.html` thus make sure include all of it's dependencies before you proceed.

    <!-- 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>

Live preview: `/photo-timeline.html`

    <div class="card">

        <!-- Header -->
        <div class="action-header">
            <div class="action-header__label"><span class="hidden-xs">Total </span> 150 Photos</div>

            <div class="action-header__search">
                <input type="text" placeholder="Start typing..." class="action-header__input">
                <i class="action-header__close zmdi zmdi-long-arrow-left"></i>
            </div>

            <div class="actions action-header__actions">
                <a href="" class="action-header__toggle"><i class="zmdi zmdi-search"></i></a>
                <a href="" class="hidden-xs"><i class="zmdi zmdi-time"></i></a>
                <a href="" class="hidden-xs"><i class="zmdi zmdi-info"></i></a>
            </div>
        </div>

        <div class="card__body">

            <!-- Timeline item -->
            <div class="photos-timeline">
                <div class="photos-timeline__date">
                    <span>2015</span>
                    05/08
                </div>

                <div class="photos-timeline__body">
                    <h2 class="photos-timeline__title">Mallinda's Collection</h2>

                    <div class="lightbox">

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

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

                        ...
                    </div>
                </div>
            </div>

            ...
        </div>
    </div>

Source files:

- Plugin
  - Plugin(lightbox)
    - CSS: `vendors/bower_components/lightgallery/dist/css/lightgallery.min.css`
    - JS: `vendors/bower_components/lightgallery/lib/lightgallery-all.min.js`
  - LESS: `/less/inc/photos.less`
  - HTML: `/photo-timeline.html`