Галерея на jQuery, HTML5 & CSS3

demosourse

Плагин прикольной галереи с отложенной загрузкой изображений.

Шаг 1

Скачиваем least.js

Шаг 2

Подключаем фалы библиотеки перед закрывающимся тегом </head>

<!-- least.js CSS-file -->
<link href="css/least.min.css" rel="stylesheet" />
<!-- jQuery libary -->
<script src="http://code.jquery.com/jquery-latest.js" defer="defer"></script>
<!-- least.js JS-file -->
<script src="js/least.min.js" defer="defer"></script>
<!-- Lazyload JS-file -->
<script src="js/jquery.lazyload.js" defer="defer"></script>

Шаг 3

Формируем html код для галереи изображений в секции <body>

<section>
    <ul id="gallery">
        <li id="fullPreview"></li>

        <li>
            <a href="img/full/1.jpg"></a>
            <img data-original="img/thumb/1.jpg" src="img/effects/white.gif" width="240" height="150" alt="Ocean" />

            <div class="overLayer"></div>
            <div class="infoLayer">
                <ul>
                    <li>
                        <h2>
                            Ocean
                        </h2>
                    </li>
                    <li>
                        <p>
                            View Picture
                        </p>
                    </li>
                </ul>
            </div>

            <div class="projectInfo">
                <strong>
                    Day, Month, Year:
                </strong> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            </div>
        </li>
    </ul>
</section>

Шаг 4

Активируем плагин и указываем селектор контейнера галереи

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

Дополнительные опции:

'random': true/false (вывод изображений в случайном порядке; по умолчанию true)
'lazyload': true/false  (отложенная загрузкой изображений; по умолчанию true)
'scrollToGallery': true/false (скролл эффект; по умолчанию true)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://kamilczujowski.github.io/least/
Перевел: Станислав Протасевич
Урок создан: 26 Июня 2013
Просмотров: 32770
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^