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