Фотоальбом с использованием 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>
Результат работы данного кода можно посмотреть тут.
Теперь рассмотрим как, используя возможности JavaScript
можно
обойти недостатки фреймов.