Продолжаю серию статей о полезных плагинах от отечественного производителя. Сегодня рассмотрим небольшой слайдер изображением со встроенным 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” | Не обязательный параметр, позволяет написать свой текст возле иконки увеличения |
| startFrom | 0 | Не обязательный параметр, позволяет задать стартовую картинку для слайдера |
| slideShow | true | Не обязательный параметр, позволяет отключать автопрокрутку |
| slideShowDelay | 7 | Не обязательный параметр, пауза между сменой кадров в автопрокрутке (в секундах) |