Разработка веб-ресурса с использованием HTML, CSS, JavaScript, PHP. Применение базовых технологий для создания фотоархива в веб-интерфейсе. Захаркина В.В. - 14 стр.

UptoLike

ВУЗ: 

СПбГУ | Санкт-Петербург

Составители: 

Рубрика: 

26
write('</body></html>');
close();
}; // with
//сдвигаем «ленту» миниатюр таким образом, чтобы
//выбранная миниатюра оказалась наверху:
self.location.hash='#' + n;
}; // function showPhoto
//---------------------------------------------
Этот сценарий должен быть задан в документе, содержащем
миниатюры. Функция showPhoto() вызывается щелчком по
миниатюре (обработчик onClick). Заметим, что HTML-описание
самих миниатюр может быть выведено сценарием. Адреса
графических файлов и текстовых описаний хранятся в массиве
photoArr[], следовательно
напрашивается вывод в цикле:
for ( i=0; i< photoArr.length; i++ )
{
//выделяем из i-ого элемента массива photoArr[]
//имя файла фотографии и текст подписи и
//сохраняем в переменных photoName и photoText
var w = photoArr [i].split('|');
var photoName = w[0];
var photoText = w[1];
document.write(
'<a name="' + i +
'"></a><img src="' +
photoThumbDir + photoName + photoExt +
'" onclick="showPhoto('+i+')"' +
' alt="' + photoText +
'" class="hand" vspace="3"><br>\n');
};
27
«Пролистывание» изображений
Согласитесь, что в плане программирования этот
вариант не отличается от предыдущего. Приведенную
выше функцию showPhoto() после небольших
изменений можно с успехом использовать и здесь.
Вызываться эта функция должна в ответ на щелчок
мышью по «кнопкам», символизирующим переход
вперед или назад.
Кроме определения функции, обеспечивающей вывод указанной
фотографии с текстом, в этом сценарии
необходимо
• запоминать в глобальной переменной номер текущей фотографии;
• реализовать перемещение вперед и назад по массиву фотографий.
Приведем код сценария.
//--------------------------------------------
//Предполагаем, что фотографии находятся в
//отдельном каталоге, а миниатюры – в его
//подкаталоге, причем имена файлов
//полномасштабных фотографий и миниатюр
//совпадают.
//Также предположим, что все изображения
//сохранены в формате JPG.
//В противном случае сценарий можно слегка
//изменить.
//Пусть фотография с текстом выводится во
//встроенном фрейме iframe с именем, например,
//photo
//--------------------------------------------
//Определяем глобальные переменные:
//имя фрейма вывода фотографии:
photoIframeName = 'photo';

Страницы