19.03.2013 10 871 Скрипты / Slider

iView - адаптивный jQuery слайдер

Плагин для создания красивейших слайдеров - iView. Множество настроек, навигация, таймер, API, поддержка touch устройств, вставка видео и адаптивность.

HTML

В head подключаем необходимые файлы для работы плагина:

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/jаvascript"></script>
<script src="raphael-min.js" type="text/jаvascript"></script>
<script src="jquery.easing.js" type="text/jаvascript"></script>
<script src="iview.packed.js" type="text/jаvascript"></script>

В тело документа вставьте секцию слайдера (или слайдеров):

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
</div>

Вы можете добавить Заголовок для каждого слайда. Для этого добавьте div с классом "iview-caption" в div приведенный выше:

<div id="iview">
    <!-- Slide 1 -->
    <div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
        <!-- Caption -->
        <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
    </div>
</div>

При добавлении html5 атрибута data-attribute к div с классом "iview-caption", вы можете указать эффект, который будет использоваться для Заголовка. Возможные эффекты: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade".

<div class="iview-caption" data-transition="fade">Описание заголовка</div>

Заголовок может иметь data-transition с параметром "fade", в этом случае он будет показываться с эффектом fade.

Доступны ещё такие HTML5 атрибуты:

data-transition - возможные эффекты перехода: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-easing - полный список доступен тут
data-speed - скорость переходов мс.
data-x - позиция Заголовка по координате X в px.
data-y - позиция Заголовка по координате Y в px.
data-width - ширина Заголовка в px, если не указана будет использоваться исходная ширина Заголовка.
data-height - высота Заголовка в px, если не указана будет использоваться исходная высота Заголовка.

Видео

Чтобы использовать в вашем слайдшоу видео, нужно вставить iframe в один из ваших слайдов:

<div data-iview:image="photos/photo.jpg">
    <!-- Video iFrame -->
    <iframe src="http://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 
    <!-- Caption -->
    <div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
</div>

Как вы можете заметить, мы задали ширину iframe 100%, таким образом видео будет изменять свой размер в соответствии с размерами слайдшоу.
И окончательно вам нужно теперь инициализировать плагин, то есть указать к какому селектору его применять:

<script type="text/jаvascript">
$(document).ready(function() {
    $('#slider').iView();
});
</script>

Доступные опции.

<script type="text/jаvascript">
$(document).ready(function() {
    $('#slider').iView({
        fx: 'random', // установите эффект, например: 'left-curtain,fade,zigzag-top,strip-left-fade' (достпуные эффекты читайте ниже)
        easing: 'easeOutQuad', // полный список эффектов тут: http://jqueryui.com/demos/effect/easing.html
        strips: 20, // количество полос для их же анимации
        blockCols: 10, // количество колонок для блочной анимации
        blockRows: 5, // количество строк для блочной анимации
        captionSpeed: 500, // скорость эффекта перехода для Заголовка
        captionEasing: 'easeInOutSine', // easing эффект для заголовка
        captionOpacity: 1, // прозрачность заголовка
        animationSpeed: 500, // скорость анимациии слайдов
        pauseTime: 5000, // как доолго будет показываться каждый слайд
        startSlide: 0, // установвка начального слайда (0 index)
        directionNav: true, // навигация Вперед/Назад
        directionNavHoverOpacity: 0.6, // Fade при наведении курсора
        controlNav: true, // 1,2,3,4... цифровая навигация
        controlNavNextPrev: true, // навигация Вперед/Назад
        controlNavHoverOpacity: 0.6, // fade эффект при наведении на наввигацию
        controlNavThumbs: false, // Показывать миниатюры на навигации
        controlNavTooltip: true, // Показывать превьюшки изображений ввиде тултипов
        autoAdvance: true, // Force auto transitions
        keyboardNav: true, // использование стрелок влево / вправо
        touchNav: true, // использование Touch swipe для смены слайдов
        pauseOnHover: false, // остановка слайдшоу при наведении
        nextLabel: "Next", // текст для кнопки "Вперед"
        previousLabel: "Previous", // текст для кнопки "Назад"
        playLabel: "Play", // текст для кнопки "Плей"
        pauseLabel: "Pause", // текст для кнопки "Пауза"
        closeLabel: "Close", // текст для кнопки "Закрыть"
        randomStart: false, //начинать со случайного слайдера
        timer: 'Pie', // Стиль таймера: "Pie", "360Bar" или "Bar"
        timerBg: '#000', // Фон таймера
        timerColor: '#EEE', // цвет таймера
        timerOpacity: 0.5, // прозрачность таймера
        timerDiameter: 30, // диаметр таймера
        timerPadding: 4, // отступ для таймера
        timerStroke: 3, // ширина границы таймера
        timerBarStroke: 1, // ширина границы Bar тамера
        timerBarStrokeColor: '#EEE', // Цвет границы таймера Bar
        timerBarStrokeStyle: 'solid', // Стиль границы таймера Bar
        timerX: 10, // Timer X position threshold
        timerY: 10, // Timer Y position threshold
        tooltipX: 5, // Tooltip X position threshold
        tooltipY: -5, // Tooltip Y position threshold
        onBeforeChange: function(){}, // триггеры до перехода слайдера
        onAfterChange: function(){}, // триггеры после перехода слайдера
        onSlideshowEnd: function(){}, // триггеры после показа всех слайдов
        onLastSlide: function(){}, // триггеры, когда показан последний слайдер
        onAfterLoad: function(){}, // триггер, когда слайдер загружен
        onpause: function(){}, // триггер, когда слайдер на паузе
        onPlay: function(){} // триггер, когда слайдер проигрывается
    });
});
</script>

Доступные значения эффектов для опции fx:

random
strip-down-right
strip-down-left
strip-up-right
strip-up-left
strip-up-down
strip-up-down-left
strip-left-right
strip-left-right-down
slide-in-right
slide-in-left
slide-in-up
slide-in-down
left-curtain
right-curtain
top-curtain
bottom-curtain
fade
block-random
block-fade
block-fade-reverse
block-expand
block-expand-reverse
block-expand-random
block-drop-random
zigzag-top
zigzag-bottom
zigzag-grow-top
zigzag-grow-bottom
zigzag-drop-top
zigzag-drop-bottom
strip-left-fade
strip-right-fade
strip-top-fade
strip-bottom-fade

HTML5 атрибуты data-

URL ссылка изображения в слайдере добавляется с помощью html5 атрибута data-. Это позволяет загрузить изображение только тогда, когда слайдшоу обращается к нему (lazy load метод).
С помощью html5 атрибутов вы можете добавить множество свойств для слайда, чтобы перезаписать общие.
Например, URL для миниатюр:

<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

или эффект перехода, только для одного слайда:

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>

Вы можете установить случайные переходы из множества эффектов:

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>

Ниже приведены все доступные атрибуты data-:

data-iview:transition - тип перехода: "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"
data-iview:easing - полный список easing эффектов тут
data-iview:image - URL изображение слайда
data-iview:thumbnail - URL миниатюры слайда (если значение опции 'controlNavThumbs' установлено, как true)
data-iview:pausetime - Задержка в мс между концом исползуемого эффекта и началом следующего
data-iview:type - тип слайда (установите для video, чтобы оптимизировать слайдер для показа видео роликов)

CSS

В этом примере мы используем два CSS файла. Один содержит некоторые общие стили, такие как цвета ссылок, размеры шрифтов и т.д. для страницы.
Другой файл содержит все специфические стили скрипта:

/* The strips and blocks in the Slider */
.iview-strip {
    some styles
}
.iview-block {
    some styles
}
 
/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a {
    some styles
}
.iview-prevNav {
    some styles
}
.iview-nextNav {
    some styles
}
 
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav {
    some styles
}
.iview-controlNav a {
    some styles
}
.iview-controlNav a img {
    some styles
}
.iview-controlNav a.active {
    some styles
}
 
/* The captions in the Slider */
.iview-caption {
    some styles
}
 
/* The timer in the Slider */
#iview-timer {
    some styles
}
 
#iview-timer div {
    some styles
}
 
/* The Preloader in the Slider */
#iview-preloader {
    some styles
}
#iview-preloader div {
    some styles
}
 
/* The video show in the Slider */
.iview-video-show {
    some styles
}
.iview-video-show .iview-video-container {
    some styles
}
.iview-video-show .iview-video-container a.iview-video-close {
    some styles
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
    some styles
}
 
 
/* The tooltip in the Slider */
#iview-tooltip {
    some styles
}
 
#iview-tooltip div.holder {
    some styles
}
 
#iview-tooltip div.holder div.container {
    some styles
}
 
#iview-tooltip div.holder div.container div {
    some styles
}
 
#iview-tooltip div.holder div.container div img {
    some styles
}

JS

Как сделать Паузу и Плей слайдера?

$('#slider').trigger('iView:pause'); //Остановка слайдера
$('#slider').trigger('iView:play'); //Старт слайдера

Как сменить слайд?

$('#slider').trigger('iView:goSlide', [2]); //перейти к слайду 2

Как перейти к следующему или предыдущему слайду?

$('#slider').trigger('iView:previous'); //перейти к предыдущему слайду
$('#slider').trigger('iView:next'); //перейти к следующему слайду

Как установить показ со случайного слайда?

var total = $('#slider').children().length;
var rand = Math.floor(Math.random()*total);
$('#slider').iView({
    startSlide:rand
});

Скачать 7615Загрузок 2,61 Mb

Демо

Ссылки