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

Наверное, многие встечали на форумах и прочих сайтах скрипт, который позволяет эффектно увеличивать изображение. После очередного поиска я остановился на 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>

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

Комментарии:

Добавил: Юлия (23-Sep 2009 19:37:02)

конечный результат: заменить код который делает Dreamweaver автоматически на код Javascript, который тоже меняет картинку при наведении на неё курсора, только эта смена происходит плавно, не сразу. Дело в том, что я живу в Германии, и у меня туго с терминами. У нас то терминалогия немецкая, иногда и с английским то не схожа. С лайтбоксом, не надо. Картинка, сама это меню, только в виде фото, при нажатии - переход на другую страницу. Вот эта фотография в черно.белом, а когда курсор Over в цвете. При нажатии переход на сл. страницу. Я весь код могу прислать, но это много. Могу и ссылку, как Вам удобнее.

Селькин Виталий:
Юлия, воспользуйтесь формой обратной связи. Отправьте сам код и ссылку. Постараюсь Вам помочь.

Добавил: Юлия (23-Sep 2009 1:42:25)

Добрый вечер Виталий, опять вопрос возник. Код:

<td width="52"><a href="fotos/referenzen/8_gr1.jpg" onMouseOver="MM_swapImage('Image2','','fotos/referenzen/8kl2.jpg',1)" onMouseOut="MM_swapImgRestore()" rel="lightbox"><img src="fotos/referenzen/8kl.jpg" name="Image2" width="52" height="408" border="0" id="Image2"></a></td>

как заменить код который делает Dreamweaver автоматически, для смены картинки при наведении курсора на картинку, на более элегантное решение, при котором смена картинок будет происходить плавно?
Благодарю, заранее.

Селькин Виталий:
Юлия, здравствуйте.
Вам какой конечный результат нужен? Что-то на подобии блогролла, в котором изображении открываются лайтбоксом, так?

Добавил: Julia Michaelis (20-Sep 2009 23:00:26)

Добрый вечер, Виталий, всё оказалось намного проще. Если добавить атрибут rel c параметром lightbox[roadtrip], то можно листать, даже не имея маленького изображения. На самом деле, я просто не достаточно владею программированием, обучаюсь по ходу. Вот и появляются дурацкие вопросы. Ешё раз благодарю за помощь.

Селькин Виталий:
Всегда рад помочь. Обращайтесь.

Добавил: Julia Michaelis (18-Sep 2009 14:58:12)

Здравствуйте, Виталий, хочу поблагодарить Вас за Вашу страницу. Очень содержательно и эстетично. С кодом я разобралась. Но походу возникают вопросы. Можно ли c параметром lightbox[roadtrip]листать в большом окне картинки. Например, есть одна маленькая картинка, у которой при нажатии открывается Lightbox, и в большом окне листаются несколько больших картинок. Их на экране в маленьком варианте нет. То есть маленькая картинка - изображение предмета. В больших - изображение деталей этого предмета. Буду очень благодарна за совет. Приятных выходных.
С уважением, Юлия Михаэлис.

Селькин Виталий:
Добрый вечер, Юлия.
Если честно, я Вас не понял. У Вас ОДНО маленькое изображение, по клику на которое должны листаться НЕСКОЛЬКО ДРУГИХ больших изображений? Я правильно Вас понял? За отзыв огромное спасибо. Рад стараться(:

Добавил: NoNameUser (16-Sep 2009 6:29:32)

Было бы полезно добавить такую функцию, как закрытие окна ЛайтБокса при клике по самой картинке, а также автоматический ресайз большого изображения по ширине экрана.

Селькин Виталий:
NoNameUser, это, как говорится, на вкус и цвет. Я также писал об аналогах(HighSlide JS,FancyBox, LightWindow 2.0). Просмотрите их, может Вас они заинтересуют.

Добавил: Julia Michaelis (06-Sep 2009 21:42:36)

Уважаемый Виталий, пожалуйста помогите разобраться. Попыталась под Вашим руководством подключить LightBox 2.04 на свою страницу. Всё проделала, но увеличенное изображение не появляется.Помогите разобратся.
С уважением,
Юлия Михаэлис.

Селькин Виталий:
Приветствую Вас, Юлия!
Опубликуйте полученный HTML-код или сюда, в комментарии, или воспользуясь формой обратной связи, мне на email.

LightBox 2.04 и эффект увеличения

Комментарии:

Добавление комментария:

Популярные статьи

Популярные уроки

Copyright ©2009, Selkin Vitaly. Design by Selkin Vitaly. Hosting of Best-Hoster. Cyclonet