Последние изменения: 28/03/2007

Скрипты для открывания фотографий

· История развития
· Изменения
· OPH3
· OPH5

Здесь кратко описаны некоторые скрипты, разработанные мной для моего сайта GOZA.ru. Все они предназначены для открывания фотографий на полный экран, а потому называются Open PHoto - OPH.

История развития

Первая версия OPH0 (1999-2001) выполняла довольно простую задачу - открывала фото на весь экран нового окна и по клику на фотографии закрывала окно. Хранились скрипт и массив имён фотографий в каждой странице фотогалереи.

Вторая версия скрипта OPH1 (2001-2005) полностью рисовала все фреймы фотогалереи с разделами, при выводе нового раздела вместо открытия новой страницы скриптом менялось содержимое основного фрейма. Всё бы хорошо, но при использовании такого подхода исключалась возможность давать прямые ссылки на разделы фотогалереи. Хранились скрипт и массив имён фотографий в фрейме, выполняющем роль меню. Одна из проблем заключалась в добавлении новых фоторафий в массив - не всегда хватало пустых номеров в разделе под очередную порцию фотографий, что влекло необходимость ручной перенумерации всей последующей части массива. При выводе фотографии на полный экран использовался JS - фейдер.

В одной из последний версий OPH2 (2003-2006) скрипт снова перекочевал в каждую из страниц галереи. Из скрипта убраны фейдер и всякие сложности.

Скрипт ОPH3 (2006) первым был выделен в отдельный js файл (наконец-то!). При этом в теле каждой страницы фотогалереи только строки вызова скрипта и массив фотографий. Подробно скрипт описан [ниже].

Скрипт OPH4 (2006) так и не был использован. Основное его отличие заключалось в использовании графических иконок вместо текстовых кнопок управления перемоткой фотографий. Скрипт получился несколько громоздким - ведь у каждой из кнопок было 3 состояния (активная, выделенная, неактивная). В общем, не понравилось мне это дело.
Одновременно разрабатывались скрипты для открывания одиночных фотографий (Open Single Foto - osf.js), для открывания группы одиночных фотографий (Open Single Foto Gallery v1.0 - osfg.js) и открывания нескольких фотографий по одной ссылке (osfg-f.js). Некоторое время osf и osfg применялись в разделе фото. Однако, развитие скриптов было тупиковым, требовался другой подход, реализованный в ohp5.

Скрипт OPH5 (2007) хоть и является дальнейшим развитием моих скриптов, открывающих фотографии, тем не менее, не заменяет собой OPH3, а дополняет его, в ряде случаев работая совместно. В отличии от OPH3, OPH5 не создаёт таблицу с превьюшками, а ищет превьюшки и ссылки на фотографии в тексте html. Соответственно, и массив создаётся скриптом. Описание OPH5 [ниже].

↑ Изменения

28/03/2007 OPH3.2 и OPH5.2. Добавлена поддержка Mozilla. Проблема была в нежелании Firefox по-нормальному интерпретировать ссылки вида href=# (то бишь ссылка в никуда, необходимая для запуска скрипта из себя по onclick). Решение оказалось проще, чем я мог предположить - скрипт запускается по href=javascript:[чё делать].
Пока что не решена проблема с Mozilla, которая, судя по всему, позволяет запустить скрипт до полной загрузки страницы и создания коллекции картинок и ссылок. В результате скрипт открывает пустой экран. Решается только обновлением страницы.

26/06/2007 OPH3.2 и OPH5.2. Исправлена глупая ошибка совместимости. При совместном использовании OPH3.2 и OPH5.2. последний скрипт имел преимущество при составление массива переменных. А переменные имели идинаковые имена в обоих скриптах (f[i] - фотография, k[i] - комментарий). Проблема решена переименованием в OPH5.2. f на ff и k на kk.

↑ Open PHoto v3.2 - oph3.js (2006)

OPH3 имеет следующие функции:
• вывод превьюшек таблицей в 4 столбца с комментариями;
• вывод фото на полный экран по клику на превью.

В режиме вывода фото на полный экран:
• переход на предыдущую фотографию, на следующую, на первую, на последнюю;
• затемнение кнопок [первая] и [предыдущая], если текущая фотография первая и, соответственно, кнопок [следующая] и [последняя], если текущая фотография последняя.
• вывод сообщения "Фотография такая-то не найдена, сообщите пожалуйста туда@то", если файл с фотографией не найден на сервере.
• закрывание окна с фотографией по клику на кнопку [закрыть] или по клику на фото.

Совместимость: полная с Internet Explorer, Maxthon (MYIE2), Opera, Mozilla Firefox.
Поддерживаемые форматы файлов и расширений: .jpg
Формат имени превью и расположение: имя фотографии с префиксом "с" (маленькая латинская) в том же каталоге, что и большие фотографии. Т.е. если имя фото - img_1789.jpg, то имя превью должно быть cimg_1789.jpg.

Для работы требуется:
• Cам скрипт oph3.js. [Скачать скрипт oph3.js]
• Таблица каскадных стилей my.css. [Скачать my.css]
• Небольшой кусок скрипта для включения в страницу (см. ниже)
• Пустой файл photka.htm
Всё это должно лежать в том же каталоге, что и html, в который вставляется скрипт.

Кусок скрипта, вставляемый в html:  <CENTER><div class=dtxt>Кликни мышкой по картинке, чтобы увеличить фото на весь экран. Для возврата кликни мышкой по фотографии.<br><br></div> <script LANGUAGE="JavaScript"></script> <SCRIPT language=JavaScript src="oph3.js" type=text/javascript></SCRIPT> 

Краткая схема работы скрипта
Скрипт стартует в момент загрузки страницы
Берёт наш массив
Формирует таблицу с превьюшками
При клике на превьюшке запускается вторая часть скрипта
Открывается пустой файл photka.htm
Создаётся содержимое файла photka.htm - в него выводится целиком массив и небольшой скрипт, позволяющий перематывать фотографии вперёд/назад и т.д.
Дальше, по необходимости, работает скрипт, выведенный в photka.htm

Пример работы скрипта:

Кликни мышкой по картинке, чтобы увеличить фото на весь экран. Для возврата кликни мышкой по фотографии.

↑ Open PHoto v5.2 - oph5

Как бы не был удобен для меня oph3 для создания фотогалерей, тем не менее у меня возникла необходимость открывать на весь экран одиночные фотографии, размещённые в теле страницы. Кроме того, неплохо было бы некоторые фотографии объёдинять в группы - т.е. кликаем на любую из фотографий группы, открывается фотография из которой кнопками [вперёд] и [назад] можно перейти на просмотр другой фотографии группы.
Поставленной задаче неплохо соответствовал готовый скрипт Lightbox JS v2.0. Однако, он имел некоторые недостатки: во-первых скрипт имел большие размеры - около 150 КБ. Это, зачастую, больше размера открываемой страницы вместе с фотографиями. Во-вторых, скрипт, открывая фотографии, использовал красивые эффекты, изменяя размеры области отображения фотографии, используя плавное появление и исчезание фотографий. Не всегда эти эффекты были нужны. И, в-третьих, фотография открывалась в том же окне, что, в ряде случаев, неудобно.

Поскольку приспособить Lightbox JS v2.0 под мои требования не удавалось, я написал свой собственный скрипт OpenPHoto 5.0, некотрые идеи которого навеяны Lightbox.

OPH5 может:
· Открывать одиночные фотографии, в том числе, объединяя их в группы.
· При необходимости можно открыть по одной превьюшке или ссылке группу фотографий.
· Если страница загружена не до конца, или не найден файл скрипта, фотографии всё равно будут открыватся обычным для соответствующего браузера способом.
· Остальные фунции идентичны OPH3.

Совместимость: полная с Internet Explorer, Maxthon (MYIE2), Opera, Mozilla Firefox.
Поддерживаемые форматы файлов и расширений: любые графические файлы, без проверки расширений.
Формат имени фотогрифии, превью и их расположение: превью не обязательно, возможно использование текстовой ссылки; имя превью не зависит от имени фотографии, расширение и расположение превью и фото - любое.

Для работы требуется:
· Cам скрипт oph5.js. [Скачать скрипт oph5.js]
· Таблица каскадных стилей my.css. [Скачать my.css]
· 2 небольших куска скрипта для включения в страницу (см. ниже)
· Пустой файл photka.htm
Всё это должно лежать в том же каталоге, что и html, в который вставляется скрипт.
Для работы скрипта в страницу включаются 2 небольших куска.
В начало страницы (например, сразу после <body>) вставляется это:
<script src="oph5.js" type="text/javascript"></script>

В конец страницы (куда-нибудь после ссылок на фотографии) вставляется это:

<script LANGUAGE="JavaScript">

init();

</script>

В ссылки (в тэги anchor или просто a), открывающие фотографии, добавляется rel="oph5".
Для объединения фотографий в группы, после oph5 добавляется идентификатор группы. Например, если мы хотим объеденить фотографии в группу "c" добавляем rel="oph5[c]".
Если в ссылке указать title, к фотографии будет добавлена подпись.

Пример вызова функции:

<a HREF=f3/img_0602.jpg class=m8 rel="oph5" title="Я и Анюта на одной из первых покатушек по Москве">[Фотографии]</a>

Для вызова нескольких фотографий по одной превьюшке, просто добавьте на первую фотографию полноценную ссылку, а для остальных не указывайте ничего между тэгами <a> и </a>

[Пример работы скрипта OPH5]

В кратце, скрипт работает следующим образом.
Когда страница загружена до конца (или, точнее, до init();), запускается первая часть скрипта.
Собирается коллекция тэгов anchor
Отбираются те, у которых указан rel, содержащий текст "oph5"
Отобранным тэгам прописыватся функция по клику, запускающая вторую часть макроса
При клике на ссылке (или превьюшке) запускается вторая часть функции
Если в тексте rel прописано чётко "oph5", открывается файл photka.htm
В файл photka.htm выводится содержимое, необходимое для открывания фотки.
Открывается файл photka.htm.
Если в тэге, из которого запущена функция в rel, кроме "oph5" содержится ещё что-либо (например oph5[group1] или oph5g1), считаем это группой.
Отбираем снова все тэги A и ищем те, в которых такой же rel
Из выбранных тэгов выдёргиваем ссылки и комментарии и создаём массив имён файлов и комментариев.
Дальше действуем так же, как с OPH3.
Открываем пустой файл photka.htm
Создаём содержимое файла photka.htm - в него выводится целиком массив и небольшой скрипт, позволяющий перематывать фотографии вперёд/назад и т.д.
Дальше, по необходимости, работает скрипт, выведенный в photka.htm