Адаптивная галерея
Реализация адаптивной галереи с использованием плагина lazyload.
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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> |
2. Добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
section { background-color: #333; } section li a, section li .overLayer, section li .infoLayer { height: 187px; width: 250px; } section li .infoLayer ul li { padding: 5px 0 0; } |
3. Подключаем javascript и jQuery
|
1 2 3 4 5 6 |
<!-- 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> |
4. Вызов плагина производится следующим образом:
|
1 2 3 |
$(document).ready(function(){ $('#gallery').least(); }); |
Список опций:
\’random\’: true/false (по умолчанию true — включено)
\’lazyload\’: true/false (по умолчанию true — включено)
\’lazyload\’: true/false (по умолчанию true — включено)
Готово.
