Aug 27 2011 at 10:03

Java Script. Простейшая галерея изображений

Invite pending

Создание простейшей галереи изображений на Java Script

Данная статья рассчитана на новичков только начавших изучать язык Java Script. В ней я опишу основные шаги создания простой галереи изображений.

Итак, приступим:

1. Создадим html документ и назовем его: gallery.html. В нем напишем следующее:

<script src = "gal.js"></script>
 <html>
    <head>
      <title> Gallery </title>
    </head>
     <body>
	<center>
        <img src = "" width = "640" height = "480"  id = "img" > </img> <br />
        <img src = "left_arrow.jpg"   onClick = "javascript: left_arrow()" /> 
	<img src = "right_arrow.jpg"  onClick = "javascript: right_arrow()" />
       </center>
    </body>
 </html>

Мы создаем картинку с размером «640x480». Фиксированный размер задаем для того,
чтобы изображение не смещалось, если оно будет иметь больший размер.
Затем добавляем 2 изображения стрелок, на которые накладываем 2 события(onClick).

2. Создадим файл gal.js. В нем напишем несколько функций:


var mas = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"] // массив картинок
var to = -1;  // Счетчик, указывающий на текущую картинки

function right_arrow() // Открытие следующей картинки(движение вправо)
{ 
 var obj = document.getElementById("img");
  if (to < mas.length-1)  to++ 
   else
     to = 0;
     obj.src = mas[to];	 
}

function left_arrow() // Открытие предыдущей картинки(движение влево)
{     
 var obj = document.getElementById("img");
if (to > 0) to--;
  else
    to = mas.length-1;
    obj.src = mas[to];	  			 
}

Вот мы и создали простую галерею.
Теперь немного усложним ее. Пусть при обновлении страницы последняя открытая картинка
будет отображаться. Воспользуемся cookie(в нем будет хранится № последней картинки).

3. Улучшим файл gal.js

var mas = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
var to = -1;  // Счетчик, указывающий на текущую картинки

function right_arrow() // Открытие следующей картинки(движение вправо)
{ 
 var obj = document.getElementById("img");
  if (to < mas.length-1)  to++ 
   else
     to = 0;
     obj.src = mas[to];	 
     setCookie("foo", mas[to] , "", "/");	 // запоминаем текущую картинку
}

function left_arrow()
{     
 var obj = document.getElementById("img");
if (to > 0) to--;
  else
    to = mas.length-1;
    obj.src = mas[to];	  
    setCookie("foo", mas[to] , "", "/");	 // запоминаем текущую картинку
}

function setCookie(name, value, expires, path, domain, secure) // Ф-ция создания куки
{
 if (!name || !value) return false;
    var str = name + '=' + encodeURIComponent(value);
        if (expires) str += '; expires=' + expires.toGMTString();
        if (path)    str += '; path=' + path;
        if (domain)  str += '; domain=' + domain;
        if (secure)  str += '; secure';
  document.cookie = str;
  return true;
}
	 
function getCookie(name)   // Ф-ция получения куки
{
  var pattern = "(?:; )?" + name + "=([^;]*);?";
  var regexp  = new RegExp(pattern);	     
    if (regexp.test(document.cookie))
	    return decodeURIComponent(RegExp["$1"]);  
	    return false;
}


function Load()   // Ф-ция загрузки "сохраненной" картинки
{
var cook_val = getCookie("foo");  // Получаем значение куки по имени
 for (var i = 0 ; i < mas.length; i++)
 {
    if (mas[i] == cook_val)   // Как только встретилась
     {
      document.getElementById("img").src = mas[i];   // Загружаем картинку
      to = i;  // Задаем текущее значение счетчику
      break // выходим
     }	
  }		
}

<i>
Важно: Затем в тег body  gallery.html добавим событие onLoad = "Load()".
</i>

Все готово.

Подробнее о cookies можно прочитать тут

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

Используемые ссылки:
http://www.codenet.ru/webmast/js/Cookies.php" (Cookies)

Hubs:

Lumber room