Адаптивная фотогалерея при помощи LazyLoad (least.js)

Адаптивная фотогалерея при помощи LazyLoad (least.js)

Если вы в поисках адаптивной фотогалереи с эффектом LazyLoad, то эта статья для вас.
Не так давно я наткнулся на отличный плагин least.js. Он позволит превратить набор фотографий в адаптивную фотогалерею которая будет работать даже на мобильных устройствах. Также из плюсов можно отметить малую нагрузку на сервер. А размер самого плагина составляет всего 1 кб!

Шаг 1. HTML

Для начала мы подключаем все стили и скрипты.

<link href="css/least.min.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js"></script>
<script src="js/least.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

Если есть необходимость поддержки малых экранов вы можете вписать их в этоже поле.

<meta content="width=device-width, initial-scale=1" name="viewport" />

Теперь мы подготовим каркас нашей адаптивной фотогалереи.

<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="Photo 1" />

            <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li><h2>Photo 1</h2></li>
                    <li><p>View</p></li>
                    <li><p>it</p></li>
                </ul>
            </div>
            <div class="projectInfo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, asperiores cupiditate necessitatibus placeat eveniet saepe nostrum blanditiis minima fugiat in tempore aperiam maxime ut sunt officia facere adipisci illum! Consequatur.</div>
        </li>

        <!-- Другие фотографии -->

    </ul>
</section>

В примере галереи использовалось 20 фотографий, я не стал указывать всю HTML разметку так как она повторяется.

Шаг 2. CSS

В принципе все необходимые стили для нашей адаптивной фотогалереи уже есть в «least.min.css» который идёт в комплекте. Но для демо было ещё добавлено:

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

Шаг 3. JS

Здесь на удивление всё вообще элементарно. Всё работает автоматически!

Теперь адаптивная фотогалерея при помощи LazyLoad готова.

comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter