JS. Скрипт фотогалереи с кэшированием изображений

Печать статьи

Читать журнал

Скачать журнал

Сайт Автора: нет

E-mail Автора: нет

Дата публикации: 19.02.2006

Скрипт гарантированно работает в Internet Explorer версии 5.0 и выше (с другими версиями не тестировался, но также должен работать).

Список изображений галереи задается в коде скрипта в виде массива.
Из-за достаточно небольшого объема кода можно, например, легко производить его генерацию с помощью серверного скрипта, либо включать его фрагменты в страницу с помошью SSI. Таким образом достаточно просто организовать фотогалерею из нескольких разделов с разными списками изображений.
Далее приведен код скрипта, в html-документе.

<html>
<body>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onclick="o.prev()">< предыдущая</a></td>
<td><img src="images/sp.gif" width="40" height="40" name="eq"
onclick="o.reload()" style=′cursor:hand′
alt="перегрузить текущую" hspace="5" vspace="5"></td>
<td><a href="#" onclick="o.next()">следующая ></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><a href="#" onclick="OpenWin(pic.src)"><img
src="" name="pic" id="pic" width="150" border="0" alt=""></td>
</tr>
<tr>
<td><div id="img_descr"></div></td>
</tr>
<tr>
<td><div id="img_list"></div></td>
</tr>
</table>

<script language="JavaScript">
function img_obj()
{
var errorImg = "images/sp.gif",
waitImg = "images/sp.gif",
eq_img = "images/eq.gif",
spacer_img = "images/sp.gif",
load_time_wait = 30,
loop_index = 0,
ArrayImg = new Array(),
ArraySrc = new Array(
{"src":"3d_462.jpg","descr":"3d_462"},
{"src":"3d_463.jpg","descr":"3d_463"},
{"src":"3d_466.jpg","descr":"3d_466"},
{"src":"3d_467.jpg","descr":"3d_467"},
{"src":"3d_468.jpg","descr":"3d_468"},
{"src":"3d_469.jpg","descr":"3d_469"},
{"src":"3d_470.jpg","descr":"3d_470"},
{"src":"3d_471.jpg","descr":"3d_471"},
{"src":"3d_472.jpg","descr":"3d_472"},
{"src":"3d_473.jpg","descr":"3d_473"},
{"src":"3d_482.jpg","descr":"3d_482"},
{"src":"3d_483.jpg","descr":"3d_483"},
{"src":"3d_484.jpg","descr":"3d_484"},
""),
index = 0,
url = "",
CreateListFlag = true,
count = ArraySrc.length-2,
timer_id, url_str;

this.init =
function ()
{
url = "gal/";

if(CreateListFlag)
{
str = "<ol>";
for(i=0;i<=count;i++)
{
str += "<li><a href=′#′ onclick=′OpenWin(""+
url+ArraySrc.src+"")′>"+
ArraySrc.descr+"</a><br>";
}
document.getElementById("img_list").innerHTML =
str+"</ol>";
}
change_img();
}

tm = function (obj)
{
if (obj.complete)
{
eq.src = spacer_img;

if (obj.fileSize < 0)
{
pic.src = errorImg;
document.getElementById("img_descr").innerText =
"Время загрузки истекло";
}
else
{
pic.src = obj.src;
document.getElementById("img_descr").innerText =
ArraySrc[index].descr;
}

clearInterval(timer_id);
loop_index = 0;
}
else
{
loop_index++;

if (loop_index > load_time_wait)
{
eq.src = spacer_img;

loop_index = 0;
pic.src = errorImg;
document.getElementById("img_descr").innerText =
"Время загрузки истекло";
clearInterval(timer_id);
}
}
}

change_img =
function()
{
pic.src = waitImg;
ArrayImg[index] = new Image();

ArrayImg[index].src = url+ArraySrc[index].src;
obj = ArrayImg[index];

eq.src = eq_img;

clearInterval(timer_id);
timer_id = setInterval("tm(obj)",1000);
}

this.reload =
function ()
{
if (!ArrayImg[index].complete)
{
pic.src = waitImg;
obj = ArrayImg[index];
eq.src = eq_img;
clearInterval(timer_id);
timer_id = setInterval("tm(obj)",1000);
}
}

this.next =
function ()
{
if (index < count)
{
index++;
change_img();
}
else
{
alert("больше изображений нет");
}
}

this.prev =
function ()
{
if (ArraySrc[index-1])
{
index--;
pic.src = waitImg;
obj = ArrayImg[index];
eq.src = eq_img;

clearInterval(timer_id);
timer_id = setInterval("tm(obj)",1000);
}
else if (index-1 >= 1)
{
index--;
change_img();
}
else
{
alert("вы уже в начале");
}
}
}

function Init()
{
o = new img_obj();
o.init();
}

Init();

function OpenWin(url)
{
www = window.open(url,′img′,′resizable=1,scrollbar=yes,′+
′toolbar=0,status=0,menubar=0,′+
′width=700,height=500′);
www.focus();
}
</script>

</body>
</html>

Скрипт конфигурируется путем изменения значений переменных:

errorImg - задает URL изображения, которое будет отображено вместо картинки из галереи при возникновении ошибок ее загрузки (по умолчанию - прозрачный однопиксельный GIF).

waitImg - задает URL изображения, отображаемого вместо очередной картинки из галереи в процессе ее загрузки (по умолчанию - прозрачный однопиксельный GIF).

eq_img - задает URL изображения, отображаемого над изображением галереи в процессе его загрузки (по умолчанию - анимированный GIF).

spacer_img - задает URL изображения, отображаемого над картинкой из галереи в периоды времени, когда не производится загрузка очередной картинки (тогда отображается изображение, задаваемое eq_img). По умолчанию это все тот же однопиксельный GIF.

load_time_wait - максимальное время загрузки очередного изображения из галереи. Если в течении этого времени изображение не было загружено, то выводится сообщение об ошибке загрузки. По умолчанию - 30 секунд.

ArraySrc - представляет собой массив структур, содержащий информацию о изображениях галереи. Фактически это массив структур, каждая из которых определяет имя файла изображения галереи и его описание, которое будет отображено на генерируемой скриптом странице.

url - значение присваивается в методе init объекта типа img_obj и задает URL каталога картинок.

--- * ---

Вся функциональность скрипта реализуется методами объекта типа img_obj.
Далее приведено описание этих методов.

init - этот метод выполняет генерацию страницы галереи и вызывает метод change_img для начала загрузки первого изображения галереи.

change_img - инициализирует процесс загрузки очередного изображения галереи (номер изображения определяется переменной index) и запускает таймер для отслеживания момента превышения допустимого интервала времени загрузки картинки (задается переменной load_time_wait). Обработчиком событий таймера является метод tm.

tm - в данном методе проверяется состояние процесса загрузки изображения (свойство complete объекта img). Если изображение загружено, то производится вывод описания изображения и останавливается таймер, запущенный в методе change_img. Если изображение не загружено, то производится проверка на превышение максимально допустимого интервала времени загрузки картинки. И если интервал превышен, то на странице выводится соответствующее сообщение, вместо изображения из галереи выводится изображение, URL которой задан в переменной errorImg и останавливается таймер.

reload - выполняет перезагрузку текущего изображения.

next - выполняет загрузку следующего по списку (массив ArraySrc) изображения.

prev - выполняет загрузку предыдущего по списку (массив ArraySrc) изображения.

Также скрипт содержит две глобальные вспомогательные функции: Init() - создает объект типа img_obj, вызывает его метод init, что приводит к генерации содержимого страницы галереи и началу загрузки первой страницы.

OpenWin(url) - открывает новое окно браузера для просмотра изображения галереи в масштабе 100%. Эта функция вызывается из обработчиков onclick списка ссылок, сгенерированных на странице

Список похожих статей

Включение фрагментов кода на JS в документ (Ранг: 1 )
Модуль для масштабирования изображений (Ранг: 1 )

В помощь Веб-Мастеру

Все, что нужно Веб-Мастеру:

cтатьи, книги, учебники.

wm-help.net -> Статьи из журнала -> Программирование -> JS. Скрипт фотогалереи с кэшированием изображений

JS. Скрипт фотогалереи с кэшированием изображений