Доброго времени суток, уважаемые! Продолжаем серию аналогов LightBox. Мы с Вами уже познакомились с FancyBox 1.2.1 и LightBox 2.04, теперь в мое поле зрения попал не менее удивительный скрипт LightWindow.

В фундамент данного скрипта заложены ProtoType и ScriptAculous, которые обеспечивают классную анимацию. Очень поразила своей функциональностью реализация галереи. Ещё одно достоинство - поддержка всех типов медийных данных.

Хватит о достоинствах и недостатках, переходим к установке.

Шаг №1

Подключаем необходые для работы скрипты, которые находятся в папке js:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/lightwindow.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>

Шаг №2

Подключаем таблицу стилей:

<link href="style.css" rel="stylesheet" type="text/css"/>

Если Вы используете свою таблицу стилей, то скопируйте содержимое style.css.

Шаг №3

Копируем графику из папки image/lightwindow/ к себе на сайт и прописываем ссылки на изображения:

<a href="images/image_big.jpg" class="lightwindow page-options" title="Название" author="Автор" caption="Описание"><img src="images/image_mini.jpg" alt=""/></a>

Стоп, теперь немного о реализации галереи. Опять же, если Вы используете множество изображений и желаете, чтобы была возможность перехода к следующему и предыдущему изображениям, то прописываем атрибут rel:

<p>
<a href="images/image2_big.jpg" class="lightwindow page-options" rel="Животный мир[Лошади]" title="Название" caption="Описание" author="Автор"><img src="images/image2_mini.jpg" alt=""/></a>
<a href="images/image3_big.jpg" class="lightwindow page-options" rel="Животный мир[Тигр]" title="Название" caption="Описание" author="Автор"><img src="images/image3_mini.jpg" alt=""/></a>
</p>

В данном случаем "Животный мир" - категория, а "Лошади" и "Тигр" - катологи. Просмотрев полученный результат и нажав кнопку "Галерея", увидим этот раздел и каталоги:

Фишка в том, что если каталоги или категории у изображений разные, то возможность перехода на предыдущее и следующее изображения не будет доступна. Чтобы эту возможность активировать, нужно чтобы каталог и категория были одинаковыми. В этом и состоит принцип галереи. Теперь попробуем это реализовать:

<p>
<a href="images/image_big.jpg" class="lightwindow page-options" rel="Природа[Растения]" title="Название" caption="Описание" author="Автор"><img src="images/image_mini.jpg" alt=""/></a>
<a href="images/image4_big.jpg" class="lightwindow page-options" rel="Природа[Растения]" title="Название" caption="Описание" author="Автор"><img src="images/image4_mini.jpg" alt=""/></a>
</p>

Теперь данная функция возможна, тк категории и каталоги идентичны:

Т.к скрипт имеет поддержку множества типов медийных файлов, то в архиве прикладываю пример, который мы с Вами сейчас изучили, и оригинал с множеством других вариантов, которые можете просмотреть самостоятельно.

На этом я с Вами прощаюсь. Если что-то не понятно, то оставляйте комментарии, постараемся разобраться. До новых встреч!