iLoad3 - скрипт галереи изображений.

· ·

Оффициальное использование на:

Auto.Mail.Ru;

DNS-Shop.Ru.

Установка:

Скачайте и распакуйте zip-архив с тремя файлами галереи "iLoad", затем загрузите файлы на свой сайт - скачать.

Откройте файл "iLoad.js" и измените путь до папки с изображениями на путь до папки с файлами "iLoad" на вашем сайте.

Затем откройте страницу, на которой вы собираетесь использовать галерею, и подключите скрипт перед закрывающим тегом "/body" так, как показано ниже. Не забудьте изменить путь до файла со скриптом.

Code

На этом установка закончена.

Для корректной работы галереи - "DOCTYPE" не обязателен. Если вы хотите подключить "iLoad" в шапку сайта, то уберите из самого конца файла скрипта вызов функции включения:

Code

.create()

После этого вы сможете подключить скрипт в любое место страницы, а инициализацию скрипта выполнить в нужный момент после загрузки страницы:

Code

Использование:

Для использования "iLoad" в обычном режиме к ссылке на изображение достаточно добавить атрибут [rel="iLoad"], и изображение будет открываться не на новой странице а в галерее:

Code

<a href="../ссылка на большое изображение" rel="iLoad"> Превью изображения или текст </a>

Название и описание:

"iLoad" читает название и описание фотографии из атрибута title. Для того чтобы добавить название к фотографии, пропишите его в аттрибуте title в ссылке на большое изображение:

Code

<a href="../ссылка на большое изображение" rel="iLoad" title="Название фотографии"> Превью изображения или текст </a>

Для добавления описания так же пропишите его в том же атрибуте, но на этот раз используйте разделитель "|" . Сам разделитель можно изменить в параметре "L.splitSign" в файле "iLoad.js". Посмотрите как оформляется название и описание:

Code

<a href="../ссылка на большое изображение" rel="iLoad" title="Название фотографии|Описание фотографии"> Превью изображения или текст </a>

Вы можете указать только описание без названия, просто пропустив его:

Code

<a href="../ссылка на большое изображение" rel="iLoad" title="|Описание фотографии без названия"> Превью изображения или текст </a>

Сети фотографий:

Галерея изображений "iLoad" позволяет создавать сеты фотографий, то есть наборы [альбомы]. Открыв фотографию, состоящую в сете, вы можете просматривать фотографии всего сета не закрывая "iLoad" и не перезагружая страницу. Так же группирование фотографий позволяет использовать слайдшоу. Чтобы создать сет используя ссылки, в атрибуте "rel" после "iLoad" поставьте разделитель "|" и напишите название сета. Вот пример создания простого сета:

Code

<a href="../ссылка на большое изображение" rel="iLoad|Название сета" title="Первая фотография"> Превью изображения или текст </a>
<a href="../ссылка на большое изображение" rel="iLoad|Название сета" title="Вторая фотография"> Превью изображения или текст </a>

Навигация:

В зависимости от выбранной конфигурации панелей, кнопки управления появятся либо сразу под фотографией, либо чуть ниже на графической панели. Они идентичны. Панели можно отключить в настройках.

В сете переключение между соседними фотографиями возможно щелчками на левую и правую части изображения, при этом справа и слева будут показываться небольшие стрелки [если эта опция включена в скрипте].

Закрыть "iLoad" можно нажав на темной области вокруг вьюпорта, либо щелкнув по кнопке с крестиком на одной из панелей.

Возможно управление с клавиатуры. Для переключения в сете можно использовать стрелки влево и вправо или клавиши "П" и "С". Так же для открытия определенной фотографии можно воспользоваться одной из цифр. Слайдшоу запускается клавишей "Shift" или "Ш", а выключается клавишей "Ctrl" или "З". "iLoad" выключается клавишей "Esc".

Всё.

Автор скрипта - StudioAD;
Материал подготовил - Rj.DiNex.

Последние темы на форуме:

Почтовые акки с паролями

Общение "часть 2 "

Обмен регистрациями (Бесплатная раскрутка вашего сайта)

Требуются Модераторы и Журналисты

Оцените HD - кинотеатр