2 839 Скрипты / Slider

Diapo - слайдшоу

Diapo - слайдшоу

Diapo это слайдшоу требующая jQuery 1.4+, а также для увеличения функциональности и такие jQuery плагины: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/, но не все плагины).

HTML

Разметка из Демо:

CSS

Стили:

jаvascript

В шапке покдлючаем необходимые скрипты:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if !IE]><!--><script type='text/javascript' src='scripts/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]-->
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='scripts/diapo.min.js'></script>
<script>
	$(function(){
		$('.pix_diapo').diapo();
	});
</script>

Методы

  • $('selector').diapo();    основной формат
  • $('selector').diapo({fx: 'scrollHorz', time: '5000'});    пример с несколькими настройками
  • $('selector').diapoStop();    эту функцию можно использовать, чтобы остановить слайдшоу
  • $('selector').diapoPlay();    эту функцию можете использовать как воспроизведение/пауза для слайдшоу

Опции

  • selector:    'div', [target element]
  • fx:    'random',

Доступные эффекты: 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight'
Также вы можете использовать и более одного эффекта: 'curtainTopLeft, mosaic, bottomLeftTopRight'

  • mobileFx:    '', [оставьте поле пустым, если хотите использовать те же эффекты, что и на ПК, и на мобильных устройствах]
  • slideOn:    'random', [next, prev, random: укажите какой эффект перехода будет применен к текущему (предыдущему) или следующему слайду]
  • gridDifference:    250, [чтобы сделать сетку блоков медленнее, чем кусочки, это значение должно быть меньше, чем transPeriod]
  • easing:    'easeInOutExpo', [полный список доступных эффектов http://jqueryui.com/demos/effect/easing.html]
  • mobileEasing:    '', [оставьте поле пустым, если хотите показать те же эффекты, что и на ПК, и на мобильных устройствах]
  • loader:    'pie', [pie, bar, none (даже если вы выберите "pie", старые браузеры, ниже IE8- не смогут показывать слайдшоу... они будут отображать полосу загрузки)]
  • loaderOpacity:    .8, [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1]
  • loaderColor:    '#ffff00',
  • loaderBgColor:    '#222222',
  • pieDiameter:    50,
  • piePosition:    'top:5px; right:5px', [этот параметр принимает значение CSS]
  • pieStroke:    8,
  • barPosition:    'bottom', [bottom, top]
  • barStroke:    5,
  • navigation:    true, [true, false. Включает кнопки Вперед и Назад, их ID такие #pix_prev и #pix_next]
  • mobileNavigation:    true, [true, false. Включает кнопки Вперед и Назад на мобильных устройствах]
  • navigationHover:    true, [true, false. Если true, то навигация будет видна только при наведении на слайдер]
  • mobileNavHover:    true, [true, false. Если true, то навигация будет видна только при наведении на слайдер, применительно к мобильным устройствам]
  • commands:    true, [true, false. Включает кнопки Стоп и Плей]
  • mobileCommands:    true, [true, false. Включает кнопки Стоп и Плей на мобильных устройствах]
  • pagination:    true, [true, false. Включает нумерацию для навигации. Ниже пример кода, который нужно будет добавить]

<div id="pix_pag">
    <ul id="pix_pag_ul">
        <li id="pag_nav_0"><span><span>0</span></span></li>
        <li id="pag_nav_1"><span><span>1</span></span></li>
        <li id="pag_nav_2"><span><span>2</span></span></li>
        ...и т.д.
    </ul>
</div>

  • mobilePagination:    true, [true, false. Включает нумерацию для навигации. на мобильных устройствах]
  • thumbs:    true, [true, false. Показываются миниатюры  (если доступны) когда курсор наводится на навигационную кнопку номера слайда. Не доступно для мобильных устройств.]
  • hover:    true, [true, false. Пауза при наведении. Не доступно для мобильных устройств.]
  • pauseonclick:    true, [true, false. Остановка слайдшоу при клике на слайдер.]
  • rows:    4,
  • cols:    6,
  • slicedRows:    8, [если 0 значение такое же, как и у rows]
  • slicedCols:    12, [если 0 значение такое же, как и у cols]
  • time:    3000, [время в мс, между окончанием слайд-эффекта и началом следующего слайда.]
  • transPeriod:    1500, [продолжительность слайд-эффекта в мс]
  • autoAdvance:    true, [true, false]
  • mobileAutoAdvance:    true, [true, false. Auto-advancing для мобильных устройств]
  • onStartLoading:    function() { },
  • onloaded:    function() { },
  • onEnterSlide:    function() { },
  • onStartTransition:    function() { }

API

  • 'data-fake'    путь к картинке, [iframes (или objects) должны быть заменены картинкой во время перехода. Вставьте путь до изображения, пример ниже:]

<iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe>

  • 'data-thumb'    путь к картинке, [размер установлен по умолчанию 50x50 пикселей. Вы можете изменить его в стилях CSS. Атрибут используется для target element для установки миниатюры по отношению к слайду]
  • 'data-fx'    то же значение, что и для 'fx' опции, [атрибут используется для target element для установки эффекта по отношению к слайду]
  • 'data-mobileFx'    то же значение, как и выше, но для мобильных устройств
  • 'data-slideOn'    Вперед или Назад, [используйте этот атрибут для target element для установки если применен эффект перехода к предыдущему или следующему элементу относительно слайда]
  • 'data-time'    в миллисекундах, [используйте этот атрибут для target element для установки на слайде времени между переходом и следующим слайдом]
  • 'data-easing'    то же значение, что и у 'easing' опции, [используйте этот атрибут для target element, чтобы установить easing эффект для слайда ]
  • '.fromLeft'    добавьте этот класс к элементу (с position:absolute), который должен появляться слевой стороны после завершения  перехода*
  • '.fromRight'    добавьте этот класс к элементу (с position:absolute) который должен появляться справой стороны после завершения  перехода*
  • '.fromTop'    добавьте этот класс к элементу (с position:absolute), который должен появляться сверху после завершения  перехода*
  • '.fromBottom'    добавьте этот класс к элементу (с position:absolute), который должен появляться снизу после завершения  перехода*
  • '.fadeIn'    добавьте этот класс к элементу (с position:absolute), который будет появляться с эффектом fade in после завершения перехода*

     (*)все эти элементы не будут показываться одновременно, а будут отображаться последовательно.

Скачать 1139Загрузок 490,26 Kb
Демо
Ссылки
http://www.pixedelic.com/plugins/diapo/

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Аудио слайдшоу с jPlayer
Slider
Floom - слайдшоу
Slider
Orbit - плагин слайдшоу
Slider
TinyFader - слайдшоу
Slider
Slides - плагин слайдшоу
Slider