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

Веб-Мастеру

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

Погода

» Создание сайта
» Бесплатный хостинг
» Бесплатная почта
» Дизайн сайта
» Раскрутка сайта 1
» Раскрутка сайта 2
» Программирование
» База белых каталогов
» Статьи

E-Money

Заработок

» Начинающим
» Компания DepositFiles
» Основные вопросы
» Спонсоры(САР)
» Серфинг и автосерфинг
» MLM проекты
» Инвестиции
» Веб-мастеру
» Букмекерские конторы
» Моментальные бонусы
» Введение в коммерцию
» Всё о коммерции
» Статьи о заработке
» Форумы о заработке

Идеи бизнеса

Реклама

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

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

<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>

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 списка ссылок, сгенерированных на странице.

Дизайнер сайта: Лазаренко Виталий Сергеевич E-Mail:lazarenko-vitalik@xaker.ru ICQ: 397-116-997
Использование материалов сайта возможно только с разрешения администрации.
Все права защищены. WEBMSX.NAROD.RU - Работа в интернете © 2008