• Автор:

    Braund
  • Добавлено:

    дек 29, 2013
  • Комментариев:

    0
  • Просмотров:

    2966

Адаптивная фото-галерея на JS

Адаптивная фото-галерея на 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 . Его остается только подключить
<link href="css/least.min.css" rel="stylesheet">


javascript:
Для работы галереи подключаем следующие скрипты:
<!-- 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 - включено)


Автор: Gameer

Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.