Фотогалерея LIGHTBOX 2.04

В этом уроке мы изучим, как вставлять в html-страницы готовый скрипт фотогалереи, написанный профессиональными программистами.

Будем создавать фотогалерею на основе готового скрипта Lightbox2.04.

  1. Просмотрите фотогалерею яхт, созданную на базе этого скрипта. Откроется в новой вкладке/окне.

    Создание фотогалереи на сайте

  2. Скачайте здесь дистрибутив фотогалереи LIGHTBOX 2.04 .
  3. Создайте папку, в которой будете создавать фотогалерею.
  4. Скопируйте в нее дистрибутив фотогалереи lightbox2.04.zip и разархивируйте его.
  5. Запустите файл index.html, полученный из архива. Вы увидите следующую страницу (рис. 1).

    Создание фотогалереи на сайте

    Рисунок 1

  6. Щелкните по изображению с зелеными листьями. Получите увеличенное изображение этой миниатюры (рис. 2).

    Создание фотогалереи на сайте

    Рисунок 2

  7. Закройте это изображение, нажав на крестик. Мы опять вернулись на исходную страницу. Здесь на английском языке написана инструкция по использованию фотогалереи. Мы могли бы заняться переводом этого текста, но есть способ проще.

    Если порассуждать, мы уже имеем готовую фотогалерею. Нам остается только добавить свои фотографии, убрать из этой страницы все лишнее содержание и добавить свое.

  8. Откроем код страницы в блокноте и проанализируем его (рис. 3).

    Строка 6: в теге <title> Вы можете написать свой заголовок, который будет иметь Ваша web-страница;

    Строка 8: тег <link> связывает эту web-страницу с таблицей стилей, которая получена из архива и находится в папке css. Вы уже умеете работать с таблицами стилей, поэтому, открыв файл lightbox.css, Вы можете внести в него изменения, и тем самым задать другое оформление самой фотогалерее. Возможно, для этого Вам придется дополнительно почитать справочники по таблицам стилей;

    Строки 10-12: этот блок подключает готовый скрипт фотогалереи, которая находится в папке js (мы ее получили из архива). Здесь мы менять ничего не будем, как и в самих скриптах;

    Строка 15: это внедренная таблица стилей, которая отвечает за оформление самой web-страницы. Здесь Вы точно сумеете задать свое новое оформление, т.к. изучили таблицы стилей;

    Строка 22: здесь Вы и без моих подсказок догадались, что это заголовок самой web-страницы и текст под ним. Оба являются ссылками на интернет-ресурс разработчика фотогалереи. Этот текст можно заменить на свое содержание;

    Строка 27: эта строка включает в web-страницу миниатюру с зелеными листочками. Давайте проанализируем эту строку подробней. Читайте дальше текст после рисунка.

    Создание фотогалереи на сайте

    Рисунок 3

  9. Рассмотрим строку <a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>:

    <a href="images/image-1.jpg" rel="lightbox"> - это гиперссылка, при нажатии на которую загрузится изображение image-1.jpg из папки images. Это большое изображение (рис. 2), которое появляется при щелчке по миниатюре на web-странице;

    <img src="images/thumb-1.jpg" width="100" height="40" alt="" /> - это миниатюра , которая имеет название thumb-1.jpg, ширину 100 px (width="100"), высоту 40 px (height="40"), и расположена в папке images.

    Ну вот, в общем, и все.

    Сейчас Вам необходимо создать свои изображения в крупном размере, потом для каждого изготовить миниатюру в Photoshop. Все это сложить в одну папку и добавить на web-страницу. Структура гиперссылки на каждое изображение будет аналогична строке 27 на рисунке 3. Только имена Ваших миниатюр, больших картинок и папки могут быть другими.

Контрольное задание

Создать web-страницу, включающую:

  1. Заголовок web-страницы. Тему надо продумать предварительно, т.к. этой теме будет посвящена фотогалерея.
  2. Web-страница должна иметь фон, отличный от белого.
  3. Фотогалерею (не менее 10 изображений).
  4. Дополнительный пояснительный текст по данной теме (2-3 абзаца).