» Главная
eXcode.ru » Статьи » JAVA / JavaScript
» Новости
» Опросы
» Файлы
» Журнал



Пользователей: 0
Гостей: 6





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




Скрипт гарантированно работает в 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>
";
}
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 списка ссылок, сгенерированных на странице.
К началу статьи





Добавил: LedWormДата публикации: 2005-10-24 02:26:05
Рейтинг статьи:2.67 [Голосов 6]Кол-во просмотров: 16759

Комментарии читателей

Всего комментариев: 106

2017-05-26 13:11:57
DavidSurse
Прокси интернет-сервис Proxyelite.biz рекомендует вам все возможности для того, что бы закупки быстрых прокси-серверов из Австралия, Англия, Вьетнам, Германия, Гибралтар, Голландия, Гонконг, Египет, Израиль, Индия, Индонезия, Иран, Италия, Китай, Люксембург, Норвегия, Объединённые Арабские Эмираты, Польша, Пакистан, Россия, Саудовская Аравия, Сингапур, Турция, Украина, Хорватия, Швейцария, Чехия, Южная Корея, ЮАР, Япония. Протокол прокси HTTP и SOCKS5 в единственном аккаунте. А так же VPN - Сервис Поддержка протоколов L2TP/IPsec,VPN over SSL, VPN over ICMP, VPN over DNS, SoftEtherVPN. Proxy-server (прокси-сервер, от англ. proxy — полномочие действовать от имени другого лица) — являет из себя службу (програмное обеспечение), функционирующую в компьютерной глобальной Интернет-сети а также позволяющую потребителям делать запросы к прочим службам. Данным образом, прокси сервер предназначен выполнять роль посредника между заказчиком (к примеру, Вашим компом) и службой (например, каким-либо Web-сайтом), доступ к каковой запрашивает заказчик. VPN (англ. Virtual Private Network — виртуальная собственная сеть). VPN-сеть организовывается «поверх» online Интернет, во сто крат повышая безопасность соединения. OpenVPN — исполнение виртуальной сети с еще очень большой степенью надежности, безопасности и многофункциональности. Она строится на раскрытом исходном коде и систематично улучшается командами профессиональных разрабов.


[url=http://proxyelite.biz]купить прокси socks5[/url]

2017-03-12 13:47:24
agroteplitca
Производитель теплиц пропонует [url=http://ekotec.com.ua/]фермерские теплицы[/url] и дачные теплицы под пленку по Украине.

[b]Завод изготовитель теплиц[/b] предлагает не просто продажу но и полный сервис нашей продукции - доставка установка и гарантийное ообслуживание.
Строительство теплиц - основное направление работы предприятия, мы в состоянии укомплектовать современную фермерскую теплицу прямо на огороде очень быстро.
Нашим диллерам доступна опция комплектации теплиц необходимой для выращивания автоматикой.

[u][b]Заказать теплицу и получить консультацию можно по телефонам[/b][/u]: +38(093)309-08-37 | +38(096)384-64-65

2017-02-21 23:04:42
Hillonazy
Повседнeвная жизнь cтавит перед нами такиe задачки, решать которыe не учaт ни в какoй шкoле. Мнoжество курсoв доступны толькo в бoльших городах и плaтить за ниx пpиходится немало. Тепeрь не нужнo тратить время и деньги, можно получить всё и сразу, причём aбсoлютно бесплатно. Школьные уроoки, cекреты кpacоты и нарoдныe рецепты, видеoкурcы для дoмaшнeгo мaстеpа, пчелoводa, фoтoграфа, кулинaрa и т.д. Всё, на что хватит вaшей фантaзии, cобрано в одном местe. Учиться – пpостo, интерeсcно и круто. Видeоуроки нa вcе случаи жизни: удиви друзей – стань умнee!

[url=http://mirurokov.net/59-montazh-peregorodok-iz-gipsovyh-pazogrebnevyh-plit-video-urok.html]монтаж пгп видео[/url]

2016-12-26 23:19:53
AltonCRIFS
Рекламно-производственная компания "Иван-Пресс" предлагает громадный выбор светодиодной продукции, которая предназначена для рекламных целей. [url=http://www.ledframe.ru/]светодиодная панель накладная[/url]. Мы продаём светодиодные панели и световые панели для наружной рекламы и индора. Односторонние и двусторонние панели Click, Кристалл, Магнетик, Outdoor, RGB, Клик Биг на нашем складе постоянно в наличии! Мы к тому же принимаем заказы на производство светопанелей и светодиодных систем нестандартных размеров. Предлагаем комплексные услуги “под ключ”.

На нашем ресурсе вы сможете найти удобный каталог нашей продукции с детальными описаниями всех товаров. [url=http://www.ledframe.ru/]изготовление световых панелей[/url]. Актуальные цены на товары каждый день! Вы можете быстро выбрать и заказать нужную для вас модель светопанелей. Для заказа продукции по индивидуальным размерам нужно позвонить нашим специалистам по телефонам, указанным в разделе “Контакты”.

Заказанный товар вы сможете забрать бесплатно со склада компании в Москве! Заказ товара РПК Иван-пресс можно на сайте компании или по сотовому! [url=http://www.ledframe.ru/]панель светодиодная llt[/url]. На все возможные вопросы Вам смогут ответить наши консультанты по телефону. Для оптовых клиентов мы предоставляем отличные скидки!

2016-12-14 22:47:27
VictorInfop
Компания Римтекс может предложить большой ассортимент изделий из текстиля, а также мы осуществляем пошив одежды на заказ в Москве. [url=http://rimtex-print.ru/zakaz-pledy.html]плед оптом москва[/url]. В нашей компании в наличие на складе всегда имеется большое количество готовой продукции. Мы продаём футболки и поло, бейсболки и толстовки, куртки и рабочую одежду, а также многое другое. У нас имеется своё швейное предприятие, которое позволяет нам периодически увеличивать ассортимент наших товаров.

Основная наша деятельность – это швейное производство, но мы не двигаемся вперёд и развиваемся, потому в перечень наших сервисов мы также добавили печатное производство. [url=http://rimtex-print.ru/pechat-na-bejsbolkah.html]нанесение логотипа на бейсболки[/url]. Мы предлагаем сервисы шелкотрафаретного принта на тканных и нетканых материалах. Теперь вы сможете оформить заказ в нашей компании пошив любой одежды с любой печатью. С помощью нашего принта на одежде мы сможем создать ваш корпоративный стиль, это выгодно подчеркнёт имидж вашей фирмы среди клиентов и гостей.

Мы также предлагаем услуги вышивки на одежде, мы вышьем любой логотип на любой заказанной вами одежде! Оформить заказ пошива одежды с логотипом можно на нашем портале или по телефону, который указан на сайте нашей фирме. [url=http://rimtex-print.ru/pechat-na-futbolkah.html]футболки оптом в москве[/url]. На вебресурсе также вы сможете найти актуальный прайс-лист на сервисы нашей компании.

2016-11-03 14:14:24
vipd
Крем-воск «ЗДОРОВ» от боли в суставах гарантирует избавление от боли, восстановление тканей и суставов..
http://vip-ro.ru/

2016-11-01 00:18:26
Davidcit
[url=http://zakazat-lending-nedorogo.ru]заказать одностраничный сайт лендинг[/url]
Наши специалисты всегда на связи. Оперативно решают поступающие задачи и вносят корректировки в режиме on-line

2016-10-12 05:53:06
vipu
Конфеты для похудения EcoPills Raspberry Похудеть стало так легко
http://offer.moscow/

2016-09-30 14:06:25
FermerIvan
Предлагаем [url=http://ekotec.com.ua/]купить фермерскую теплицу[/url] у производителя - фирмы ЭкоТек.
Продажа теплиц осуществляеться по всей Украине, в наличии и под заказ можно приобрести дачную теплицу, фермерскую теплицу, промышленные и другие индивидуальные варианты.
Возможно оборудование теплицы необходимой для выращивания инфраструктурой - системами автоматического полива, освещения и отопления теплицы под ключ.
Наличный и безналичный расчет.
http://ekotec.com.ua/
Цена 8х20 под пленку стартует от 2000$
Цена 3х4 под самый дорогой поликарбонат 390$
Для консультации и заказа теплицы позвоните по телефону: (093)309-08-37 (096)384-64-65

2016-08-24 20:52:17
greatw
Tinedol - лучшеизлечит вас от грибка быстро и надежно
http://bianshi-leo.ru
Ваше имя: *
Текст записи: *
Имя:

Пароль:



Регистрация

Какой жанр комп. игр вам нравится?
Стратегии
24% (55)
Action
17% (39)
RPG
36% (82)
RTS
1% (3)
Симуляторы
8% (18)
Квесты
7% (15)
Логические
3% (6)
Другой
5% (11)

Проголосовало: 229
Плакат: изображена BMW и надпись - наше железо работает хорошо безо всяких Windows...
Рейтинг: 0/10 (0)
Посмотреть все анекдоты