Приветствую тебя, дорогой читатель!

Наверное, многие встечали на форумах и прочих сайтах скрипт, который позволяет эффектно увеличивать изображение. После очередного поиска я остановился на LightBox 2.04. Именно с ним я хотел бы сейчас Вас познакомить.

Шаг №1

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

<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"/>

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

Шаг №3

Скопируем папку image, в которой находится необходимая графика скрипта.

Шаг №4

Теперь ссылке, которая будет ссылаться на большое изображение, прописываем атрибут rel c параметром lightbox:

<a href="images/example.jpg" rel="lightbox" title="описание">
<img src="images/mini_example.jpg" alt=""/>
</a>

Если же Вы работаете с несколькими изображениями и хотите, чтобы была возможность перехода к следующему и предыдущему изображениям, то прописываем атрибут rel c параметром lightbox[roadtrip]:

<a href="images/example.jpg" rel="lightbox[roadtrip]" title="описание">
<img src="images/mini_example.jpg" alt=""/>
</a>

<a href="images/example2.jpg" rel="lightbox[roadtrip]" title="описание">
<img src="images/mini_example2.jpg" alt=""/>
</a>

<a href="images/example3.jpg" rel="lightbox[roadtrip]" title="описание">
<img src="images/mini_example3.jpg" alt=""/>
</a>

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