Ion.ImageSlider 1.2
jQuery слайдер изображений и лайтбокс с поддержкой скинов

Описание

  • Ion.ImageSlider — отличный и удобный слайдер картинок и лайтбокс в одном.
  • Лайтбокс поддерживает управление с клавиатуры с помощью клавиш ESC, LEFT и RIGHT.
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
  • Репозиторий на GitHub.
  • Плагин свободно распространяется на условиях лицензии MIT.

Демо

Минимал скин Метро скин Секси скин

Зависимости

Подготовка изображений

Чтобы слайдер работал корректно, картинки миниатюр должны иметь одинаковую высоту. Например в приложенных скинах, высота миниатюр 264px, ширина любая. Если вы хотите изменить это значение, то вам нужно будет так же отрегулировать высоту слайдера в CSS-файле скина.

Подключение

Подключаем библиотеки:

  • jQuery
  • ion.imageSlider.min.js

CSS:

  • normalize.min.css - желательно, если он у вас еще не подключен
  • ion.imageSlider.css
  • ion.imageSlider.skinName.css

Не забываем про картинки скина:

  • iis-skinName-skin-preloader.gif - прелоадер
  • iis-skinName-skin-preloader.png - спрайт
  • Либо воспользуйтесь вложенным в архив PSD файлом, и нарисуйте собственный скин
  • Прелоадеры можно сгенерировать здесь

Создаем галерею в виде группы ссылок:

<div class="ion-image-slider" id="mySlider">
    <a href="ссылка на большую картинку 1"><img src="ссылка на миниатюру 1" data-caption="Название, если нужно" /></a>
    <a href="ссылка на большую картинку 2"><img src="ссылка на миниатюру 2" /></a>
    ...
    <a href="ссылка на большую картинку N"><img src="ссылка на миниатюру N" data-caption="Еще название" /></a>
</div>

Инициализируем слайдер:

$("#mySlider").ionImageSlider();

Или инициализируем слайдер с параметрами:

$("#mySlider").ionImageSlider({
    zoomText: "Увеличить",                  // текст возле иконки увеличения; поставьте "", если не нужен
    startFrom: 0,                           // № картинки, с которой стартовать слайдер
    slideShow: true,                        // включаем автопрокрутку
    slideShowDelay: 7                       // пауза между сменой картинок (если слайдшоу включено)
});

Параметры

Атрибут По умолчанию Описание
zoomText "zoom" Не обязательный параметр, позволяет написать свой текст возле иконки увеличения
startFrom 0 Не обязательный параметр, позволяет задать стартовую картинку для слайдера
slideShow true Не обязательный параметр, позволет отключать автопрокрутку
slideShowDelay 7 Не обязательный параметр, пауза между сменой кадров в автопрокрутке (в секундах)

История обновлений

  • 26.06.2013 - релиз слайдера

Скачать

Поделиться

comments powered by Disqus
Fork me on GitHub