3DM-студия
» » » iView - адаптивный jQuery слайдер

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

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/javascript"></script>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="iview.packed.js" type="text/javascript"></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 приведенный выше:

    <!-- 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/javascript">
$(document).ready(function() {
    $('#slider').iView();
});
</script>

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

<script type="text/javascript">
$(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
}

javascript
Как сделать Паузу и Плей слайдера?
$('#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
});



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...