Рекомендовать карту

Lightbox JS v2.0. Наложение изображений на текущую страницу.


Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Лайтбокс - реализация простого скрипта для наложения изображений на текущую страницу. Работает практически на всех браузерах. В версии 2.0 добавлена возможность просмотра группы изображений с перемещением по ним с лёгкостью визуальных эффектов. Для навигации при просмотре группы изображений применяйте кнопки NEXT и PREV.

Пример одиночного изображения:

Группа Ранетки

Действия по установке:


Исходники (352 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в текущую папку lightbox. Открыв эту папку, Вы увидите папку images, папку lightbox2.04 и файл demo.html. Можно открыть файл demo.html непосредственно в браузере и посмотреть работу скрипта. Всё должно изумительно работать.

Изображения из папки images скопируйте в одноименную папку на вашем сайте. Папку lightbox2.04 закачайте в «корневую папку» сайта. Туда же закачайте файл demo.html - это пример функционирования данного эффекта. Открыв его в браузере на своём сайте, Вы увидите полную рабочую картину.

Итак, мы проверили demo-работу скрипта. Далее будем устанавливать показ своих изображений.

1. Подготовьте изображения в двух вариантах - большие и маленькие и разместите их в папке images. Размеры изображений удобно менять в программе Paint.NET, которая есть в арсенале установленной операционной системы на компьютере.

2. Пропишите стили из файла lightbox.css в стилях сайта между тегами <style type="text/css"> и </style>, а лучше сделайте ссылку на файл стилей между тегами <head> в строке:


<link rel="stylesheet" href="lightbox2.04/css/lightbox.css" type="text/css">


3. Подключите эти три ява-скрипта в вашем разделе <head> или <body>:


<script type="text/javascript" src="lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox2.04/js/lightbox.js"></script>


4. Этот код разместите в <body>. Вставьте изображения, в первую очередь названия больших, затем маленьких. В атрибуте title можно указать заголовок или текст.


<a href="images/b_11018.jpg" rel="lightbox" title="Группа Ранетки"

<img src="images/b_11018mini.jpg" width="100" height="60" border="0" alt="Группа Ранетки"></a>

5. Если у Вас несколько последовательных изображений, которые Вы желаете сгруппировать, дополнительно в квадратных скобках укажите название (имя) группы. Например:

 

<a href="images/image-1.jpg" rel="lightbox[Ранетки]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[Ранетки]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[Ранетки]">image #3</a>

Количество изображений можно увеличить в зависимости от вашего желания.


Пример группы изображений:

Группа Ранетки Группа Ранетки Группа Ранетки

Код группы изображений:


<a href="images/847975951.jpeg" rel="lightbox[Ранетки]" title="Группа Ранетки"><img src="images/847975951mini.jpg" width="100" height="60" border="0" alt="Группа Ранетки"></a>
<a href="images/ranetki.jpg" rel="lightbox[Ранетки]" title="Группа Ранетки" ><img src="images/ranetkimini.jpg" width="100" height="60" border="0" alt="Группа Ранетки"></a>
<a href="images/d1234fa204cd.jpeg" rel="lightbox[Ранетки]" title="Группа Ранетки"><img src="images/d1234fa204cdmini.jpg" width="100" height="60" border="0" alt="Группа Ранетки"></a>



Это всё о Lightbox2. Успехов в освоении нового материала! Ваш L.M.


Ваше мнение по материалу, изложенному на сайте




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика