Рубрика: 
Просмотров: 12422
Дата: 23.06.09Приветствую тебя, дорогой читатель!
Наверное, многие встечали на форумах и прочих сайтах скрипт, который позволяет эффектно увеличивать изображение. После очередного поиска я остановился на 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>Вот и всё! Т.к данный эффект очень популярен, то и аналогов в интернете огромное множество. Возможно в следующих статьях поговорим о других скриптах, похожих на этот. Удачи!
2.03.10
3.02.10
12.01.10
28.11.09
22.11.09
22.10.09
27.09.09
18.09.09
18.08.09
6.08.09