» » » » 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 приведенный выше:
Код
<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/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 });
  Просмотров: 4052 | Категория: Скрипты | Добавил: NA

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.