Highslide JS - фотогалерея

Автор: Андрей Косяк Дата публикации:

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

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

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

Качаем сам плагин —

Из архива берем всю папку 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 В папке архива highslide/ лежит несколько конфигураций плагина: c галлереей, с html, min-версии и pack-версии. Для конкретной задачи желательно подобрать необходимый функционал плагина, чтобы, как минимум, выиграть в размере скрипта. Если же ты хочешь исключить что-то более точечно, воспользуйся конфигуратором.

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

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

Недостатки

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

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

Материалы

Официальный сайт
Полный перечень функций и методов Highslide(на англ.)
Архив с плагином
Конфигуратор

Xiper