Скрипты фотогалереи OPH3 и OPH5

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

В режиме вывода фото на полный экран OPH3 и OPH5 обеспечивают:

• переход на предыдущую фотографию, на следующую, на первую, на последнюю;
• деактивацию кнопок [первая] и [предыдущая], если текущая фотография первая и кнопок [следующая] и [последняя], если текущая фотография последняя.
• вывод сообщения «Фотография (имя файла фото) не найдена, сообщите пожалуйста на e-mail», если файл изображения не найден на сервере.
• закрытие окна с фотографией по клику на кнопку [закрыть] или по фото.

Скрипты поддерживаются браузерами: Internet Explorer, Maxthon (MYIE2), Opera, Mozilla Firefox.
Поддерживаемые форматы файлов и расширений: *.jpg — у OPH3 и любые графические файлы, без проверки расширений – у OPH5.

OPH3 имеет следующие функции:

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

Как задать превью для фото?

Превью — уменьшенная в размерах копия оригинала изображения. Имя превью фотографии должно содержать «с» (маленькая латинская) и лежать в папке, с большими фотографиями. Например, если имя фото — foto_123.jpg, то имя превью должно быть cfoto_123.jpg.

Для установки требуется:

• Cам скрипт oph3.js. (Скачать скрипт oph3.js)
• Таблица стилей my.css. (Скачать my.css)
• Небольшой код для вставки на страницу (см. ниже)
• Пустой файл photka.htm

Код,который нужно вставить в html-страницу:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- Начало функции показа фотографий -->
<script language ="javascript"><!--
f = new Array(); k = new Array();
f[0] = "путь к foto_123";k[0] = "Описание 1";
f[1] = "путь к foto_124";k[1] = "Описание 2";
...
f[N] = "путь к файлу N";k[N] = "Описание N";
var end=f.length;
var fld="имя каталога (например fotki)"; //каталог, где лежат фотки.
var tit="Заголовок окна"; //заголовок окна
//--></script>
<script language=javascript src="oph3.js" type=text/javascript></script>
<!-- Конец функции показа фотографий -->

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

Теперь рассмотрим OPH5.
Возможностей у OPH5 больше, чем у OPH3. OPH5 уммеет:

• Открывать одиночные фотографии и объединять их в группы.
• Можно открыть по одной превьюшке или ссылке группу фотографий.
• Остальные функции такие же, как и у OPH3.

Формат имени фотографии, превью и их расположение: превью необязательно (можно использовать текстовоую ссылку) имя превью не зависит от имени фотографии, любой формат и расположение превью и фото.

Для установки OPH5 потребуется:

• Cам скрипт oph5.js. (Скачать скрипт oph5.js)
• Таблица стилей my.css. (Скачать my.css)
• 2 небольших кода для вставки на html-страницу (см. ниже);
• Пустой файл photka.htm

Для работы скрипта на страницу включаются 2 небольших кода.

В начало страницы (например, сразу после тега body) вставляется это:

1

<script src="oph5.js" type="text/javascript"></script>

А после ссылок на фотографии вставляется это:

1
2
3

<script language="JavaScript">
init();
</script>

В ссылки, открывающие фотографии, нужно добавить rel=»oph5″.

Для объединения фотографий в группы, после oph5 добавляется идентификатор группы. Например, если мы хотим объединить фотографии в группу «g1″ добавляем rel=»oph5g1″.
К изображению можно будет добавить описание, добавив title=»».

Код, который нужно будет добавить на страницу сайта, будет таким:

1
2
3
4
5
6
7
8
9
10

<script src="oph5.js" type="text/javascript"></script>
<a href= "путь к foto1.jpg" rel="oph5g1" title="описание фото 1"><img src="путь к preview01.jpg" title="описание превью">
<a href= "путь к foto2.jpg" rel="oph5g1" title="описание фото 2"></a>
<a href= "путь к foto3.jpg" rel="oph5g1" title="описание фото 3"></a>
<a href= "путь к foto4.jpg" rel="oph5g1" title="описание фото 4"></a>
…
<a href= "путь к fotoN.jpg" rel="oph5g1" title="описание фото N"></a>
<script language="javascript">
init();
</script>

Если Вы будете вставлять на одну страницу от двух и более превьюшек для открытия разных групп фотографий, то код должен быть следующим (пример для двух превью, открывающих две разные группы изображений):

1
2
3
4
5
6
7
8
9
10

<script src="oph5.js" type="text/javascript"></script>
<a href= "путь к foto01.jpg" rel="oph5g1" title="описание фото 01"><img src="fotki01/preview01.jpg" title="описание превью">
<a href= "путь к foto02.jpg" rel="oph5g1" title="описание фото 02"></a>
<a href= "путь к foto03.jpg" rel="oph5g1" title="описание фото 03"></a>
<a href= "путь к foto04.jpg" rel="oph5g1" title="описание фото 04"></a>
…
<a href= "путь к foto0N.jpg" rel="oph5g1" title="описание фото 0N"></a>
<script LANGUAGE="JavaScript">
init();
</script></div>

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