Примеры фотоальбомов с использованием JavaScript

Попробуем теперь сделать несколько вариантов фотоальбома, используя возможности JavaScript. Сначала сделаем простейший, аналогичный тому что мы делали ранее, когда использовали только средства разметки HTML. Отличие будет только в том, что теперь фотография будет открываться в окне без панели инструментов, строки статуса, адреса страницы, полос прокрутки.

Сначала опишем функцию ShowPhoto(), которая будет открывать фотографию в новом окне, без панели инструментов, строки статуса и строки адреса. В качестве параметра данной функции будут передаваться значения: имя файла - Photo, ширина - WidthWin и высота окна - HeightWin. Данная функция будет вызываться используя ссылку:

<a href='javascript:ShowPhoto(Photo,WidthWin,HeightWin)'></a>

Функция будет выглядеть следующим образом:

function ShowPhoto(Photo,WidthWin,HeightWin)
{
// Описываем параметры окна
param = "Width=" + WidthWin + ","            ;
param = param + "Height=" + HeightWin + ","  ;
param = param + "Top=0,"             ;
param = param + "Left=0,"            ;
param = param + "Toolbar=0,"         ;
param = param + "Status=0,"          ;
param = param + "Menubar=0,"         ;
param = param + "location=0,"        ;
param = param + "Scrollbars=0,"      ;
param = param + "Resizable=1"        ;

// Открыть новое окно
myWin=window.open("", "Photo", param); 

// открыть объект document для последующей печати 
myWin.document.open();

// генерировать новый документ 
myWin.document.write("<html><head><title></title></head>");
myWin.document.write("<body topmargin='0' leftmargin='0'>");
myWin.document.write("<IMG src=" + Photo + 
       "border='0' align='' valign='' hspace='0' vspace='0'>"); 
myWin.document.write("</body></html>");

// закрыть документ - (но не окно!) 
myWin.document.close(); 
}

Поскольку данная функция может вызываться с разных страниц сайта, удобно расположить ее в отдельном внешнем файле, например ShowPhoto.jsc. А в коде нашей страничке мы определим этот файл как источник операторов с помощью атрибута SRC тэга <SCRIPT>:

<script Language="JavaScript" src="ShowPhoto.jsc"></script>

Ну и в итоге код нашего фотоальбома будет выглядеть следующим образом:

<HTML>
<HEAD>

<TITLE>Мой фотоальбом</TITLE>

<script Language="JavaScript" src="ShowPhoto.jsc"></script>

</HEAD>

<BODY>

<TABLE border="0" width=100%>
<CAPTION>Мои любимые фотографии</CAPTION>
<tr>
<td width=30% align="center">
<a href='javascript:ShowPhoto("PhotoAlbum/11.jpg","542","407")'>
<img border="0" align="" valign="" hspace="0" vspace="0" 
src="PreView/11.jpg"></a>  
</td>

<td width=30% align="center">
<a href='javascript:ShowPhoto("PhotoAlbum/12.jpg","542","407")'>
<img border="0" align="" valign="" hspace="0" vspace="0" 
src="PreView/12.jpg"></a>
</td>

<td width=30% align="center">
<a href='javascript:ShowPhoto("PhotoAlbum/13.jpg","542","407")'>
<img border="0" align="" valign="" hspace="0" vspace="0" 
src="PreView/13.jpg"></a>
</td>
</tr>

</TABLE>

</BODY>
</HTML>

Теперь попробуем сделать фотоальбом, в котором фотографии сменяются нажатием клавиш "Следующее" "Предыдущее". Для этого нам необходимо воспользоваться объектом Array - массив. Сначала объявляем новый массив "Photo", записав:

Photo = new Array();

После этого заполним массив значениями имен наших файлов с фотографиями. Перечисление элиментов массива в JavaScript начинается с цифры 0:

Photo[0] = "PhotoAlbum/11.jpg";  
Photo[1] = "PhotoAlbum/12.jpg";
Photo[2] = "PhotoAlbum/13.jpg";
Photo[3] = "PhotoAlbum/21.jpg";  
Photo[4] = "PhotoAlbum/22.jpg";  
Photo[5] = "PhotoAlbum/23.jpg";

Теперь нам надо описать две функции, которые будут перебирать эти фотографии вперед "next_image()" и назад "prev_image()". Для листания картинок необходимо менять значение переменной n, которая будет оределять порядковый номер фотографии. Увеличивает значение переменной на единицу оператор инкремента (++):

n++

Уменьшать значения переменной на единицу будет оператор декремента (--):

n--

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

if ("условие")
{
// операторы выполняемые в случае если "условие" - "истина"
}
else
{
операторы выполняемые если "условие" - "ложь"
}

Для нашего случая, если значение переменной n больше 5, то присваеваем переменной n значение 0:

if(n>5) n=0;

И если значение переменной n меньше 0, присваеваем переменной n значение 5:

if(n<0) n=5;

И после этого демонстрируем картинку, согласно ее положению в массиве. Делать это мы будем используя объект Image. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы обращаемся записав document.images[0].

Можно присвоить изображению конкретное значение:

document.images[0]="PhotoAlbum/11.jpg";

Но нам надо, чтобы изображение выбиралось из элементов массива:

document.images[0].src = Photo[n];

Таким образом наши функции смены картинок будут иметь код:

function next_image()
{
n++;   
if(n>5) n=0;
document.images[0].src = Photo[n];
}

function prev_image()
{
n--;
if(n<0) n=5;
document.images[0].src = Photo[n];
}

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

<HTML>
<HEAD>
<meta http-equiv=Content-Type content="text/html; 
      charset=windows-1251">
<TITLE>Листание фотографий в фотоальбоме</TITLE>

<SCRIPT>
<!--

n=0;

Photo = new Array(); 

Photo[0] = "PhotoAlbum/11.jpg";  
Photo[1] = "PhotoAlbum/12.jpg";
Photo[2] = "PhotoAlbum/13.jpg";
Photo[3] = "PhotoAlbum/21.jpg";  
Photo[4] = "PhotoAlbum/22.jpg";  
Photo[5] = "PhotoAlbum/23.jpg";  

function next_image()
{
n++;   
if(n>5) n=0;
document.images[0].src = Photo[n];
}

function prev_image()
{
n--;
if(n<0) n=5;
document.images[0].src = Photo[n];
}

//-->
</SCRIPT>

</HEAD topmargin='0' leftmargin='0'>

<BODY>
 
<TABLE WIDTH="100%">
 <TR>
   <td ALIGN=CENTER VALIGN=CENTER>
     <input type=button value="Предыдущее" onClick=prev_image()>
     <input type=button value="На главную страницу"
            onClick="self.parent.location='../index.html'">
     <input type=button value="Следующее" onClick=next_image()>
   </td>
 </tr> 
 <tr>
    <td ALIGN=CENTER VALIGN=CENTER>
         <IMG SRC="PhotoAlbum/11.jpg">
    </td>
  </TR>

</TABLE>

</BODY>
</HTML>

Шаг 16 - Примеры фотоальбомов с использованием JavaScript