В последнее время наблюдается очередной всплеск интереса к фотографии. Почему очередной? Один был в 70-е: тогда, пожалуй, самым популярным подарком на день рождения 10-12-летнего сына или дочки был фотоаппарат "Смена". Тогда еще была распространена поговорка: "Если хочешь разорить друга, подари ему кинокамеру". Дескать, к ней так много всяких примочек надо докупить, что это уж точно разорение! Впрочем, в те времена для фотоаппарата требовалось не меньше приспособлений: всякие там бачки для проявки, реактивы, кюветы, фотоувеличитель, кадрирующая рамка, реле времени и так далее. Тогда, если помните, в деле остались только самые стойкие, те, кто все это купил и попутно научился кое-как снимать (раз уж понес такие расходы). А потом сидели они вечерами, а то и заполночь в ванной комнате, мужественно перенося темноту и одиночество, и печатали, печатали многие сотни фоток на раздачу друзьям. А потом еще целый день снимки надо было глянцевать, бесконечно проходясь по ним скрипучим валиком. Ох…

Такой же бум был и в 90-е годы, когда повсеместно расплодились пресловутые мини-лабы. И только ленивый не купил или не подарил кому-нибудь фотоаппарат-мыльницу. Мини-лабы - это был прогресс! "Вы только нажимаете на кнопку - все остальное мы делаем за вас!" - гласил слоган одной из фирм, оказывавшей услуги по изготовлению отпечатков. Кстати, тот девиз получил вторую жизнь в рекламе цифровой фотоаппаратуры.
И вот сотни тысяч молоденьких мам, отщелкав кое-как свое дитя, парились в очередях в эти самые мини-лабы и очень удивлялись, почему на большинстве фотографий виден в основном потолок комнаты и только в самом низу кадра, если приглядеться, заметна половина головы любимого чада.

Теперь стало совсем хорошо, точнее, совсем просто. Цифровой фотик действительно все делает за нас. Можно вообще не иметь представления о том, что такое выдержка и диафрагма. Мы даже раздражаемся из-за того, что он тормозит, настраивая резкость (а ведь раньше мы это делали вручную и не считали, сколько времени тратили на подготовку к съемке). Первоначально цифровая печать стоила дороже, чем пленочная, но это в прошлом. Да и печатать снимки ни к чему, храни весь материал в памяти компьютера или на дисках и горя не знай. Ну да ладно, не о том разговор. Человеку явно не хватает… Как бы точнее выразиться? Исторического документирования прожитых жизненных моментов, что ли. А фотография как раз и предоставляет ему великолепную возможность все зафиксировать. Остановить время, понимаешь.

Формулировка проблемы

Хорошо. Засняли нечто. Затем в мини-лабе отпечатали и даже не поленились (а это делают, к сожалению, далеко не все) разложить фотографии по альбомчикам. Слава богу, они тоже в огромных количествах продаются, и выбор большой. А что дальше?
Конечно, когда любимое чадо подрастет, можно ему это все и показать… Как-то оно ему понравится? А если на фотографиях изображены многие люди? Ну, например, на корпоративной вечеринке или в какой-нибудь коллективной загородной поездке с осмотром достопримечательностей? А чаще в поездке на заграничный курорт. Какая же это пытка - просматривать (а главное, не выказывая недовольство, с заинтересованным видом) тонны откровенно плохих или неинтересных фотографий какой-нибудь хорошей подруги после того, как она съездила в Париж. "Вот я на фоне собора Парижской Богоматери, вот я на фоне…" Ну, вы меня понимаете. А с переходом на "цифру" счет пошел не на тонны, а на десятки тонн!

Все же в некоторых компаниях и коллективах находятся мужественные люди, которые идут после party (еще одно модное словечко, раньше говорили - пьянка) в тот самый мини-лаб и по старинке печатают многие сотни фотографий, чтобы раздать или подарить (не продавать же!) их родственникам и друзьям. Но таких героев становится все меньше. И вот почему.

Очень грустно наблюдать, как одаряемые обращаются с плодами ваших трудов, с тем, во что вы вложили силы и, между прочим, небольшие, но деньги. Не понимая ценности фотографии, пусть не самой лучшей и не самой профессиональной, неблагодарный может запросто уронить ее в салат на вечеринке, да еще и в присутствии дарителя, либо, донеся-таки пачку фоток в красочном пакетике до дома, зашвырнуть ее куда-то на полку с книгами, где она обречена пролежать до очередного переезда. Или до ремонта квартиры, при котором снимки неизбежно отправятся на помойку, так как у владельца квартиры не останется сил на то, чтобы разобраться в мешанине лиц, событий, воспоминаний.

Возникает проблема: как поделиться, или, по-модному говоря, расшариться, фотками? (Предполагаю, воровское "на шару" того же происхождения.) Ведь в этом вопросе есть две заинтересованные стороны: одни - любители показывать, другие - любители смотреть (самые активные из них еще и коллекции собирают). И надо обеспечить, во-первых, возможность обмена информацией между этими сторонами, а во-вторых, что тоже очень важно, свободу выбора. Посмотрел - понравилось - сохранил для коллекции. Не понравилось - пошел дальше смотреть. Одно слово - интернет!
Да, одной из важнейших возможностей Сети как раз и является обмен картинками. Но какими? Из-за проблем со скоростями соединения тысячи умнейших людей пытаются разработать новые стандарты и технологии. Не будем углубляться в изучение аппаратных решений. Кому-то повезло, и у него есть высокоскоростной доступ в интернет. Но сидящим на dial-up рано огорчаться!

Как с распространением цифровой фотографии возникли новые трудности (например, многим пришлось задуматься на тем, где хранить эти тысячи снимков: то ли покупать новый винчестер, то ли сильнее сжимать фотки и т. д.), так и с появлением высокоскоростных подключений обозначилась проблема - трафик. Знаете ли вы, что почти половина пользователей ADSL просто отключают отображение графики на веб-страницах, чтобы уменьшить объем трафика? Вот недавно я собирал и настраивал дешевый компьютер из б/у комплектующих по просьбе молодого паренька, приехавшего в наш город в длительную командировку из Норильска. Он и не знал, что интернет бывает через модем! Там у них все пользуются скоростными каналами. Но - не поверите! - он чрезвычайно обрадовался, когда выяснилось, что по карточке экспресс-оплаты dial-up за 100 рублей можно пусть не быстро, но спокойно смотреть любые веб-страницы, не отключая графику и не заботясь о том, сколько трафика набежало.

Постановка задачи

Но давайте поговорим о способах размещения фотографий на веб-страницах. Еще первые веб-дизайнеры поняли, что нельзя выкладывать на сайт фотографию, предварительно не обрезав и не сжав ее посредством технологий, предоставляемых форматами JPEG, GIF или - несколько позже - PNG. Ведь никто не дождется полной загрузки этих многомегабайтных файлов. По поводу медленного скачивания данных даже шутили: WWW - это World Wide Wait, или "всемирное ожидание". А страницы, которые слишком долго грузились из-за ошибки веб-мастера, разместившего на них слишком тяжелую графику, называли JPIG, в вольном переводе на русский - "джи-свин". Думаю, именно тогда разработчики браузеров дали пользователям этих программ возможность отключать отображение графики на веб-страницах. А заодно и кнопку для остановки загрузки добавили (смайл).

Затем была придумана такая схема размещения снимков: посетитель сайта сначала попадает на некую стартовую тематическую страницу ("Мой фотоальбом"), на которой видит сразу весь этот альбом в уменьшенном виде, с крохотными картинками (американцы их прозвали thumbnails - "ноготками"). А они, эти "ноготки", работают как ссылки для открытия больших картинок в том же или в новом окне. Такая схема до сих пор используется довольно широко. В чем же ее недостатки?

Схема размещения изображений: посетитель сначала попадает на стартовую страницу, на которой альбом представлен в виде "ноготков".

Во-первых, она накладывает ограничения на размер, количество и вес этих "ноготков". Главное - заманить посетителя, заинтересовать его. А дальше пусть сам выбирает, что ему смотреть да сохранять.
Как показывает практика использования модемных соединений, страница, общий вес которой превышает 50-70 кбайт, угрожающе тяжела для посетителя, тот может запросто уйти, не дождавшись ее полной загрузки. А значит, "ноготок" должен иметь объем 2-3 кбайт при размере, скажем, 100 х 75 точек (если сделать мельче, то изображение станет почти неразличимым), следовательно, на странице должно быть не больше 15-20 таких превьюшек. Лично я обычно размещаю десяток, редко когда больше пятнадцати.

Во-вторых, большие картинки, на которые направляется посетитель по ссылке с "ноготка", все равно не могут быть действительно большими. Их обычно урезают до размера 600 х 400 точек, да и сжимают с использованием JPG-компрессии, чтобы осталось 40-30% от объема оригинала, что делает их пригодными разве что для просмотра на мониторе. Такие плохие, пережатые фотки не напечатаешь.

В-третьих, недостатком данной схемы является и то, что новое окно, в котором открывается большая картинка, заслоняет первоначальное окно навигации. И неудобно, и некрасиво: фотография - в левом верхнем углу,
а правее и ниже - большие несуразные белые поля.

Лучше, если фотография загружается в новое окно. Но тогда оно заслоняет первоначальное окно навигации.

Альтернативный подход

Однажды я увидел на сайте российских бардов www.bards.ru в разделе "Фотоархив" другую схему. Там на стартовой тематической странице, например "Грушинский фестиваль 2005 года", когда кликаешь по "ноготку", открывается промежуточное окно с картинкой средних размеров (480 х 360 пикселей), дополнительным полем с описанием фотографии и минимальными средствами навигации, что-то вроде "Следующее фото" и "Предыдущее фото". А уже на этой промежуточной странице есть ссылка для открытия "Полного фото", такое название у них принято.

Кликаем по "ноготку" - и открывается промежуточное окно с картинкой средних размеров (480 х 360), с полем для описания фотографии.

После нажатия на ссылку картинка загружается в то же окно. Это вынуждает посетителя нажимать на кнопку "Назад" в панели браузера.

Правда, на www.bards.ru это, с позволения сказать, "полное фото" тоже сильно пережато, но по другой причине: на сайте организована автоматизированная система добавления фотографий в архив, и доступ к ней есть у многих зарегистрированных пользователей. Автоматика работает усредненно, ведь характеристики снимка-источника ей неизвестны, и перестраховывается.

Я сначала подумал, что эта схема является идеальным решением, и даже собирался взять ее на вооружение. Но, пообщавшись с одним своим товарищем и рассказав ему о вышеописанном принципе размещения картинок, услышал интересное мнение. Он сказал, что не любит ждать загрузки каждой фотки по отдельности (а кто же любит?), а просто кликает по одному из снимков правой кнопкой мыши и выбирает команду "Закачать все при помощи FlashGet".

Можно кликнуть по одной из маленьких картинок правой кнопкой мыши и выбрать команду "Закачать все при помощи FlashGet".

Она появляется в контекстном меню после установки этого менеджера загрузок. Затем можно в появившемся окне свойств закачки выбрать фильтр, который будет тянуть, например, только файлы типа JPG. Программа начинает грузить все картинки, на которые ведут ссылки со страницы (кроме того, есть отличный плагин под названием DownloadThemAll для популярного интернет-браузера Firefox. - Прим. ред.).

В появившемся окне свойств закачки можно выбрать фильтр, который будет сливать на ваш ПК, например, только файлы типа JPG.

Пока идет загрузка, гуляй себе по другим страницам (правда, зачастую это проблематично, так как FlashGet практически полностью забивает канал связи и даже страницы, не содержащие графики, открываются крайне медленно) или занимайся другими делами (в игру погоняй или письмо напиши). А когда загрузка закончится, просматривай спокойно фотки в той же ACDSee. Признаюсь, я и сам давно пользуюсь этим методом для пакетного сохранения картинок.
Программа FlashGet разбивает файл на несколько частей и загружает их одновременно, в несколько потоков, используя канал связи по максимуму. А также дает возможность в случае обрыва соединения не начинать все сначала, а продолжить загрузку. (Если эту опцию поддерживает сервер, отдающий контент. - Прим. ред.)

В описанном случае с www.bards.ru этот фокус - пакетная закачка фотографий - не проходит, поскольку ссылки с "ноготков" ведут не к картинкам, а к страницам, на которых они расположены (HTML). И менеджер закачки предлагает скачать эти HTML-файлы, которые, как вы понимаете, вообще не содержат графики.

Поиск решения

Подумав над этой проблемой, я решил ее так.
И "ноготки", и фотки средних размеров (у меня они называются <img id="monitor"...> - "мониторчики") располагаются на одной и той же странице, а большие "оригиналы" (именно в кавычках, они ведь тоже ужаты немного) лежат на других страницах, открываемых кликом по "ноготку". Cмена картинки в блоке с id="monitor" по наведению курсора на "ноготок" осуществляется с помощью JavaScript: function changeImage(). Сначала в секции <head> </head> страницы надо создать идентификатор #monitor, чтобы обозначить на странице место, где будут происходить эти превращения (см. блок 1).

Блок 1. Создание идентификатора
#monitor в секции <head> </head>

<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Размещение фотографий
</title>
<style type="text/css" media="screen">
<!--
#monitor {
position: absolute;
left: 5px;
top: 5px;
width: 320px;
height: 240px;
margin: 5px;
background: #ffd08a;
border: groove 5px #ad4531;}

Туда же надо добавить классы для размещения "ноготков" в "кадрах" (.frame) на "фотопленке" (.fotoplenka). Я еще добавил класс .frnum для того, чтобы поверх каждого кадра был указан его номер в квадратике на желтом фоне (z-index: 100;) (см. блок 2).

Блок 2. Добавление класса для размещения "кадров" на "фотопленке"

.fotoplenka {
position: absolute;
top: 5px;
left: 400px;
width: 130px;
padding: 0px;
background: url(fotoplenka.gif) repeat-y left top; }
.frame {
position: relative;
width: 130px;
z-index: 0;}
.frnum {
position: absolute;
bottom: 0px;
right: 12px;
width: 25px;
font: bold 20px Times, serif;
color: #004080;
text-align: center;
vertical-align: bottom;
z-index: 100;
background-color: #ffd571;}
--> </style>

Также в секцию кода страницы <head>…</head> поместите описание функции JavaScript, которая будет по наведению мыши (событие onmouseover) менять картинку в "мониторчике" на другую, а при смещении курсора с объекта (onmouseout) возвращать первую (function changeBack). Это очень полезно для того, чтобы те посетители, которые не поняли механизма (поленились прочесть инструкцию, или у них очень медленно все грузилось), не могли сохранить картинку среднего размера непосредственно из "мониторчика". А то потом еще станут жаловаться на ее низкое качество (см. блок 3).

Блок 3. Функция, меняющая картинку в "мониторчике" по наведению мыши

<script type="text/javascript">
<!--
function changeImage (indexNum) {
var object = document.getElementById('monitor');
if (indexNum==01) object.src="foto-m_01.jpg";
if (indexNum==02) object.src="foto-m_02.jpg";
…
…
if (indexNum==09) object.src="foto-m_09.jpg";
if (indexNum==10) object.src="foto-m_10.jpg";}
function changeBack (indexNum) {
var object = document.getElementById('monitor');
object.src="foto-m_11.jpg";
}
// end hide -->
</script>
</head>

Описания операторов для смены кадров с 3-го по 8-й пропущены, так как они аналогичны первому и последнему. Затем в теле документа надо разместить какой-то первоначальный рисунок (в "мониторчике"), а, к примеру, правее или ниже него - нашу "фотопленку". В качестве фона у нее используется анимированный GIF, создающий иллюзию прокрутки пленки.

Лирическое отступление

Тут-то и обнаружился интересный факт. Как вы думаете, какого цвета фотопленка? Я почему-то думал, что сине-фиолетового. Так и нарисовал сначала. Тут заходит ко мне 17-летняя дочка и говорит:
- Все хорошо, только пленка неправильного цвета!
- Как неправильного?!

Достали пленки. Их у меня много осталось, с незапамятных времен хранятся в коробочках. Действительно, неправильного. Это я по памяти синий воспроизвел (по памяти спинного мозга, что ли?), такого цвета была проявленная черно-белая пленка! Ведь сколько тысяч (!) раз я ее в руках держал, проявляя и печатая… Но это было давно, и мои уже выросшие дети такую никогда не видели! Они прекрасно знают, что пленка коричневая. Та самая, которую получают после проявки в мини-лабе. Причем оттенок у нее какой-то трудноописуемый, мне никак не удавалось подобрать его сравнением. Пришлось ее сфотографировать (цифровым фотиком!) и, открыв снимок в редакторе, перенести цифровое значение ее цвета на страницу. А ведь через несколько лет, вероятно, подрастет поколение, которое вообще не будет знать никакой (!) пленки…

Назад к нашей конструкции

Вышеописанный прием позволяет, во-первых, размещать в качестве "полных фото" фотографии более крупного размера (если уж картинка действительно понравилась посетителю, то он потерпит долгую загрузку ради того, чтобы получить ее в высоком качестве) и, во-вторых, использовать менеджер загрузки.

Естественно, сначала надо подготовить картинки соответствующих размеров. Выбрав фотографии для размещения, привожу их к некоему общему знаменателю. Я с некоторых пор в качестве "больших" фоток стал использовать снимки с 1000, а иногда и с 1200 точек по длинной стороне.

Далее делаю из этих файлов промежуточные, которые будут отображаться в "мониторчике". В коде страницы к их именам добавлена буковка m. В популярной программе ACDSee есть средство пакетной резки. Пользоваться им просто: выделяете группу файлов, затем в контекстном меню выбираете Tools > Resize, задаете желаемое разрешение в точках (ширину и высоту), переводите переключатель в положение Reduce only ("Только уменьшать"). Потом, нажав кнопку Options, выбираете пункт Place the modified images in the following folder ("Поместить измененные картинки в следующую папку") и указываете каталог для сохранения результата. Наконец, нажав еще кнопочку JPEG compression settings ("Установки JPEG-сжатия"), перемещаете ползунок вверху на отметку 30-40%. Осталось нажать ОК три раза.

Настройка пакетного изменения размеров картинок. Нажав на кнопочку JPEG compression settings, переместим движок в положение 30-40%.

Таким же образом можно затем их все скопом переименовать (например, добавить к имени файла приписку m для средних по размеру или small для "ноготков"). Просто кликаете крысой по выделенной группе файлов и выбираете в контекстном меню команду Rename. Затем пишете "маску" (общую часть имени), добавив несколько "диезов" (#) - вместо них будут генерироваться порядковые номера. Там же можно указать, чтобы программа автоматически понизила регистр букв в расширениях файлов (Change extension to lower case). Ох, как много ошибок на веб-страницах рождается из-за того, что производители цифровых фотиков любят "кричать" - делать так, чтобы названия файлов состояли из прописных букв! А также из-за того, что компания Microsoft однажды решила, будто отображение расширений файлов в "Проводнике" - никому не нужная блажь! И откуда новым пользователям (а их, между прочим, всегда абсолютное большинство!) вообще узнать о таком понятии, как расширение файла?!

Но вернемся к делу. Для получения "средненьких" картинок размером 320 х 240 точек я пакетной обработкой не пользуюсь. И вот по какой причине. Фотки ведь бывают альбомные (landscape, или горизонтальные) и портретные (portrait, или вертикальные). А "мониторчик" у меня, как вы успели заметить, имеет следующий стиль: Style="position: absolute; width: 320; height: 240;".

Приходится из портретных изготавливать альбомные, вырезая из них кусок с помощью инструмента Crop. Между прочим, эту идею я перенял у администратора какого-то порносайта, немало удивившись тому, что большая голая девушка отличается от своей маленькой копии. Но эффект сам по себе интересен! Можно, к примеру, выделить какую-то важную деталь, которая на крупной фотке теряется.

Все эти "средние" изображения для показа в "мониторчике" должны быть строго одинаковых размеров и пропорций, чтобы страница не "ломалась" при смене картинки. Этого соответствия тоже легко достичь с помощью редактора ACDSee. Запустив инструмент Crop, поставьте галочку в позиции Constrain cropping proportion и выберите из выпадающего списка нужную пропорцию (в нашем случае - 4 х 3). Либо введите в поля Width и Height необходимые значения и потом поставьте эту галочку.

Обрезка картинки с соблюдением пропорций производится в редакторе ACDSee с применением инструмента Crop.

При растягивании обрезающей рамки автоматически будут соблюдаться указанные вами пропорции. У меня заготовлены всякие варианты, например, для печати на листе 10 х 15 см, портретный и альбомный.
А вот "ноготки" размером 100 х 75 или 75 х 100 точек я делаю пакетным методом, описанным выше. Причем в ACDSee это чрезвычайно удобно: выбираешь папку для сохранения уменьшенных картинок, а оригиналы целехоньки и на своих местах.

Диета для веб-страницы

Чтобы наш альбом быстро загружался и был удобен для восприятия смотрящего, желательно все же эти "маленькие" и "средненькие" картинки оптимизировать по весу. Лучшего средства, чем Adobe ImageReady (из комплекта Photoshop), пока что не придумано! Так что я, посмотрев на размеры изображений, большинство из них еще прогоняю через ImageReady. Загружаю в программу. Можно, кстати, сразу все.

И опять же прямо из ACDSee: на панели инструментов программы нажмите кнопочку с маленькой стрелочкой, направленной вниз (правее кнопки Edit image). Затем дайте команду Configure Editors и в появившемся окне после нажатия кнопки Add ("Добавить") выберите исполняемый файл того же Photoshop или ImageReady. Ссылки на эти редакторы добавятся в список Edit image. Затем можно будет мгновенно загружать просматриваемую картинку в нужный редактор.

Загрузка файлов во внешний редактор из ACDSee: кнопка с маленькой стрелочкой правее кнопки Edit image.

А загрузив ее в ImageReady, я нажимаю в меню кнопочку 4-up и из представленных фоток выбираю ту, которая при минимально возможном размере файла все же сохранила максимум качества. Там даже указано, сколько секунд будет грузиться файл определенного размера! Далее: File > Save Optimized или Ctrl + Alt + S.
Таким образом удается добиться того, чтобы размер "ноготков" не превышал 2-3 кбайт, а размер "мониторчиков" - 8-13 кбайт. Величины, приемлемые даже для модемщиков.

Оптимизация файлов в ImageReady: нажмите кнопочку 4-up и выберите ту картинку, которая покажется вам оптимальной.

Есть, конечно, еще одно средство (так и хочется добавить: "…обмана покупателя"!): с помощью JavaScript можно загружать все эти служебные картинки предварительно в буфер браузера при первой загрузке страницы. Тогда при наведении мыши они будут просто выскакивать! Зато первая загрузка страницы займет немало времени.

Этим приемом часто пользуются для предварительной закачки сменяющихся изображений для кнопок навигации. Но им в последнее время злоупотребляют профессиональные (в смысле - работающие за деньги) веб-дизайнеры, чтобы просто заставить посетителя смотреть их довольно продвинутую в техническом отношении (часто в формате Flash), но вместе с тем банальную рекламу! Просто спамеры от веб-дизайна!

Закрепляем успех

Осталось добавить несколько замечаний о том, как открывать новое окно для показа "полной" фотографии. Как я и упоминал, при стандартном размещении ссылки на фотографию в виде "ноготка" (файл foto-small_
01.jpg) при помощи тега <a href="foto_01.jpg"><img src=
"foto-small_01.jpg" width="100" height="75"></a> большое изображение (файл foto_01.jpg) загрузится в ту же страницу, и посетителю после ее просмотра придется нажимать на кнопку "Назад" в панели браузера.

При наведении мыши на "ноготок" средняя по размеру картинка почти мгновенно грузится в "мониторчик".

Если переписать тег ссылки с добавлением атрибута target (<a target="_blank" href="…">), то большая картинка откроется в новом окне. Лучше, но тоже неказисто. Это новое окно, с фотографией в верхнем левом углу, заслонит первоначальное окно навигации.

А выход прост. Надо добавить в тег ссылки еще одну функцию JavaScript, которая откроет окно заранее заданного размера и разместит его чуть в стороне от основного окна. Да еще и без строки меню, панели кнопок и строки состояния, которые в данном случае не нужны:

onclick="window.open(this.
href,this.target,'width=620,height=470,'+ 'location=no,toolbar=no,menubar=no,status=no');return false;".

Обратите внимание на размеры нового окна! Оно гораздо меньше самой фотографии. Откуда взялись эти числа? Как всегда, определены методом научного тыка, с привлечением моего собственного горького опыта. Ведь, с одной стороны, хочется, чтобы они были побольше! С другой стороны - и все опытные дизайнеры настоятельно рекомендуют так поступать, - неплохо бы позаботиться о тех, у кого еще монитор с экраном диагональю 15 дюймов и, следовательно, с разрешением 800 х 600 точек максимум. То есть картинка шириной более 600 точек сделает бесполезными все наши усилия. А к 600 точкам в ширину и к 450 точкам в высоту добавьте 20 пикселей для того, чтобы у картинки в новом окне были более или менее ровные поля. Все-таки IE засовывает изображение не впритык к границе окна.

Слепив все это впервые и разместив на сайте (с инструкцией, в которой описывалось, как быстро просматривать фотографии, наводя на них мышь, и открывать новое окно), я начал проверять, действует ли схема, и не на шутку испугался.

Ведь что происходит? После клика по "ноготку" открывается новое окно размером 620 х 470 пикселей, и в нем начинает грузиться большая фотография. Вот она заполнила всю рабочую область. А как ее рассмотреть?

При клике по "ноготку" открывается новое окно, смещенное влево и вверх. И в нем начинает грузиться большая картинка.

Полосы прокрутки нет! Успокоился я, когда после полной загрузки картинка автоматически уменьшилась до размеров окна и появилась вся. Это сработало встроенное средство автоматической подгонки изображений под размер окна. Его надо включить (если выключено) в "Свойствах обозревателя" на вкладке "Дополнительно".

После полной загрузки картинка уменьшилась до размеров нового окна и появилась вся: сработало средство автоматической подгонки.

Но тут, щелкнув по картинке правой кнопкой крысы и выбрав команду "Свойства", я опять испугался. Там был указан размер гораздо более скромный, чем у оригинала, - где-то 600 х 450 точек. Зачем же париться, скачивать картинку 1200 х 900, чтобы в результате сохранить ту, что вчетверо меньше?

Подумав так, я машинально щелкнул правой кнопкой мыши по этой уменьшенной фотке и дал команду "Сохранить рисунок как…". Какова же была моя радость (и довольно скупая благодарность фирме Microsoft за ее сыроватый IE), когда выяснилось, что сохраненная картинка все же имеет размер исходной - 1200 х 900! А отображается в окне, следовательно, ее временная, подогнанная под границы рабочего поля копия. Значит, они все-таки подумали об этой проблеме.
Рассмотрим код страницы, точнее, секцию <body>…</body>. Блоки кода с описанием кадров со 2-го по 9-й пропущены, так как они подобны 1-му и 10-му блокам (см. блок 4).

Блок 4. Собственно код страницы, секция <body>…</body>

<body>
<img id="monitor" src="foto-m_11.jpg" alt="Здесь будет меняться картинка">
<div class="fotoplenka">
<div class="frame">
<div class="frnum">
1
</div>
<a target="_blank" href="foto_01.jpg" onmouseover="changeImage(01)" onmouseout="changeBack()"
onclick="window.open(this.href,this.target,'width=620,height=470,'+ 'location=no,
toolbar=no,menubar=no,status=no');return false;"><img src="foto-small_01.jpg" width="100"
height="75" alt="1"></a>
</div>
…
…
<div class="frame">
<div class="frnum">
10
</div>
<a target="_blank" href="foto_10.jpg" onmouseover="changeImage(10)" onmouseout="changeBack()"
onclick="window.open(this.href,this.target,'width=620,height=470,'+ 'location=no,
toolbar=no,menubar=no,status=no');return false;"><img src="foto-small_10.jpg" width="100"
height="75" alt="10"></a>
</div>
</div>
</body>
</html>

Еще обратите внимание на то, что в тегах <img> для размещения рисунков присутствуют в общем-то необязательные атрибуты width и height. Если вы правильно укажете их значения, загрузка страницы значительно ускорится!

Вот пример такой страницы:
www.bard-aki.narod.ru/photo/060127-traditsya/060127-traditsya.html.

Немного деталей
Внимательный читатель, сходивший по вышеуказанной ссылке, заметит, что в моем рабочем примере "фотопленка" отображается внутри контейнера <iframe>…</iframe >, то есть фактически находится на другой странице. Это, конечно, несколько усложняет саму конструкцию и, вероятно, увеличивает период загрузки страницы. Но такое построение было выбрано мной исключительно для того, чтобы обеспечить возможность просмотра картинок для тех, у кого маленькие мониторы. Ранее мы говорили об ограничениях, связанных с шириной экрана, а ведь у него еще и высота есть!

Представьте себе, как бедный посетитель страницы пытается навести курсор на десятый "ноготок" и увидеть его увеличенную копию в "мониторчике", который выехал за верхнюю границу экрана! Использование контейнера <iframe>…</iframe >, имеющего собственную полосу прокрутки, позволяет довольно изящно решить эту проблему. Полный кайф для ленивых: крутишь колесико, а курсор автоматически попадает на другой "ноготок"!

Если фреймы не используются, лучше расположить "ноготки" в два ряда, выше и ниже "мониторчика". Пока просматриваешь верхний ряд, "мониторчик" находится внизу экрана, затем прокручиваешь страницу ниже и, просматривая нижний ряд, видишь "мониторчик" вверху (см. блок 5).

Блок 5. Механизм прокрутки снимков в "мониторчике"

#monitor {
position: absolute;
left: 5px;
top: 150px;
width: 320px;
height: 240px;
z-index: 1;
margin: 5px;
background: #ffd08a;
border: groove 5px #ad4531;}
.fotoplenkatop {
position: absolute;
top: 5px;
left: 5px;
width: 550px;
height: 130px;
padding: 0px;
background: url(fotoplenka-horiz.gif) repeat-x left top; }
.fotoplenkabott {
position: absolute;
top: 400px;
left: 5px;
width: 550px;
height: 130px;
padding: 0px;
background: url(fotoplenka-horiz.gif) repeat-x left top; }

Как видите, корректировкой правил позиционирования мы мгновенно меняем расположение блоков на странице.

Структура страницы без использования фреймов. Можно расположить "ноготки" в два ряда - выше и ниже "мониторчика".

Ну вот, разобрались. Разумеется, это лишь один пример того, как организовать в Сети фотогалерею своими руками, без визуальных HTML-редакторов. Используя вышеприведенный код в качестве "рыбы", вы при некотором старании сможете создать множество собственных вариантов в соответствии с вашими личными предпочтениями. Впрочем, не стоит забывать и о тех, для кого, собственно, и делается альбом. Желаю успеха героическим ваятелям веб-страниц!
 

<< на главную