www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание фотогалереи на сайте

Увеличение изображений. Программа Highslide JS

Фотогалерея Highslide JS - популярная программа на JavaScript для вывода изображений, разработанная компанией Highsoft Solutions AS из небольшого норвежского города Викисон (Viki Sogn). Как сказано на их сайте, это красивое место, окруженное горами и фьордами, и многие идеи пришли к разработчикам во время прогулок и катания на лыжах. Компания Highsoft Solutions AS состоит из семи молодых людей, руководимых Хонси Торстейном (Torstein Honsi).

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

Так как тема статьи увеличение изображений, то рассмотрим подробно только эту функцию программы. Highslide позволяет плавно увеличивать изображения, flash, iframe, HTML со ссылками и др. Подробное описание с примерами можно посмотреть на официальном сайте Highslide JS. Должен заметить, что бесплатное использование скрипта допускается только на некоммерческих сайтах, в противном случае необходимо приобрести лицензию (стоимость от $29, но нас этим не испугать и ничего буржуинам платить не будем!)

Два примера увеличения изображений с помощью Highslide JS показаны на рисунке (в правом примере дополнительно выводится надпись под изображением):

Субботник    Гена и Чебурашка
Гена и Чебурашка
Установка Highslide JS

Для установки Highslide JS сначала создадим на сайте новую папку, назвав её, для определенности, highslide. Затем скачиваем архив и распаковываем его в созданную папку. Таким образом, в ней будет файл скрипта highslide.js, файл стилей highslide.css и папка с вспомогательными изображениями graphics. Далее вставим в заголовок страницы внутрь тега <head>...</head> следующие строчки, указывающие пути к новым файлам Highslide JS, и небольшой скрипт с параметрами для наших примеров:

<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel=
"stylesheet" type="text/css" href="highslide/highslide.css" />
<script type=
"text/javascript">
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Закрыть"></div>',
position: 'top right',
fade: 2
});
hs.graphicsDir = 'highslide/graphics/';
hs.dimmingOpacity = 0.7; //прозрачность фона
hs.wrapperClassName = 'borderless';
</script>

Для увеличения изображения с помощью скрипта Highslide JS можно использовать два способа:
1. Создать два изображения: миниатюру (image.jpg) и увеличенную картинку (image_big.jpg). Затем поместить их в тег ссылки с классом class="highslide":
<a href="image_big.jpg" title="Увеличить" class="highslide" onclick="return hs.expand(this)">
<img alt=" " src="image.jpg" width="160" height="107"/></a>.

2. Использовать только одно увеличенное изображение, а для его уменьшения в браузере задать нужные размеры на странице при помощи атрибутов  width и height. Только не забывайте, что масштабирование, выполненное браузером, обычно ухудшает качество картинки:
<a href="image_big.jpg" title="Увеличить" class="highslide" onclick="return hs.expand(this)">
<img alt=" " src="image_big.jpg" width="160" height="107"/></a>.

Важное замечание: если размер увеличенного изображения (big.jpg) больше размера экрана в браузере пользователя, то Highslide JS автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Если вы хотите дополнительно вывести надпись под изображением, как в правом примере, то текст необходимо поместить во вложенный тег  <div class="highslide-caption"> сразу после ссылки:
<div ><a href="image_big.jpg" title="Увеличить" class="highslide" onclick="return hs.expand(this)">
<img alt=" " src="image.jpg" width="160" height="107"/></a>
<div class="highslide-caption">Гена и Чебурашка
</div></div>

Настройка Highslide JS

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

Далее - Увеличение изображений с помощью плагина jQuery Nivo Zoom

12.07.2013 г.
обновлено 10.05.2014 г.

Задать вопрос автору






Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: фотогалерея, скрипт фотогалереи, создание фотогалерей, увеличение изображений, Highslide, увеличение изображений на сайте