Май
9
2011

Галерейка с эффектом затемнения LightBox на jQuery

lightboxСегодня вовремя обновления дизайна сайта www.mksite.com.ua. В портфолио я поставил очень красивую галерейку називается — LightBox. Суть в том что когда вы нажимаете на картинку экран затемняется и загружается картинка. Пример можете просмотреть здесь.

Если вас галерейка заинтересовала я помогу ее установить.

Для начала качаем два очень важных файла: jquery.lightbox.js и jquery.lightbox.css
После этого подключаем их к нашему сайту:

  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.lightbox.js"></script> 
<link rel="stylesheet" href="jquery.lightbox.css" type="text/css" />

Потом выберем картинки и вставляем в блок div:

<div id="gallery">
<a href="..."  title="" ><img src=".....jpg" /></a>
<a href="..."  title="" ><img src=".....jpg"/></a>
<a href="..."  title="" ><img src=".....jpg" /></a>
<a href="..."  title="" ><img src=".....jpg"/></a>
</div>

title — описание картинки будет выводится в галерее нужно заполнить.
В анкоре нужно вказать путь к большому изображению.
А в картинке к маленькому изображению.

Ну и собственно после подключенных скриптов выше пишем:

<script type="text/javascript">
$(document).ready(function() {
	$('#gallery a').lightBox({fixedNavigation:true});
});
</script>
Скачать готовую галерейку можно здесь.
Ну вот и все! пишите свой отзывы. nn1

Вам будет интересно прочитать и это:

Об авторе: Петро Бородатий

Создаю веб-сайты, пишу скрипты для популярных CMS, веду блог. Программист портала AdvertsMarket.net.

Один комментарий + Добавить комментарий

Оставить комментарий

Услуги

Веб-студия "MKSITE"

Реклама от Google

Социальные сети

Партнеры

Система Orphus