Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

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


Информационный Канал Subscribe.Ru

Программирование на JavaScript
Выпуск      : 37
Подписчиков : 14017
Cайт        : SoftMaker.com.ru
Архив       : Программирование на JavaScript (архив)
В этом выпуске
Программирование на Microsoft JScript .NET

Программирование на Microsoft JScript .NET

От автора

Здравствуйте уважаемые подписчики !

Как всегда, рад приветствовать вас на страницах этой рассылки.

Сегодня у меня интересное предложение ко всем подписчикам !

Я хочу предложить вам небольшое голосование по поводу того, какие темы будут рассматриваться в этой рассылке в ближайших выпусках.

На то чтобы высказать свое мнение, у Вас уйдет всего несколько секунд, а для меня это будет являться ценной информацией - при выборе тем для новых выпусков я буду учитывать ваши пожелания.

Итак, примерный список тем для будущих выпусков:



Как обычно, напомню, что если Вы хотите:
  • - опубликовать здесь скрипт или статью
  • - создать и вести какой либо раздел в этой рассылке
  • - поучаствовать в формировании ее содержимого
просто напишите мне.

Я также буду рад любым пожеланиям, замечаниям, предложениям (а также сообщениям об ошибках) по поводу рассылки и сайта. Их можно отправлять по тому же адресу.

И, как всегда, вы можете задать свои вопросы по JavaScript - программированию на форуме. Или обсудить их в дискуссионном листе "Скрипты для сайта".

С уважением, Вахтуров Виктор.
Java Script solutions

Сегодня будет рассмотрен скрипт фотогалереи, позволяющий просматривать изображения без перезагрузки страницы, а также производящий кэширование изображений.

Автор скрипта: Шумов Егор (pixmaster at ukr.net).
Кстати, особое спасибо ему за предоставленные скрипты :)


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

Скрипт гарантированно работает в 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()">&lt;&nbsp;предыдущая</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()">следующая&nbsp;&gt;</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[i].src+"\")'>"+
                ArraySrc[i].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 списка ссылок, сгенерированных на странице.

--- * ---

На сегодня - все.

Автор выпуска: Вахтуров Виктор.
Анонсы книг по программированию на JavaScript
JavaScript. Справочник (+ CD-ROM)
JavaScript. Справочник (+ CD-ROM)

Автор: Аллен Вайк

Книга "JavaScript. Справочник" представляет собой исключительно полный справочник по объектам, методам, атрибутам, высокоуровневым функциям языка написания сценариев JavaScript версий от 1.1 и старше, причем как для клиентской, так и для серверной сторон. Приводятся все особенности различных реализаций JavaScript (в том числе и небезызвестная реализация JScript от компании Microsoft).

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

Коды всех примеров, рассмотренных в книге, проверены на практике как авторами оригинального издания, так и командой по подготовке русскоязычной редакции книги.

Книга будет полезной (впрочем, даже и незаменимой) как для начинающих разработчиков Web-приложений, так и для профессионалов, опыт работы которых восходит к тем временам, когда Web был еще неизвестен, а Internet был доступен исключительно для "посвященных".

Страница книги на Озоне
Практические занятия по JavaScript
Практические занятия по JavaScript

Автор: Д. В. Николенко

Эта книга уникальна.
Она написана специально для Вас, если Вы чувствуете необходимость реализовать на создаваемых Вами Web-страницах собственные сценарии.

Пусть у Вас мало свободного времени, а детальное изучение используемых для этого языков не представляется Вам лучшим способом включиться в работу. Хорошо, если Вы уже имеете некоторый опыт создания Web-страниц, знакомы с HTML и можете разобраться в HTML-кодах. В этом случае книга, которую Вы держите в руках - это именно то, что Вам необходимо.

Издание состоит из 12 глав.
В каждой главе раскрываются наиболее важные особенности написания кодов и возможности обогащения HTML с использованием JavaScript. В тексте приводятся листинги программ. В целях приобретения опыта написания программ мы рекомендуем вводить примеры с клавиатуры, запоминать их в отдельном файле, который затем может быть загружен в броузер и проверен на работоспособность.

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

Приложение этой книги представляет собой небольшой лаконичный справочник по объектам, свойствам и методам JavaScript. Он ни в коей степени не создавался полным или исчерпывающим, давая право на существование объемным томам по этому языку для опытных пользователей. В справочном приложении приведены сведения о наиболее важных объектах JavaScript с указанием их основных свойств и методов.

К книге прилагается дискета, содержащая файлы со скриптами примеров, благодаря которым Вам будет гораздо легче изучить язык JavaScript и работать.

Страница книги на Озоне
Всего доброго. До встречи в следующем номере.
Любой из материалов, опубликованных в этой рассылке, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав.
Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: comp.soft.prog.javascript
Архив рассылки 		Отписаться
Вспомнить пароль
В избранное