Cкрипт LightBox 2.04 и его применение на блогах | SelkinVitaly.RU
Cкрипт LightBox 2.04 и его применение на блогах | SelkinVitaly.RU

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

Рубрика: JavaScript

Просмотров: 12423

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

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

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

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

Добавил: Vikky (05-Feb 2010 0:05:38)

Здравствуйте, спасибо вам огроменное за такой сайт полезный! У меня тут вопрос назрел: что именно вставлять в атрибут rel c параметром lightbox[roadtrip]? новичок я, понимаете :(

Селькин Виталий:
Чтобы можно было перелистывать изображения (следующее и предыдущее), необходимо добавить тегу A следующее:

rel="lightbox[roadtrip]"

Добавил: Антонина (03-Feb 2010 10:38:11)

картинки отображаются не во всплывающем окне, а в отдельном :/ firefox 3.5.7, explorer 8 и Chrome 4 туда же, чую, что сама где-то напортачила :)

Селькин Виталий:
Антонина, попробуйте ещё раз установить, последовательно выполняя каждый пункт. Если не получится, то сделайте скриншот, залейте куда-нибудь и пришлите ссылку.

Добавил: Ex_Animal (28-Jan 2010 0:27:31)

Здравствуйте. Подскажите пожалуйста, можно ли в тег title подставлять что-либо кроме обычного текста, например ссылки или php код и как это сделать? В общем нужно чтобы при открытии картинки под ней вставка php кода была (include) с некоторыми параметрами. Спасибо.

Селькин Виталий:
1) В тэг заголовка страницы можно вставлять PHP-код. Например:

<title><?php echo $title; ?></title>

2) Вы хотите, чтобы выводилось под изображением что-то постороннее? Тогда лучше используйте этот скрипт.

Добавил: Александр (25-Jan 2010 11:17:28)

Доброе утро. Вроде все сделал как вы писали, но при просмотре нескольких картинок, не видны картинки hext и prev. Но при этом переходы работают. Подскажите где ошибся. Код ниже:


<div style="padding-top:5px; padding-bottom:5px; padding-right:3px; padding-left:3px; width:78px; height:78px; float:left; position: relative; top:0px; left:0px">
<div style="background: url(images/ramki/foto/frame_02_top.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0px; left:0px">
&nbsp;
</div>
<div  style="background: url(images/ramki/foto/frame_02_rep.png); width:78px; height:60px; repeat-y; padding:0px; position: relative; float:left; top:0 px; left:0px">
<a href="images/big_foto1.jpg" rel="lightbox[roadtrip]" title="Затонувший рыбачий корабль 'Аль Маль'. Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка." class="htext">
<b>Затонувший рыбачий корабль "Аль Маль". Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка.</b>
<img src="images/foto1.jpg" width="60" height="60" align="center" border="0" hspace="8" alt=""/></a>
</div>
<div style="background: url(images/ramki/foto/frame_02_bottom.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0 px; left:0px">
&nbsp;
</div>
</div>
<div style="padding-top:5px; padding-bottom:5px; padding-right:3px; padding-left:3px;  width:78px; height:78px; float:left; position: relative; top:0px; left:0px">
<div style="background: url(images/ramki/foto/frame_02_top.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0px; left:0px">
&nbsp;
</div>
<div  style="background: url(images/ramki/foto/frame_02_rep.png); width:78px; height:60px; repeat-y; padding:0px; position: relative; float:left; top:0 px; left:0px">
<a href="images/big_foto2.jpg" rel="lightbox[roadtrip]" title="Затонувший рыбачий корабль 'Аль Маль'. Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка." class="htext">
<b>Затонувший рыбачий корабль "Аль Маль". Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка.</b>
<img src="images/foto2.jpg" width="60" height="60" align="center" border="0" hspace="8" alt=""/></a>
</div>
<div style="background: url(images/ramki/foto/frame_02_bottom.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0 px; left:0px">
&nbsp;
</div>
</div>

<div style="padding-top:5px; padding-bottom:5px; padding-right:3px; padding-left:3px; width:78px; height:78px; float:left; position: relative; top:0px; left:0px">
<div style="background: url(images/ramki/foto/frame_02_top.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0px; left:0px">
&nbsp;
</div>
<div  style="background: url(images/ramki/foto/frame_02_rep.png); width:78px; height:60px; repeat-y; padding:0px; position: relative; float:left; top:0 px; left:0px">
<a href="images/big_foto3.jpg" rel="lightbox[roadtrip]" title="Затонувший рыбачий корабль 'Аль Маль'. Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка." class="htext">
<b>Затонувший рыбачий корабль "Аль Маль". Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка.</b>
<img  src="images/foto3.jpg" width="60" height="60" align="center" border="0" hspace="8" alt=""/></a>
</div>
<div style="background: url(images/ramki/foto/frame_02_bottom.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0 px; left:0px">
&nbsp;
</div>
</div>

<div style="padding-top:5px; padding-bottom:5px; padding-right:3px; padding-left:3px; width:78px; height:78px; float:left; position: relative; top:0px; left:0px">
<div style="background: url(images/ramki/foto/frame_02_top.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0px; left:0px">
&nbsp;
</div>
<div  style="background: url(images/ramki/foto/frame_02_rep.png); width:78px; height:60px; repeat-y; padding:0px; position: relative; float:left; top:0 px; left:0px">
<a href="images/big_foto4.jpg" rel="lightbox[roadtrip]" title="Затонувший рыбачий корабль 'Аль Маль'. Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка." class="htext">
<b>Затонувший рыбачий корабль "Аль Маль". Глубина 35 метров. Затонул в 1979 г., напоровшись на риф. Палубная надстройка.</b>
<img  src="images/foto1.jpg" width="60" height="60" align="center" border="0" hspace="8" alt=""/></a>
</div>
<div style="background: url(images/ramki/foto/frame_02_bottom.png);  width:78px; height:8px; padding:0px; float:left; position: relative; top:0 px; left:0px">
&nbsp;
</div>
</div>

Селькин Виталий:
За отображение стрелок влияют параметры, указанные в таблице стилей (style.css). Откройте её и проверьте, правильно ли указана директории (16 и 17 строки) расположений данных файлов.

Добавил: Андрей (16-Jan 2010 16:40:59)

Здравствуйте. Устанавливал LightBox и FancyBox. По FancyBox задал вопрос в его теме. А вот вопрос по LightBox: В Опере (и только в ней) окно с изображением открывается ОЧЕНЬ НИЗКО за пределами экрана, но в пределах страницы. Как с этим бороться? Заранее благодарен!!!

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

Добавил: Alex (08-Jan 2010 0:22:12)

Спасибо вдуплил, огромное спасибо за скрипт оч выручил

Селькин Виталий:
Рад, что вы разобрались. Всегда пожалуйста:)

Добавил: Alex (07-Jan 2010 22:01:37)

Привет, отличнейший скрипт, но у меня беда. Все делаю верно все работает, но нет картинки CLOSE Куда я только не запихнул ее во все дерриктории и тд , не отоброжается рисунок этот и все (((

Добавил: ИИ (25-Nov 2009 13:30:11)

Вот можно вопрос не в тему немного. Сам lightbox - c ним все понятно, есть готовые .js, .css - поключай и все работает только "rel="lightbox"" укажи. Но вот проблема есть, а как бы эти .js и .css в исходный код включить? Проблема у меня в том, что нет ссылок (http:\\lightbox.js ... и т.д.), нет возможности расшарить где-то эти файлы чтоб на них сослаться. Как здесь быть? Можно ли их в исходный текст страницы загнать или может есть свободные(без вредоносного кода) ссылки на lightbox.js? Извините я полный профан в html :(

Селькин Виталий:
Сделать так можно, но крайне нежелательно. Для чего это Вам?

1) Содержимое CSS помещаете в:

<style type="text/css">
<!--
содержимое таблицы стилей
-->
</style>

2) Содержимое JS-файлов:

<script type="text/javascript">
тут JS
</script>

Добавил: Олег (05-Oct 2009 12:25:41)

Спасибо помогло, поковырял чуток (поменял регистр в именах переменных) и оставил ' ' только в title='%s'. Если оставить '%s' везде то результат выборки получается другой. Странный этот MySQL ), работаю с ним первый раз. И еще вопросик - как уменьшить задержку появления нижней панели (где отображается этот самый title и N из n).
з.ы. Под флудом имелось ввиду то, что первый коммент был добавлен в 4-х экземплярах.

Селькин Виталий:
Наоборот, при правильном синтаксисе должно всё верно и точно выводить, всегда заключаю так каждый параметр в одинарные кавычки - всё работает.
По поводу эффекта: в lightbox.js (55 строка) есть параметр, который отвечает за скорость анимации в целом. Попробуйте с ним поиграться.
ЗЫ Аааа.. Вот Вы о чём. Было дело, было(:

Добавил: Олег (04-Oct 2009 21:07:31)

Спасибо за ответ. Про бордер дошло само после написания коммента. (извиняюсь, что нафлудил). Извлекается из базы нормально, я пробовал извлекать не в параметр title, все извлекается полностью, без обрезок. Ниже приведен кусочек кода который дает обрезку после первого пробела (сам не пойму почему)


<?php 
$result = mysql_query ("SELECT model,name_prev,name_full FROM shoes WHERE collection='$colid'",$db);
$stroka = mysql_fetch_array($result);
do {
printf ("<a href='%s' rel='lightbox[roadtrip]' title='%s'><img src='%s' alt=''/></a>",$stroka["name_full"],$stroka["model"],$stroka["name_prev"]);
}
while($stroka =mysql_fetch_array ($result));?>

Селькин Виталий:
Синтаксис то верный. Попробуйте поэксперементировать с именем и типами полей в БД. По своему опыту могу сказать, что мне частенько интерпретатор выдавал ошибку в запросе. Правил имя полей - помогало. Немного подправил код. Попробуйте так.
PS Ни какого флуда нет, извиняться не за что(:


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

Имя *:

Email:

Текст *:

Символы на картинке *:

RSS-подписка
RSS-подписка на статьи по основам сайтостроения RSS-подписка на полезные уроки по web-языкам
Разделы статьй
Каталог товаров
Разделы уроков
Последние статьи
Последние уроки