2 747 Скрипты / 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

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


<section> 
	<div style="overflow:hidden; width:960px; margin: 100px auto; padding:0 20px;"> 
		<div class="pix_diapo">
			<div data-thumb="images/thumbs/megamind1048.jpg">
				<img src="images/slides/megamind1048.jpg">
				<div class="caption elemHover fromLeft">
					Простой слайд с заголовком. Можно добавить более одного заголовка и расположить его в нужном месте с помощью CSS.
				</div>
			</div>
			<div data-thumb="images/thumbs/megamind_07.jpg">
				<img src="images/slides/megamind_07.jpg"> 
				<div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase">
					Тут вы можете увидеть два заголовка
				</div>
				<div class="caption elemHover fromLeft" style="padding-top:5px;">
					Первый загружается быстрее, чем второй
				</div>
			</div>
			<div data-thumb="images/thumbs/wall-e.jpg" data-time="7000">
				<img src="images/slides/wall-e.jpg">
				<div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;">
					Такой же эффект можно применить и к заголовкам
				</div>
				<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
					Кнопка
				</div>
				<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
					или две кнопки
				</div>
				<div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(images/demo/arrow_caption.png) no-repeat 230px 30px">
					Или любой другой html элемент...<br>
					и можно установить время перехода из любого слайда
				</div>
			</div>
			<div data-thumb="images/thumbs/up-official-trailer-fake.jpg">
				<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>
				<div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0">
					Также можно показать и видео, на понадобится "фальшивое изображение"... читайте документацию...
				</div>
			</div>
			<div data-thumb="images/thumbs/big_buck_bunny.jpg" data-time="7000">
				<div style="position:absolute; top:0; left:0; width:900px; height:430px; padding:20px; background:#fff; color:#222;">
					<div style="float:left; width:300px;">
						<p><br><br>Можно отобразить любой html элемент в слайдере, но обратите внимание, на то, что со многими элементами, эффект перехода может замедлиться.<br>
						Этот случай можете посмотреть на слайде с видео Vimeo и таблицей цен</p>
						<iframe src="http://player.vimeo.com/video/1084537?title=0&amp;byline=0&amp;portrait=0&amp;color=f0bc00&amp;autoplay=1" data-fake="images/slides/big_buck_bunny.jpg" width="300" height="169" frameborder="0"></iframe>
					</div>
					<div class="price_table">
					<div>
						<div class="price_column highlighted" style="top:0; left:190px; height:387px; background:#fff; -moz-box-shadow: 0 1px 4px #666;    -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
						</div></div><!-- .price_column --> 
						<div class="price_column" style="top:0; left:0; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666;    -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div> 
						</div></div><!-- .price_column --> 
						<div class="price_column" style="top:0; left:380px; height:383px; background:#ddd; -moz-box-shadow: 0 1px 4px #666;    -webkit-box-shadow: 0 1px 4px #666; box-shadow: 0 1px 4px #666;"><div>
						</div></div><!-- .price_column -->
						<div class="price_column highlighted fadeIn" style="top:0; left:190px;"><div>
							<div class="price_title">Standard</div><!-- .price_title --> 
							<div class="price_price">$9/мес</div><!-- .price_price --> 
							<div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation --> 
							<div class="pix_check">Check sign</div><!-- .pix_check --> 
							<div class="pix_check">Check sign</div><!-- .pix_check --> 
							<div class="pix_check">Check sign</div><!-- .pix_check --> 
							<div class="pix_error">Error sign</div><!-- .pix_error --> 
							<div>
								<a class="button button3" href="#">Купить</a>
							</div>
						</div></div><!-- .price_column --> 
						<div class="price_column fromTop" style="top:0; left:0"><div> 
							<div class="price_title">Basic</div><!-- .price_title --> 
							<div class="price_price">Free</div><!-- .price_price --> 
							<div class="price_explanation">And as the day advanced and the engine drivers</div><!-- .price_explanation --> 
							<div class="pix_check">Check sign</div><!-- .pix_check --> 
							<div class="pix_error">Error sign</div><!-- .pix_error --> 
							<div class="pix_check">Check sign</div><!-- .pix_check --> 
							<div class="pix_error">Error sign</div><!-- .pix_error --> 
							<div>
								<a class="button" href="#">Купить</a>
							</div> 
						</div></div><!-- .price_column --> 
						<div class="price_column fromBottom" style="top:0; left:380px;">
							<div>
								<div class="price_title">Professional</div><!-- .price_title --> 
								<div class="price_price">$19/мес</div><!-- .price_price --> 
								<div class="price_explanation">And as the day advanced and the engine drivers</div>
								<!-- .price_explanation --> 
								<div class="pix_check">Check sign</div><!-- .pix_check --> 
								<div class="pix_check">Check sign</div><!-- .pix_check --> 
								<div class="pix_check">Check sign</div><!-- .pix_check --> 
								<div class="pix_check">Check sign</div><!-- .pix_check --> 
								<div><a class="button" href="#">Купить</a></div> 
							</div>
						</div><!-- .price_column --> 
					</div>
					</div><!-- price_table -->
				</div>
			</div>
			<div data-thumb="images/thumbs/ratatouille2.jpg">
				<img src="images/slides/ratatouille2.jpg">
			</div>
	   </div><!-- #pix_diapo -->
	</div>
</section>

CSS

Стили:


<link rel='stylesheet' id='style-css'  href='diapo.css' type='text/css' media='all'><p></p>
<style>
body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 12px;
    line-height: 20px;
}
section {
    display: block;
    overflow: hidden;
    position: relative;
}
.button {
    background: #014464;
    background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));
    border: 1px solid #368DBE;
    border-top: 1px solid #c3d6df;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 0 1px 3px black;
    -webkit-box-shadow: 0 1px 3px black;
    box-shadow: 0 1px 3px black;
    color: white;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    width: auto;
}
.button2 {
    background: #d9ae00;
    background: -moz-linear-gradient(top, #b28b06, #9c7705 50%, #9c7705 51%, #5c4100);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b28b06), color-stop(.5, #9c7705), color-stop(.5, #9c7705), to(#5c4100));
    border: 1px solid #c7a60c;
    border-top: 1px solid #e5d51f;
}
.button3 {
    background: #ffd838;
    background: -moz-linear-gradient(top, #edbf21, #c89b0f 50%, #9c7705 51%, #906706);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #edbf21), color-stop(.5, #c89b0f), color-stop(.5, #c89b0f), to(#906706));
    border: 1px solid #c7a60c;
    border-top: 1px solid #e5d51f;
}
.price_table {
    float: right;
    font-size: 12px;
    margin: 10px auto 0;
    padding: 20px 0;
    position: relative;
    width: 570px;
}
.price_table .price_column.highlighted {
    background: #ffd838;
    margin: -5px!important;
    padding: 10px;
    z-index: 2;
}
.price_table .price_column {
    display: block;
    margin: 5px;
    float: left;
    position: absolute;
    width: 180px;
    z-index: 1;
}
.price_table .price_column > div {
    background: #eeeeee;
}
.price_table .price_column > div > div {
    padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > p {
    padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_column > div > ul {
    padding: 10px 15px;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #f6f6f6;
}
.price_table .price_title {
    background-color: #333333;
    border-top: 0!important;
    color: #ffffff;
    font-size: 14px;
}
.price_table .highlighted .price_title {
    font-size: 16px;
}
.price_table .price_price {
    font-size: 36px;
    line-height: 40px;
}
.price_table .highlighted  .price_price {
    font-size: 40px;
    line-height: 44px;
}
.price_table .price_explanation {
    font-size: 10px;
    line-height: 13px;
    text-transform: uppercase;
}
.price_table .cusButton {
    background-color: #333333;
    display: block;
    text-align: center;
}
.price_table li {
    padding: 5px 0;
}
.price_table div.pix_check {
    background: url(images/demo/list-check-green.png) no-repeat 15px center;
    padding-left: 38px!important;
}
.price_table div.pix_error {
    background: url(images/demo/list-error.png) no-repeat 15px center;
    padding-left: 38px!important;
}
</style>

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 после завершения перехода*

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

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

Комментарии

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

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

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