Задание 5_Инфографика / Студенту_5 / Галерея Lightbox / Галерея LightBox
.docПОДГОТОВКА
Скопировать в свою папку из примера папки css и js.
В папку images скопировать шесть служебных рисунков.
Галерея LightBox
Источник: http://www.webmasters.by/articles/web-programming/50-create-gallery-lightbox2.html
1. Установка LightBox: 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,builder "></script> <script type="text/javascript" src="js/lightbox.js"></script>
2. Затем нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте на страницу следующий код (между тэгами <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. (ЗДЕСЬ ВСЁ В ПОРЯДКЕ)
4. Использование LightBox: а. Вставляем ссылку в тело документа, затем к ссылке добавляем атрибут rel="lightbox". Например:
<a href="images/image-1.jpg" rel="lightbox" title="Название"><img src=” images/image.jpg”></a>
Атрибут title необходим для добавления подписи к картинке. б. Если Вы хотите сгруппировать несколько превьюшек, например, по определенной тематике, то нужно дополнительно включить в атрибут rel имя группы в квадратных скобках.
<a 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 2