Скрипт фотогалереи

SapienS · 04.11.2006

Не нашел такой темы. Решил выложить...

--------------------

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

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

Код:

<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; предыдущая</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()">следующая &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>
";
        }
       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 списка ссылок, сгенерированных на странице.

Источник: SoftMaker.com.ru

Скрипт фотогалереи

SapienS

RAM