Домашние Картинки разработка веб-сайтов в Челябинске
(351) 777-94-64info@homepictures.ru
/Полезное/Программы, скрипты/Javascript-библиотека фотогалереи

Javascript библиотека фотогалереи

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

Код класса расположен в файле hpgallery.js, который надо подключить в вашем html файле:

<script language="JavaScript" type="text/javascript" src="/hpgallery/hpgallery.js"></script>

Папка размещения файла hpgallery.js может быть любой (в нашем случае hpgallery в корне сайта), в этой же папке должны находится вспомогательные графические файлы, которые входят в библиотеку.

Для подключения файла вы должны инициализировать класс просмотрщика, создав экземпляр класса new hpGallery(). В качестве параметра к конструктору можете указать идентификатор (id) контейнера, содержащего уменьшенные копии изображений (по умолчанию используется id="imgbond"). Создание различных экземпляров галереи (вызов конструкторов с различным входящим параметром id), позволит вам создать несколько независимых галерей на одной странице. Логично инициализировать класс после загрузки всей страницы, в обработчике окна onload:

<script type="text/javascript">
window.onload = function(){ new hpGallery(); }
</script>
или лучше, если у вас несколько обработчиков,
<script type="text/javascript">
if (typeof window.addEventListener != 'undefined') window.addEventListener('load', hpgInit, false);
else if (typeof window.attachEvent != 'undefined') window.attachEvent('onload', hpgInit);
function hpgInit(){  new hpGallery(); }
</script>

Для корректной работы библиотеки, необходимо оформить html код, содержащий уменьшенные копии изображений, придерживаясь правил:

  1. Все уменьшенные копии поместить в контейнер с идентификатором id="imgbond", если вы не используете при вызове конструктора параметр, или указать свой идентрификатор, если передаете в конструктор его имя.
  2. Каждую уменьшенную копию "завернуть" в ссылку <a>, в которой в аттрибуте href="" указать путь до полноразмерной картинки. При необходимости можете указать аттрибут title.
  3. В уменьшенной копии картинки в аттрибуте alt="" указать заголовок картинки, который будет отображаться при показе полноразмерного изображения. Если alt не указан, в качестве заголовка фотографии будет использован title ссылки на большое изображение (см. п.2), или "Название не указано", если ни alt ни title не указан.

Пример оформления html кода:

<div align="center" id="imgbond">
<a href="/imgs/spb/S6300047.JPG"><img src="/imgs/spb/1/S6300047.JPG" width="200 height="150" alt="Санкт-Петербург" /></a>
<a href="/imgs/spb/S6300048.JPG"><img src="/imgs/spb/1/S6300048.JPG" width="200 height="150" alt="Санкт-Петербург" /></a>
<a href="/imgs/spb/S6300053.JPG"><img src="/imgs/spb/1/S6300053.JPG" width="200 height="150" alt="&quot;Спас на крови&quot;. Вид с Марсова поля" /></a>
<a href="/imgs/spb/S6300055.JPG"><img src="/imgs/spb/1/S6300055.JPG" width="200 height="150" alt="&quot;Инженерный замок&quot;. Вид с Марсова поля" /></a>
<a href="/imgs/spb/S6300059.JPG"><img src="/imgs/spb/1/S6300059.JPG" width="200 height="150" alt="Набережная мойки" /></a>
</div>

html-код можно генерировать автоматически на основании файлов больших копий на сервере. Пример генерации html-кода на php

<div align="center" id="imgbond">
<?php
$srcdir = 'imgs/spb/';
$filedir = $_SERVER['DOCUMENT_ROOT'].'/'.$srcdir;
if(is_dir($filedir)) {
  if ($dh = opendir($filedir)) {
    while(($file = readdir($dh)) !== false) {
      if(!is_file($filename = $filedir.$file)) continue;
      if(getimagesize($filename) === false) continue;
      print '<a href="/'.$srcdir.$file.'">';
      print '<img src="/smallimage.php?w=200&amp;h=150&amp;file='.$srcdir.$file.'" width="200 height="150" alt="Санкт-Петербург" />';
      print '</a>';

    }
    closedir($dh);
  }
}
?>
</div>

Скрипт smallimage.php выдает в браузер уменьшенную копию картинки на основании файла, указанного в get-параметре file. Необходимые размеры уменьшенной копии указываются в get-параметрах w и h. smallimage.php вложен в архив библиотеки (см. ниже).

Вот как это выглядит в действии

Санкт-Петербург Санкт-Петербург "Спас на крови". Вид с Марсова поля "Инженерный замок". Вид с Марсова поля Набережная Мойки

Желаем удачи! :)