
Плагин для создания красивейших слайдеров - 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>
$(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>
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: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 });
Просмотров: 4446
|
Категория: Скрипты | Добавил: NA
Другие новости |
Поделиться ссылкой
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.