Продолжаю серию статей о полезных плагинах от отечественного производителя. Сегодня рассмотрим небольшой слайдер изображением со встроенным lightbox’ом. Мне он приглянулся тем что как то понадобилось сделать слайдер который отображает активный слайд в центре слайдера, а по бокам не полностью показываются остальные слайды и этот слайдер отлично подошел для этой цели.

Но к сожалению, на мой взгляд, у него есть крайне неприятный минус. Минус заключается в этапе подготовки изображений для слайдера, т.е. нужно создавать 2 изображения, первое для самого слайдера(миниатюру) и вторую оригинал для lightbox’а. Миниатюры должны быть одинакового размера по высоте иначе верстка может немного поехать.

Подключение

Подключаем jQuery, ion.imageSlider.min.js и стили, в архиве есть 3 готовых стиля подключаются по желанию

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

1
2
3
4
5
6
<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>

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

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

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

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

Параметры

ПараметрПо умолчаниюОписание параметра
zoomText«zoom»Не обязательный параметр, позволяет написать свой текст возле иконки увеличения
startFrom0Не обязательный параметр, позволяет задать стартовую картинку для слайдера
slideShowtrueНе обязательный параметр, позволяет отключать автопрокрутку
slideShowDelay7Не обязательный параметр, пауза между сменой кадров в автопрокрутке (в секундах)

Возможно вас это заинтересует
comments powered by HyperComments