Модный Lightbox от Lokesh Dhakar
  

Модный Lightbox от Lokesh Dhakar10.05.2009 00:00

Сайт разработчика: www.lokeshdhakar.com

Непосредственно страница проекта: www.lokeshdhakar.com/projects/lightbox2/

Установка:

1. Добавить в <head> или можно непосредственно перед фотографиями код:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>  

2. Добавить  стили:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Добавить к тэгу <a> rel="lightbox[roadtrip]" :

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Комментарии от себя:

1. Добавлять  код подключения LB достаточно  на тех страницах, где есть фотогалерея. Нет необходимости добавлять на всех.

2. Лучше всего (совет) записать все файлы в один каталог, например /l_box , потом в файлах lightbox.css, lightbox.js поменять пути к картинкам. Ищите loading.gif и найдете где они в коде.

3. Подключение.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="Текст, который будет в всплывающем окошке"><img src="images/image-1mini.jpg" alt="" /></a> Где:

images/image-1.jpg - большая картинка

images/image-1mini.jpg - маленькая картинка (превью)

title="Текст, который будет в всплывающем окошке" - это понятно...

И еще П.С.: если у клиента не работает JavaScript, то он просто увидит картинку на пустом экране, без lightbox, зато увидит в любом случае.

 

 

 

 

 

 

 

 

<<< Изменение стиля CSS при помощи JavaScript
Изменение стиля CSS при помощи JavaScript
MAC- меню у вас на сайте! >>>
MAC- меню у вас на сайте!