Слайдшоу с jmpress.js

Доброго времени суток, уважаемый посетитель сайта Webik-Diz! Ты находишься на сайте, на котором сможешь скачать действительно качественные шаблоны. Помимо обычных дизайнов, на сайте есть огромный архив наших авторских рипов, множество красивейших макетов, уникальных версток и адаптаций. Мы стараемся помочь пользователю найти шаблон для сайта, а также помочь в освоении системы uCoz. Оставайтесь со StuDRippo и будьте в курсе всех последних поступлений на сайте!

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Nikola

Награды: 2
Репутация: 7

Вторник, 03.07.2012, 20:03

Администратор

Сообщений: 365

Используя jmpress, сделаем jquery плагин для создания слайдшоу с интересными 3D эффектами для слайдов.
Разметка HTML

У нас будет основной контейнер - <section> с классом jms-slideshow. Внутри будет содержться несколько дивов с классом step. Это и будут наши слайды. Каждый слайд (div с классом step) получит класс data-color для определения цвета фона и некоторых атрибутов jmpress.js.
Обо всех имеющихся опциях можно почитать тут: http://shama.github.com/jmpress.js/docs/#options.
Мы будем использовать некоторые атрибуты для определения позиции и вращения слайдов в 3D пространстве:

Code

<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

Основному контейнеру установим ширину в процентах с минимальными и максимальными значениями:

Code

.jms-slideshow {
      position: relative;
      width: 80%;
      max-width: 1400px;
      min-width: 640px;
      margin: 20px auto;
      height: 460px;
}

Следующая оболочка динамически добавляемая и будет видимой оболочкой слайдшоу:

Code

.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 каждого слайда. Это позволит добавить цвет фона для каждого слайда и изменить его с переходом. (Продолжительность перехода будет указана в javascript)

Code

.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);
}

Слайды будут иметь такой стиль:

Code

.step {
      width: 900px;
      height: 420px;
      display: block;
      transition: opacity 1s;
}
.step:not(.active) {
      opacity: 0;
}

У неактивных слайдов (.step) непрозрачность будет 0. Когда слайды будут перемещаться, непрозрачность будет установлена на 1.

У внутренних частей слайдов будет следующий стиль:

Code

.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;
}

Ссылка "Читать далее" будет иметь отдельно небольшой переход: как только слайд станет активным, ссылка будет перемещаться вверх постепенно появляясь:

Code

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;
}

Изображение будет абсолютно спозициолнировано справой стороны каждого слайда:

Code

.step img{
      position: absolute;
      right: 0px;
      top: 30px;
}

"Точки" навигации будут позиционироваться под слайдом:

Code

.jms-dots{
      width: 100%;
      position: absolute;
      text-align: center;
      left: 0px;
      bottom: 20px;
      z-index: 2000;
      user-select: none;
}

С "user-select:none" текст элемента и его под-элементов не появится, как если бы они не были выбраны.
SPAN будет маленькой темной точкой:

Code

.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);
}

И используем псевдо-элемент для создания маленькой белой точки:

Code

.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) будут расположены слевой и справой стороны слайдшоу. Для стрелок будем использовать фоновые изображения:

Code

.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;
}

javascript

Подключаем jQuery, jmpress и наш плагин:

Code

Для создания нашего сценария мы будем использовать только часть возможностей плагина jmpress, но при желании вы можете использовать и другие. Почитать о всех функциях jmpress можно тут: http://shama.github.com/jmpress.js/

Итак создавать мы будем свой плагин слайдшоу. Вызывать его будем примерно так:

Code

$( '#jms-slider' ).jmslideshow();

Опции для jmpress плагина определены как опции по умолчанию в нашем плагине (заметьте, что вы можете определить больше опций (http://shama.github.com/jmpress.js/docs/#options), чем у нас перечислено.)

Code

jmpressOpts : {
      // установите область просмотра
      viewPort        : {
          height  : 400,
          width   : 1300,
          maxScale: 1
      },
      fullscreen      : false,
      hash            : { use : false },
      mouse           : { clickSelects : false },
      keyboard        : { use : false },
      animation       : { transitionDuration : '1s' }
},

Вы можете изменить их в плагине слайдшоу или же передать определенное значение, когда инициализируете плагин.
Например так:

Code

// опции jmpress
var jmpressOpts = {
      animation       : { transitionDuration : '0.8s' }
};

// вызов плагина jmslideshow
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
      autoplay    : true,
      bgColorSpeed: '0.8s',
      arrows      : false
}));

Далее набор доступных параметров для плагина слайдшоу:

Code

$.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:

Code

_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):

Code

_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" для переключения активной навигационной точки.

Code

_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 запустять и остановят слайдшоу, если опция автопоказа включена в настройках:

Code

// начать слайдшоу, если автопоказ включен
      _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, но мы должны удостовериться в остановке слайдшоу в случае, если это событие инициировано:

Code

_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();
      } );
}

Слайдшоу с jmpress.js

Страница 1 из 1
1