В этом уроке мы поговорим о том как сделать фотоальбом. Конечно каждый может использовать свой
метод создания фотоальбомов, можно вообще обойтись одним HTML'ом, но я предложу вам свою версию
фотоальбома- максимально скоростную. В чём заключается отличие скорости спросите вы? А вот в чём! В
моём фотоальбоме не грузится целая страничка для новой фотографии, а загружается только само
изображение, а так как мы сделаем предзагрузку изображений, то сами понимаете, что смена изображений
будет происходить почти моментально! Разве не это надо каждому посетителю? А как насчёт слайдшоу?
Тоже устроим! Ну ладно, поменьше болтавни, приступим к уроку, урок немаленький поэтому устроётесь
поудобней и начинайте читать.
Как всегда, начнём с выяснения того, как же должна работать наша программа. Если задуматься над этим
вопросом, то наврядли вы найдёте сразу же ответ. Поэтому будем создавать программу по частям и
добавлять в неё всё новые и новые элементы. Давайте определим массив содержащий все изображения в
фотоальбоме:
var num=5;
var img=new Array();
for (i=1;i<=num;i++) {
img[i]=new Image();
img[i].src="image"+i+".jpg";
}
Вот и все изображения уже определены!Где num- количество изображений. Причём у фотографий должны быть имена:image1.jpg,image2.jpg и
т.д., взавсимости от того сколько у вас фотографий. Хорошо, теперь добавим на форме HTML первую
фотографию и назначим ей имя(name) imgSwap:
<IMG SRC="img1.jpg" name="imgSwap">
Посмотрим, что у нас получилось:
<HTML>
<TITLE>Мой Фотоальбом</title>
<HEAD>
<SCRIPT language="javascript">
var num=5;
var img=new Array();
for (i=1;i<=num;i++) {
img[i]=new Image();
img[i].src="image"+i+".jpg";
}
</script>
</head>
<BODY bgcolor="#11ff11">
<IMG SRC="img1.jpg" name="imgSwap">
</body>
</html>
Вы, наверное, знаете, что при помощи document.имяРисунка.src=img[число].src можно задать рисунок, который будет отображать браузер. Это зависит от значения img[...].src, в нашем случае img[i].src="image"+i+".jpg"! Т.е. если мы в процессе нажатия на ссылки "Вперёд" или "Назад" сможем изменять значения переменной i, то у нас будут менятся только изображения. Но мы не можем задействвать саму переменную i, т.к. она используется в цикле. Будем использовать переменную k.
Создадим для начала функцию, которая будет отвечать за действие "Вперёд". Назовём её Next():
function Next() {
k=k+1;
}
При каждом использовании этой функции значение k инкрементируется(увеличивается на еденицу). Но мы же не задали начальное значние k! Поэтому определим переменную k в начале программы(не функции!), тем самым сделаем её глобальной. Установим в качестве начального положения значение k=1. Теперь посмотрим как же эта функция будет вызываться:
<A href="javascript:document.imgSwap.src=img[k].src,Next()">Вперёд</a>
Причём сначала выполняется замена изображения, а потом уже функция Next, именно поэтому мы установили начальное положение k=1. Т.е. если в данный момент вы видите Image2.jpg, то значение k=3. Хорошо, но как быть если у нас изображений 10, а k=14. Этот недостаток можно исправить. Добавим к функции Next() такие строки:
if(k==num) {
k=0;
}
Теперь функция Next() имеет такой вид:
function Next() {
if(k==num) {
k=0;
}
k=k+1;
}
Мы ещё вернёмся к этой функции, а теперь подумаем о действии "Назад". Вы скажете, что же тут сложного-достаточно заменить k=k+1 на k=k-1. Но не спешите. Разберёмся. Допустим на Image3.jpg вы захотели нажать "Назад" , но вы же не забыли, что значение k в этот момент равно 4! Так что при щелчке на "Назад" загрузится следующее изображение. Поэтому для действия "Назад" введём новую переиенную p. Причём после каждого выполнения функции Next() значение p должно быть меньше k на 2. Добавим строку p=k-2:
if(k==num) {
k=0;
}
Теперь функция Next() имеет такой вид:
function Next() {
if(k==num) {
k=0;
}
k=k+1;
p=k-2;
}
Но незабудьте оглаболизовать переменную p, определив её в начале и присвоив значение 1. На данный момент программа выглядит так:
<HTML>
<TITLE>Мой Фотоальбом</title>
<HEAD>
<SCRIPT language="javascript">
var num=5;
var k=1;
var p=1;
var img=new Array();
for (i=1;i<=num;i++) {
img[i]=new Image();
img[i].src="image"+i+".jpg";
}
function Next() {
if(k==num) {
k=0;
}
k=k+1;
p=k-2;
}
</script>
</head>
<BODY>
<IMG SRC="img1.jpg" name="imgSwap">
<a href="javascript:document.imgSwap.src=img[k].src,Next()">Вперёд</a>
</body>
</html>
Займёмся функцией Previous(). Выглядеть она будет так:
function Previous() {
if(p==1) {
p=num+1;
}
p=p-1;
k=p+2;
}
Я думаю, что тут должно быть всё понятно. Т.к. функции примерно похожие. Казалось бы и всё, но нет! Можно заметить ещё много нюансов. Если k=2 и мы хотим нажать "назад", какое изображение загрузится? Если вы внимательно читали, то с лёгкостью ответите на этот вопрос-Image0.jpg(а нету у нас такого!). Или k=1, тогда p=-1. Дополним функцию Next() следующими конструкциями:
if(k==2) {
p=num;
}
if(k==1) {
p=num-1;
}
Похожие недостатки есть и у Previous(), дополним:
if(p==num-1) {
k=1;
}
if(p==num) {
k=2;
}
Вот на этом вроде всё! Првиду полный листинг программы:
<HTML>
<TITLE>Мой Фотоальбом</title>
<HEAD>
<SCRIPT language="javascript">
var num=5;
var k=1;
var p=1;
var img=new Array();
for (i=1;i<=num;i++) {
img[i]=new Image();
img[i].src="image"+i+".jpg";
}
function Next() {
if(k==num) {
k=0;
}
k=k+1;
p=k-2;
if(k==2) {
p=num;
}
if(k==1) {
p=num-1;
}
}
function Previous() {
if(p==1) {
p=num+1;
}
p=p-1;
k=p+2;
if(p==num-1) {
k=1;
}
if(p==num) {
k=2;
}
}
</script>
</head>
<BODY onLoad="Next()">
<a href="javascript:document.imgSwap.src=img[p].src,Previous()">Назад</a>
<IMG SRC="img1.jpg" name="imgSwap">
<a href="javascript:document.imgSwap.src=img[k].src,Next()">Вперёд</a>
</body>
</html>
А как насчёт пользовательского интерфейса, слайдшоу и других примочек? Вот вближайшем будушем выйдет дополнение к этому уроку, где вы и найдёте ответы на эти вопросы. Адрес тот же www.designportal.narod.ru.
Писал для Вас Адамян Андрей.
