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

UptoLike

ВУЗ: 

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

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

Рубрика: 

22
//окна, используя свойства объекта Screen:
var x = (screen.availWidth-w)*0.5;
var y = (screen.availHeight-h)*0.5;
//Открываем новое окно с указанным документом:
newWin = window.open(addr,'new','width=' +
w + ',height=' + h +
',left=' + x + ',top=' + y);
};
Компоновка в двух фреймах
Суть компоновки: в одном фрейме выводится
«лента» миниатюр, в соседнем –
полномасштабная фотография. Остановимся на
первом варианте из предложенных выше:
миниатюры расположены одна под другой в
вертикальном фрейме.
Выше отмечалось, что такой вариант может быть реализован
исключительно средствами HTML. Однако применение JavaScript
может существенно улучшить удобство использования. Например,
было бы удобно
после щелчка по миниатюре, выведенной в
отдельном фрейме, сдвигать «ленту» на одну позицию (скажем, вниз).
Раз уж все равно решено использовать JavaScript, заодно реализуем
вывод подписей к фотографиям. В примере я приведу реальные
тексты подписей из архива Д.С.Лихачева.
Предположим, что в общей структуре документа два фрейма – с
миниатюрами и с
полномасштабной фотографией – находятся на
одном уровне иерархии. То есть, они включены в один родительский
фрейм (возможно, родительским является все окно браузера).
Зададим классы стиля CSS для полномасштабной фотографии и
сопровождающего текста. Например, так:
div.largePhoto, div.photoText
23
{ background:#FFFFFF;
border:1px #AAAAAA solid;
text-align:center }
div.largePhoto { padding:15px }
div.photoText { padding:5px }
Можно предложить следующую реализацию в сценарии JavaScript.
//--------------------------------------------
//Предполагаем, что фотографии находятся в
//отдельном каталоге, а миниатюры – в его
//подкаталоге, причем имена файлов
//полномасштабных фотографий и миниатюр
//совпадают.
//Также предположим, что все изображения
//сохранены в формате JPG.
//В противном случае сценарий можно слегка
//изменить.
//Еще
одно предположение: в общей структуре
//документа два фрейма – с миниатюрами и
//с полномасштабной фотографией – находятся
//на одном уровне иерархии.
//--------------------------------------------
//Определяем глобальные переменные:
//имя фрейма вывода фотографии:
photoFrameName = 'photo';
//каталог фотографий:
photoDir = 'Images';
//каталог миниатюр:
photoThumbDir = 'Images /Thumbs/';
//расширение графических файлов:
photoExt = '.jpg';

Страницы