Все для Веб мастера и создания сайтаВВЕДИТЕ ВАШ ПОИСКОВЫЙ ЗАПРОС В ЭТУ ФОРМУ И НАЖМИТЕ НА КНОПКУ "ПОИСК"
В этой статей я постараюсь описать как можно “прикрутить“ к сайту LightBox v 2.0
Для начало я расскажу, что же такое LightBox и для чего он нужен. Lightbox – простой JS скрипт, отображающий изображения на текущей странице,
на страницу можно поместить уменьшенное изображение, нажав на него открывается красивое окошко, где это изображение будет показано в оригинальном размере,
самое главное это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах. Взять скрипт и посмотреть демо версию можно .
Теперь разберем какже это чудо встроить в нашу html страничку.
Установка LightBox:
1. Lightbox использует JavaScript библиотеки Prototype Framework и Scriptaculous, нам нужно будет подключить в нашу страничку три файла, для этого вставьте
следующий код в вашу страничку между тэгами <head> и </head>
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
2. Дальше нам нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте в вашу страничку следующий код, между тэгами <head> и </head>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
3. Потом проверьте в файле CSS ссылки на prev.gif next.gif. Также убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.
Использование LightBox:
1. Добавляем такую ссылку после тэга<body>, этим кодом мы сделали LightBox для картинки image-1.jpg, таким образом можно подключить и другие картинки. Атрибут title служит
для подписи картинки, его можно и не использовать.
<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”><img src=” images/image.jpg”></a>
2. Если у вас есть группа превьюшек, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут rel - имя группы в квадратных скобках. Пример:
href=”images/image-1.jpg” rel=”lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>
Все, надеюсь вы поняли как использовать LightBox на своих страничках. Удачи!
Автор статьи: FlashRipper
Сайт:
E-mail: flashripper@yandex.ru
Понравилась статья? Если да, то не забудьте ее прокомментировать. Многим будет интересно прочитать ваше мнение. А если понравился блог, не забудьте добавить его в закладки и подписаться на обновление блога по RSS Ленте.
Эта запись опубликована Понедельник, Октябрь 22nd, 2007 в 22:23 Рубрики: Ссылки, Статьи по JS, CSS, HTML. Подпишитесь на RSS 2.0 ленту комментариев. Вы можете оставить комментарий или трекбек со своего сайта.
Обсудите эту новость на news2.ru…
…
I’m sure it’s not true! If it was, nothing lake that would have been posted! It sounds so weird! I doubt that anyone would ever believe it!