На многих сайтах вошло в привычку использовать галереи для увеличения фотографий. Впрочем, подход интересен тем, что можно разместить на странице новости уменьшенное изображение (мини эскиз) компактно обтекаемое текстом, и дать возможность посетителю просмотреть картинку в оригинальном масштабе.
Иногда возникает необходимость сгруппировать несколько таких изображений компактно на странице, чтобы пользователь не мучился с постоянной прокруткой страниц, обширно заполненных графической информацией.
Неоспоримым лидером среди галерей с возможностью увеличения фотографий для сайта является highslide.
Вот только некоторые возможности галереи изображений highslide:
- Увеличение фотографий во всплывающем окне с множеством спец. эффектов, например, обладает lightbox эффектом
- Группирование фотографий в различные галереи с навигацией по фотографиям и slideshow
- Может использоваться для создания Inline галереи с мини эскизами
- Не требует включения дополнительных javascript framework ов
- Широкая поддержка всех современных браузеров: Internet Explorer, Safari, Opera, Google Chrome, Mozilla Firefox (даже поддерживает дедушку IE 6.0)
- Включает в свой состав несколько десятков языков для интерфейса галереи.
- Предоставляет контроль над множеством событий и позволяет определять собственные функции по их наступлению
- Имеет множество примеров использования (их вы можете найти на странице проекта, или же скачав скрипт с примерами) и очень сильную документацию, а так же конструктор настроек
- Присутствует возможность управления положением любых элементов, много предопределённых стилей различной цветовой направленности, возможность полного управления html кодом всплывающих окон и многое другое
- Адекватная своевременная техническая поддержка (правда, на английском)
- Работает не только с изображениями, но и поддерживает вставку в всплывающее окно html, flash, даже форм
- Бесплатен (если Вы не используете его заведомо для коммерческих проектов, с которых производится оплата товаров и услуг, в этом случае советую связаться с автором и заплатить скромную сумму в 30 долларов)
Приведу несколько примеров из наших работ:
- discontstory.ru – в шапке ссылки, ведущие на всплывающие формы: запомнить пароль, регистрация, авторизация
- www.celyn-abc-camp.com - всплывающие формы при наведении на города в списке адресов внизу страницы
- www.celyn-abc-camp.com - увеличение фотографий по щелчку с группировкой фотографий в галереи
- awesome-design.com - inline галерея с мини эскизами
Совет: кроме стандартных возможностей при вставке галерей с возможностью увеличения изображений на страницы сайта при его создании web мастера «забывают» подсказать посетителю сайта о возможности просмотра рисунка в оригинальном размере. Ошибочно полагаясь на то, что пользователь сам догадается щелкнуть, и, о чудо, вот она – большая фотография. Или просто меняют курсор на подсказку. Но правилом хорошего тона всё же является совет о дополнительном размещении значка увеличения в области картинки или около неё, можно так же явно разместить ссылку со словом Увеличить.
В следующих статьях я подробно рассмотрю настройки этого замечательного js framework а по стилизации и группированию изображений при создании сайтов. Кроме всего прочего поведаю Вам некоторые «хитрости» по внедрению на страницу при создании сайта такой приятной галереи, и взаимодействие между highlide js и другими js галереями и Фреймворками.