Очень простые и функциональные скрипты фотогалереи 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> <!-- Конец функции показа фотографий --> |
Теперь рассмотрим 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:
А фотографии обязательно должны находиться на своем сервере или скрипт может выводить по html-коду самого изображения?
Честно не пробовал. Может быть и нельзя так сделать.