Highslide — красивая галерея
Дата публикации: 11.06.2010
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, смену оформления и т.п.
Материалы
- Официальный сайт
- Полный перечень функций и методов Highslide(на англ.)
- Архив с плагином
- Конфигуратор