Представляем вашему вниманию небольшой класс на 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 код, содержащий уменьшенные копии изображений, придерживаясь правил:
id="imgbond", если вы не используете при вызове конструктора параметр, или указать свой идентрификатор, если передаете в конструктор его имя. <a>, в которой в аттрибуте href="" указать путь до полноразмерной картинки. При необходимости можете указать аттрибут title.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=""Спас на крови". Вид с Марсова поля" /></a>
<a href="/imgs/spb/S6300055.JPG"><img src="/imgs/spb/1/S6300055.JPG" width="200 height="150" alt=""Инженерный замок". Вид с Марсова поля" /></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&h=150&file='.$srcdir.$file.'" width="200 height="150" alt="Санкт-Петербург" />';
print '</a>';
}
closedir($dh);
}
}
?>
</div>
Скрипт smallimage.php выдает в браузер уменьшенную копию картинки на основании файла, указанного в get-параметре file. Необходимые размеры уменьшенной копии указываются в get-параметрах w и h. smallimage.php вложен в архив библиотеки (см. ниже).
Вот как это выглядит в действии
Желаем удачи! :)