Простая LightBox галерея с использованием jQuery Lighter
Очень простая и лёгкая галерея с LightBox эффектом увеличения изображения для вашего сайта
Для начала посмотрите ДЕМО
Установка:
1#: На страницах, где будет использоваться галерея, перед закрывающим тегом </head> вставьте:
|
1 2 3 4 5 6 |
<style type="text/css"> ul.imglist { display: block; margin-bottom: 10px; } ul.imglist li { display: block; float: left; margin-right: 11px; margin-bottom: 12px; } ul.imglist li a img { display: block; } </style> <link rel="stylesheet" type="text/css" href="/css/jquery.lighter.css"> |
2#: В то место, где будут располагаться картинки, поместите:
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="imglist clearfix"> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> <li><a href="ССЫЛКА_НА_БОЛЬШУЮ_КАРТИНКУ" data-lighter><img src="ССЫЛКА_НА_МИНИАТЮРУ"></a></li> </ul> |
Осталось лишь залить JS файл из прикреплённого архива в папку js и CSS файл в папку css
