|
| ||||||
|
Lightbox JS v2.0. Наложение изображений на текущую страницу.Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров. Лайтбокс - реализация простого скрипта для наложения изображений на текущую страницу. Работает практически на всех браузерах. В версии 2.0 добавлена возможность просмотра группы изображений с перемещением по ним с лёгкостью визуальных эффектов. Для навигации при просмотре группы изображений применяйте кнопки NEXT и PREV. Пример одиночного изображения:
Действия по установке:
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через 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="Группа Ранетки" 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. | |||||
| ||||||