Как установить light-box на страницу сайта?
Приветствую всех посетителей сайта! Нынешная статья посвящена Lightbox 2 - небольшой JavaScript библиотеке, реализованной на языке javascript с использованием ajax-движка Prototype Framework и библиотеки Scriptaculous Effects. Lightbox корректно работает во всех современных браузерах, включая IE 6 и легко устанавливается.
Для чего используется Lightbox? В основном в галереях для показа изображений - "превьюшек". Фон страницы при этом затемняется, и изображение разворачивается до полного размера, не перезагружая страницу. Также успешно применяется и при выводе одиночных изображений на сайте: в статьях, анонсах, новостях... И места мало занимает, и смотрится эффектно, и можно рассмотреть все детали, что особо актуально для скриншотов.
Скрипт Lightbox позволяет просматривать как одиночные изображения, так и всю галерею, используя элементы навигации, отображающиеся при просмотре полномасштабного изображения. Что ж, давайте разберем пошагово процесс установки Lightbox на свой сайт.
Шаг 1.
Скачиваем архив с библиотекой Lightbox 2 с сайта разработчика http://lokeshdhakar.com/projects/lightbox2/. Сейчас для скачивания доступна последняя версия Lightbox 2.7.1. Извлекаем файлы в папку и загружаем ее на сервер. Можно извлеченные файлы скопировать и сразу распределить по серверным папкам: скрипты - в папку со скриптами, картинки - в папку images, а стили - в файл со стилями.
Состав архива выглядит следующим образом: папка со стилями, с картинками и со скриптами.
Статьи по оптимизации сайта
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Шаг 2.
Подключаем скрипты и стили к вашей странице, прописав между тегами <head></head> следующий код:
<script src="путь_к_вашей_папке_скриптов/jquery-1.10.2.min.js"></script>
<script src="путь_к_вашей_папке_скриптов/lightbox-2.6.min.js"></script>
<link href="путь_к_вашей_папке_стилей/lightbox.css" rel="stylesheet" />
Шаг 3.
Добавляем необходимые изображения для просмотра в Lightbox. Для этого прописываем нужный код между тегами <body></body> в том месте, где будут выводиться изображения.
Давайте возьмем для примера три картинки, которые должны по клику на них открывать полноразмерные изображения. Вариант первый - для одиночных картинок без использования навигации просмотра.
<a href="img/image-1.jpg" data-lightbox="image-1" title="Описание изображения 1">Текст ссылки 1</a>
<a href="img/image-2.jpg" data-lightbox="image-2" title="Описание изображения 2">Текст ссылки 2</a>
<a href="img/image-3.jpg" data-lightbox="image-3" title="Описание изображения 3">Текст ссылки 3</a>
* атрибут title можно заполнять по желанию. Если он заполнен, то его содержимое будет выведено под всплывающей картинкой.
Вариант второй для группы картинок, просматривать которые можно с помощью элементов навигации, не закрывая модальное окно с изображением.
<a href="img/image-1.jpg" data-lightbox="roadtrip" title="Описание изображения 1">Текст ссылки 1</a>
<a href="img/image-2.jpg" data-lightbox="roadtrip" title="Описание изображения 2">Текст ссылки 2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip" title="Описание изображения 3">Текст ссылки 3</a>
Как видите разница между строками кода лишь в атрибуте data-lightbox. В первом случае мы указываем уникальное название каждого изображения, во втором случае - название группы изображений, оно одинаково для всех строк..
Шаг 4. Дополнительный для тех, кто вместо англоязычной надписи "image 1 of 3" при показе картинок хочет видеть русскую надпись "изображение 1 из 3". Для этого достаточно в файле lightbox-2.6.min.js в строке 13 заменить строчку:
return "Image " + b + " of " + c
на такую
return "Изображение " + b + " из " + c, то есть просто перевести ее на русский язык.
Шаг 5. Загружаете страницу с установленным Lightbox на сервер и любуетесь результатом.
На этом материал завершаю, изучайте, скачивайте архив и тренируйтесь в установке.
Всем удачной работы и до новых встреч! С ув. Светлана (Svetlana_TSV)
В папке с картинками внутри есть еще одна папка "demopage", в ней хранятся картинки, используемые по умолчанию, превью и полноразмерные.
Вам нужно заменить их своими, если вы загружаете их в отдельную папку, предназначенную для light-box. Если ваши картинки для light-box будут браться из общей папки с картинками, то папку demopage удаляйте, оставив только 4 изображения для навигации.
Из папки скриптов загружаете на сервер три выделенных файла. Если у вас есть отдельная папка для скриптов на сервере, то копируете их туда, если еще не создали, то перетягиваете эту папку в корневую директорию.
Не забудь заглянуть в свою почту и подтвердить подписку!