Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

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

Twitter
Нравится
RedLine

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

Шаг 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)

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GEvOggvzID8/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3