4714
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
- Демо:
Пришло время адаптивных сайтов, продолжаем эту тематику в галерее, одинаково хорошо отображаемой как на компе, так и на мобильных устройствах. В галерее используется плагин lazyload - отложенная загрузка картинок, который позволяет экономить трафик. При наведении курсора на изображение отображается краткое описание, а по клику происходит показ полной версии изображения. По умолчанию изображения формируются случайным образом на странице.
Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,заливаем в папку вашего шаблона.
Этот код размещаем между body :
Код:
<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>
Для работы галереи в хеад подключаем следующие скрипты и стили:
Код:
<link href="{tpl_url}/css/least.min.css" rel="stylesheet" type="text/css" />
<!-- jQuery libary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- least.js JS-file -->
<script src="{tpl_url}/js/least.min.js"></script>
<!-- Lazyload JS-file -->
<script src="{tpl_url}/js/jquery.lazyload.js"></script>Вызов плагина :
Код:
$(document).ready(function(){
$('#gallery').least();
});'random': true/false (по умолчанию true - включено)
'lazyload': true/false (по умолчанию true - включено)
Здесь можно подключить любой плагин,последние новости,популярные,и т .д.
Можешь почитать и вот эту статейку "particles-js"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.