Слайдшоу с jmpress.js
Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.
HTML
У нас будет основной контейнер - <section> с классом jms-slideshow. Внутри будет содержаться несколько дивов с классом step. Это и будут наши слайды. Каждый слайд (div с классом step) получит класс data-color для определения цвета фона и некоторых атрибутов jmpress.js.
Обо всех имеющихся опциях можно почитать тут: http://shama.github.com/jmpress.js/docs/#options.
Мы будем использовать некоторые атрибуты для определения позиции и вращения слайдов в 3D пространстве:
<section id="jms-slideshow" class="jms-slideshow">
<div class="step" data-color="color-1">
<div class="jms-content">
<h3>Заголовок</h3>
<p>Текст</p>
<a class="jms-link" href="#">Читать далее</a>
</div>
<img src="images/1.png" />
</div>
<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
<!-- ... -->
</div>
<!-- ... -->
</section>CSS
Основному контейнеру установим ширину в процентах с минимальными и максимальными значениями:
.jms-slideshow {
position: relative;
width: 80%;
max-width: 1400px;
min-width: 640px;
margin: 20px auto;
height: 460px;
}Следующая оболочка динамически добавляемая и будет видимой оболочкой слайдшоу:
.jms-wrapper {
width: auto;
min-width: 600px;
height: 440px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 10px solid #fff;
border: 10px solid rgba(255, 255, 255, 0.9);
outline: none;
transition: background-color 1s linear;
}Классы цвета фона будут применяться к предыдущей оболочке (wrapper). Класс определен в атрибутах data-color каждого слайда. Это позволит добавить цвет фона для каждого слайда и изменить его с переходом. (Продолжительность перехода будет указана в jаvascript)
.color-1 {
background-color: #E3D8FF;
background-color: rgba(227, 216, 268, 1);
}
.color-2 {
background-color: #EBBBBC;
background-color: rgba(235, 187, 188, 1);
}
.color-3 {
background-color: #EED9C0;
background-color: rgba(238, 217, 192, 1);
}
.color-4 {
background-color: #DFEBB1;
background-color: rgba(223, 235, 177, 1);
}
.color-5{
background-color: #C1E6E5;
background-color: rgba(193, 230, 229, 1);
}Слайды будут иметь такой стиль:
.step {
width: 900px;
height: 420px;
display: block;
transition: opacity 1s;
}
.step:not(.active) {
opacity: 0;
}У неактивных слайдов (.step) непрозрачность будет 0. Когда слайды будут перемещаться, непрозрачность будет установлена на 1.
У внутренних частей слайдов будет следующий стиль:
.jms-content{
margin: 0px 370px 0px 20px;
position: relative;
clear: both;
}
.step h3{
color: #fff;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}Ссылка "Читать далее" будет иметь отдельно небольшой переход: как только слайд станет активным, ссылка будет перемещаться вверх постепенно появляясь:
a.jms-link{
color: #fff;
text-transform: uppercase;
background: linear-gradient(top, #969696 0%,#727272 100%);
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}Изображение будет абсолютно с позиционировано справой стороны каждого слайда:
.step img{
position: absolute;
right: 0px;
top: 30px;
}"Точки" навигации будут позиционироваться под слайдом:
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
user-select: none;
}С "user-select:none" текст элемента и его под-элементов не появится, как если бы они не были выбраны.
SPAN будет маленькой темной точкой:
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}И используем псевдо-элемент для создания маленькой белой точки:
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}Навигационные стрелки (span) будут расположены слевой и справой стороны слайдшоу. Для стрелок будем использовать фоновые изображения:
.jms-arrows{
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}JS
Подключаем jQuery, jmpress и наш плагин:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jmpress.min.js"></script>
<script type="text/jаvascript" src="js/jquery.jmslideshow.js"></script>Для создания нашего сценария мы будем использовать только часть возможностей плагина jmpress, но при желании вы можете использовать и другие. Почитать о всех функциях jmpress можно тут: http://shama.github.com/jmpress.js/
Итак создавать мы будем свой плагин слайдшоу. Вызывать его будем примерно так:
$( '#jms-slider' ).jmslideshow();Опции для jmpress плагина определены как опции по умолчанию в нашем плагине (заметьте, что вы можете определить больше опций (http://shama.github.com/jmpress.js/docs/#options), чем у нас перечислено.)
jmpressOpts : {
// установите область просмотра
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},Вы можете изменить их в плагине слайдшоу или же передать определенное значение, когда инициализируете плагин.
Например так:
// опции jmpress
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
// вызов плагина jmslideshow
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));Далее набор доступных параметров для плагина слайдшоу:
$.JMSlideshow.defaults = {
// опции для jmpress плагина.
// вы можете добавить больше опций...
jmpressOpts : {
// установить область просмотра
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
// для этого конкретного плагина у нас будут следующие опции:
// показать/скрыть навигационные стрелки
arrows : true,
// показать/сркыть навигационные точки/страницы
dots : true,
// скорость перехода изменения цвета (bgcolor) для каждого слайда (.step)
bgColorSpeed: '1s',
// автопоказ вкл / выкл
autoplay : false,
// время между переходами для слайдшоу
interval : 3500
};Как только плагин слайдшоу вызывается, первая функция, которая будет выполнена, это функция init:
_init : function( options ) {
this.options = $.extend( true, {}, $.JMSlideshow.defaults, options );
// слайды
this.$slides = $('#jms-slider').children('div');
// общее количество слайдов
this.slidesCount = this.$slides.length;
// цвет фона bgcolor слайдов
this.colors = $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
// построение необходимой структуры, чтобы заработал jmpress
this._layout();
// инициализация плагина jmpress
this._initImpress();
// если поддерживается (функция реализованная в jmpress плагине)
if( this.support ) {
// загрузка некоторых событий
this._loadEvents();
// если автопоказ включен, то начигается слайдшоу
if( this.options.autoplay ) {
this._startSlideshow();
}
}
},В функции _layout мы создаем необходимую структуру для jmpress плагина. Также мы будем добавлять навигационные стрелки/точки в случае, если в опциях они включены (true):
_layout : function() {
// добавляет определенный класс каждому из шагов (слайдов)
this.$slides.each( function( i ) {
$(this).addClass( 'jmstep' + ( i + 1 ) );
} );
// оболочка слайдов. Эта оболочка будет элементом на котором мы вызовем плагин jmpress
this.$jmsWrapper = this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
// скорость перехода при изменении цвета (bgcolor) для оболочки
this.$jmsWrapper.css( {
'-webkit-transition-duration' : this.options.bgColorSpeed,
'-moz-transition-duration' : this.options.bgColorSpeed,
'-ms-transition-duration' : this.options.bgColorSpeed,
'-o-transition-duration' : this.options.bgColorSpeed,
'transition-duration' : this.options.bgColorSpeed
} );
// добавляем навигационные стрелки
if( this.options.arrows ) {
this.$arrows = $( '<nav class="jms-arrows"/>' );
if( this.slidesCount > 1 ) {
this.$arrowPrev = $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
this.$arrowNext = $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );
}
this.$el.append( this.$arrows )
}
// добавляем навигационные точки
if( this.options.dots ) {
this.$dots = $( '<nav class="jms-dots"/>' );
for( var i = this.slidesCount + 1; --i; ) {
this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );
}
if( this.options.jmpressOpts.start ) {
this.$start = this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;
( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;
this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
}
this.$el.append( this.$dots )
}
},Плагин jmpress мы инициализируем в функции _initImpress. Также мы переопределим метод jmpress "setActive" для переключения активной навигационной точки.
_initImpress : function() {
var _self = this;
this.$jmsWrapper.jmpress( this.options.jmpressOpts );
// проверка если поддерживается (функция из jmpress.js):
// добавляет класс not-suported для оболочки
this.support = !this.$jmsWrapper.hasClass( 'not-supported' );
// если не поддерживается, удаляет ненужные элементы
if( !this.support ) {
if( this.$arrows ) {
this.$arrows.remove();
}
if( this.$dots ) {
this.$dots.remove();
}
return false;
}
// переопределение jmpress метода setActive
this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
// change the pagination dot active class
if( _self.options.dots ) {
// добавление класса current к текущей точке/странице
_self.$dots
.children()
.removeClass( 'jms-dots-current' )
.eq( slide.index() )
.addClass( 'jms-dots-current' );
}
// delete all current bg colors
this.removeClass( _self.colors );
// add bg color class
this.addClass( slide.data( 'color' ) );
} );
// add step's bg color to the wrapper
this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );
},Функции _startSlideshow и _stopSlideshow запустят и остановят слайдшоу, если опция автопоказа включена в настройках:
// начать слайдшоу, если автопоказ включен
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
_self.$jmsWrapper.jmpress( 'next' );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.interval );
},
// остановить слайдшоу
_stopSlideshow : function() {
if( this.options.autoplay ) {
clearTimeout( this.slideshow );
this.options.autoplay = false;
}
},Наконец, мы загружаем события для навигационных стрелок и точек. Событие touchend уже определено в плагине jmpress, но мы должны удостовериться в остановке слайдшоу в случае, если это событие инициировано:
_loadEvents : function() {
var _self = this;
// навигационные стрелки
if( this.$arrowPrev && this.$arrowNext ) {
this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'prev' );
return false;
} );
this.$arrowNext.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'next' );
return false;
} );
}
// навигационные точки
if( this.$dots ) {
this.$dots.children().on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
return false;
} );
}
// событие touchend уже определено в плагине jmpress.
// мы должны удостоввериться в остановке слайдшоу, если событие инициировано
this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
_self._stopSlideshow();
} );
}
