Главная/ Собираем HTML и CSS приемы/ Javascript: решения и плагины/ Gallery/ Highslide — красивая галерея

Highslide — красивая галерея

Подготовил: Андрей Косяк

Дата публикации: 11.06.2010

higslide - javascript галерея для фото
HighSlide — хороший JS плагин для создания галерей(и не только), обладающий массой интересных возможностей и настроек. Создан человеком по имени Torstein Hønsi, распространяется с открытым кодом.

Как это работает?

Для начала глубоко погружаться не будем — создадим простую фото-галереечку:

Качаем сам плагин — http://highslide.com/download.php

Из архива берем всю папку graphics(там находится оформление), a также сам плагин «highslide-full.js» и стили «highslide.css»(для ИЕ6 еще и «highslide-ie6.css»). Подключаем:

<link rel="stylesheet" type="text/css" href="css/highslide.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript" src="js/highslide-full.js"></script>

В коде каждая картинка галереи должна быть «завернута» в ссылку, а ссылка должна иметь такие атрибуты:

  • class=»highslide»
  • href=»путь к увеличеной картинке»
  • onclick=»return hs.expand(this)»
<a class="highslide" href="pic/photo1-big.jpg" onclick="return hs.expand(this)">
	<img src="pic/photo1.jpg" width="220" height="165" alt="" />
</a>

Заметка

В файле highslide-full.js в строке graphicsDir : ‘graphics/’ ставим свой путь к папке с оформлением. Иначе будет висеть табличка ‘Loading…’.

Всё! Самое элементарное готово! Смотрим результат.

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Навигация

Для «полноценности» нашей галереи стоит наделить её такими характерными для галерей штуками как навигация и счетчик. Заодно познакомимся еще с некоторыми функциями и возможностями «Хая».

Добавим к подключаемым файлам следующий код:

<link rel="stylesheet" type="text/css" href="css/highslide.css" />

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript" src="js/highslide-full.js"></script>
<script type="text/javascript">
hs.graphicsDir = '../example1/graphics/';     // путь к оформлению
hs.transitions = ['expand'];                  // способ смены слайдов, может принимать значения: expand, fade, crossfade. А также может иметь вид hs.transitions = ['expand/fade','expand/fade/crossfade'], где первый параметр — стиль появления слайда, второй стиль смены слайдов
hs.fadeInOut = true;                          // "затухание" при открыти/закрытии слайдшоу                     
hs.numberPosition = 'caption';                // счетчик может принимать значение caption и heading, что соответствует позиции вверху/внизу
hs.dimmingOpacity = 0.75;                     // прозрачность фона
hs.align = 'auto';                            // расположение слайда относительно экрана, возможные значения center/left/right/top/bottom, а так же их комбинации в парах, если auto — распологается на своём месте

// добавляем блок навигации (стандартный)
if (hs.addSlideshow) hs.addSlideshow({
        interval: 5000,                       // интервал смен в милисеках
        repeat: false,                        // повторять/не повторять
        useControls: true,                    // использовать ли кнопки навигации?
        overlayOptions: {
                opacity: .6,                  // прозрачность панели навигации
                position: 'bottom right',     // позиция панели навигации
                hideOnMouseOut: true          // панель спрячется, если убрать курсор мыши со слайда         
	}
});
</script>

Вот теперь мы можем сказать: «Да! Это галерея!». Результат.

Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3

Заметки

Хотелось бы заострить внимание на паре важных моментов:

  • не забывать про смену путей к оформлению
  • в ИЕ6 было замечено, что подложка под большим фото дивным образом «ломается», конечно не всегда, но если это случилось нужно проверить не затрагивают ли глобально Ваши стили таблицы и всё, что к ним относится. В моём случае проблема была в разделе сброса стилей, пришлось убрать из него все теги, касающиеся таблиц.
  • Update 17.01.2011 В папке архива highslide/ лежит несколько конфигураций плагина: c галлереей, с html, min-версии и pack-версии. Для конкретной задачи желательно подобрать необходимый функционал плагина, чтобы, как минимум, выиграть в размере скрипта. Если же ты хочешь исключить что-то более точечно, воспользуйся конфигуратором.

Преимущества

  • Работает «адекватно» во всех популярных браузерах
  • Довольно легко интегрируется в код
  • Гибкие настройки
  • Не требует наличия сторонних библиотек

Недостатки

  • «Загрязняет» код (необходимость прописывать ссылкам событие onclick() и класс highslide
  • На сегодняшний день не получилось оперативно изменить графическое оформление главного слайд-окна.

В данной статье были рассмотрены самые базовые и необходимые возможности Highslide, на полный перечень функций можно взгянуть в разделе «Материалы». В ближайшее время «ковырнем» глубже и рассмотрим другие очень полезные возможности такие как отображение html-контента с помощью AJAX, смену оформления и т.п.

Материалы

Теги: ,
Показать комментарии