Адаптивная галерея least.js

Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на десктопе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.

HTML

<section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        <!--  один элемент галереи -->
            <li>
                <a href="images/p1.jpg"></a>
                <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
                <div class="overLayer"></div>
                <div class="infoLayer">
                    <ul>
                        <li>
                            <h2>Заголовок фото</h2>
                        </li>
                        <li>
                            <p>Краткое описание изображения</p>
                        </li>
                    </ul>
                </div>
                <div class="projectInfo">
                    Полное описание изображения
                </div>
            </li>
        <!--  /один элемент галереи -->
    </ul>
</section>

CSS

Все стили для галереи уже прописаны в поставляемом с ней файле least.min.css, но для нашей Демо страницы мы переопределили несколько классов:

section {
    background-color: #333;
}
section li a,
section li .overLayer, section li .infoLayer {
    height: 187px;
    width: 250px;
}
section li .infoLayer ul li {
    padding: 5px 0 0;
}

JS

Для работы галереи подключаем следующие скрипты:

<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.js"></script>

Вызов плагина осуществляется следующим образом:

$(document).ready(function(){
    $('#gallery').least();
});

Опции

Имеется и парочка опций:

• 'random': true/false (по умолчанию true - включено)
• 'lazyload': true/false  (по умолчанию true - включено)