Для начало расскажу, что же такое LightBox и для чего он нужен (для тех, кто не знает).
Lightbox – простой JS скрипт, отображающий изображения на текущей странице, на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере, самое главное это окошко открывается без перезагрузки страницы и работает во всех современных браузерах.
Установка LightBox:
1. Заливаем файлы из архива себе на сайт
2. Lightbox использует JavaScript библиотеки Prototype.js , Scriptaculous.js и Lightbox.js нам нужно будет их подключить в нашу страничку (index и inner в стандартный шаблон), для этого вставьте следующий код в вашу страничку между тэгами <head> и </head>
Code
<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>
3. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>
Code
<link rel="stylesheet" href="http://Ваш_сайт/design/css/lightbox.css" type="text/css" media="screen" />
[/b]Активация LightBox:
1. LightBox активируется следующей строкой для одиночных изображений
Code
<a href="ваша_картинка_большая" rel="lightbox"><img src="ваша_картинка_маленькая" width="100" height="40" alt="" /></a>
2. Если у вас есть группа картинок, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - [имя группы в квадратных скобках], в этом случае будет выведено для показа несколько картинок.
Code
<a href="ваша_картинка_большая" rel="lightbox[категория]" title="Roll over and click right side of image to move forward."><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
<a href="ваша_картинка_большая" rel="lightbox[категория]" title="Alternately you can press the right arrow key." ><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
<a href="images/image-5.jpg" rel="lightbox[категория]" title="The script preloads the next image in the set as you're viewing."><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
<a href="ваша_картинка_большая" rel="lightbox[категория]" title="Press Esc to close"><img src="ваша_картинка_маленькая" width="100" height="40" alt="описание" /></a>
Все, надеюсь понятно, как использовать LightBox на своих страничках. Удачи! 
