Мой друг художник и поэт...
"Мой друг художник и поэт"
К.Никольский

Все новое – хорошо забытое старое.

В последнее время, плотно занимаясь графикой, в основном для "WEB 2.0 portator Lasto", но это отдельный разговор, более подробный и детальный отчет будет представлен чуть позже, добрался и до галереи.

Собственно говоря, давно хотел, в общем-то для дома и семьи, но думаю будет любопытно и познавательно всем заинтересованным лицам.

За основу взят вариант предложенный здесь. У автора этого ресурса своя фишка – практически все примеры выложенные там, идут с комментариями в html-коде преследуя одну единственную цель заставить ту или иную конструкцию работать в IE6.

С одной стороны работает, а то что это вступает в противоречие с рекомендациями W3C - по боку. Не являясь апологетом соблюдения те или иных правил, кто безгрешен :), там, где все можно сделать следуя стандартам и спецификациям, стоит отказаться от подобных трюков. Тем более, никаких сверхъестественных усилий прилагать не требуется.

Все фотографии от туда же, отчасти еще и потому, что свои делать лень, к тому же у вас будет возможность для сравнения. Но не надо считать, это плагиатом в чистом виде :)

Все, так или иначе, подверглось коррекции.

html-код хрестоматийный из него убраны комментарии и теги <a>…</a>, что используются в первоисточнике, а умиротворить IE6, мы попробуем другим способом.

Открытие разделов галереи осуществляется обычным наведением курсора мыши на пункты горизонтального меню. Увеличение картинки происходит подобным же образом.

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

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

Так же, нет ограничений на количество фото в ряду по горизонтали, в данном случае четыре картинки, вы можете – увеличив ширину .photo, подобрав оптимальный размер, получить в одном ряду столько картинок, сколько вмещается по ширине в окно вашего браузера, html-код, по тем же причинам, берем из второго столбца.

При необходимости, легко осуществимо добавления еще нескольких разделов в мини-галерею по образцу и подобию существующих.

Думаю, оформление горизонтального меню не вызовет не преодолимых препятствий, тут все предельно просто и рассматривать отдельно этот вопрос, нет никакого смысла.

Не скажу, что стили основательно переработаны, но изменения есть и здесь. Отказался от :focus, почему-то не работал в OPERA, разбираться не стал, да и нет особой необходимости.

Вообще, заключив увеличенную картинку в

<a href=”путь к фото.jpg”><img src=””></a>

и кликнув по ней, у вас появится возможность посмотреть полноразмерный, оригинальный вариант - первый пункт горизонтального меню, самая первая фотография.

Для IE6, используется скрипт image.htc – шесть строчек, чуть больше в стилях, это решают проблему псевдоэлемента :hover.

Смотрим.

Скачать zip-архив (около 4мб)- для более детального изучения.