www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Увеличение изображений. Программа 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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru