Webik Diz

Slider v5.0

Nikola — Tue, 14 Aug 2012 18:10:06 GMT

Представляю еще один слайдер для ucoz с jQuery установка скрипта максимально проста вам всего лишь нужно залить папку images в корень своего сайта скопировать все их текстового файла и вставить туда куда нужно изображения и описание меняем на свое

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

Nikola — Tue, 03 Jul 2012 16:03:42 GMT

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

У нас будет основной контейнер -

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

Code

Заголовок

Текст

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( '

' ).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    = $( '

' );

          if( this.slidesCount > 1 ) {
              this.$arrowPrev = $( '' ).appendTo( this.$arrows );
              this.$arrowNext = $( '' ).appendTo( this.$arrows );
          }
          this.$el.append( this.$arrows )
      }

      // добавляем навигационные точки
      if( this.options.dots ) {

          this.$dots      = $( '

' );

          for( var i = this.slidesCount + 1; --i; ) {
              this.$dots.append( ( i === this.slidesCount ) ? '' : '' );
          }

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

Multi Media Bar

Nikola — Mon, 02 Jul 2012 19:15:05 GMT

Всем здрасти. Меня попросили адаптировать один интересный скрипт. Чем я и занялся. Теперь расскажу как же его нам установить и как он работает. Искренне надеюсь, что выполняю непустую работу. Поехали.

1. Для начала качаем архив и заливаем в корень сайта.

2. CSS
Между head и /head вставляем:

Code

3. JS
Подключаем скрипты. Библиотеку fancybox, cycle и superfish. Для этого в самом конце страницы, перед /body вставляем:

Code

Внимание! В uCoz теперь стандартно подключается jQuery (чем лично я сильно недоволен, т.к. версий библиотек предусмотрено всего две 1.3.2 и 1.6.1). Нам же нужна версия выше 1.4.4. Можете, конечно поставить в настройках подключение версии 1.6.1, но с некоторыми моими скриптами на этом сайте она конфликтует. Так что попробуйте, если конфликтов не будет, изменяйте в настройках библиотеку на 1.6.1.
4. HTML
Код оболочки:

Code

Multi Media Bar

    Previous
    Next

СУДА КОДЫ ЯЧЕЕК, те что ниже

Код 1 ячейки. Создавать Вы их можете сколько угодно. И так это для ичейки с изображением:

Code

Текст к изображению

А это для ячейки с видео:

Code

Текст к изображению

Размеры задаются в css, каждому замыкающему элементу нужно указывать класс не просто "thumb", а "Thumb last" и замыкать блок дополнительным div`ом, а перед следующей партией ставить:

Code

Slideshow_v5

Nikola — Tue, 29 May 2012 07:29:34 GMT

Всем доброе время суток и так к вашему внеманиюсегодня предоставляю - Slide Show for Yukoz
Даная версия является в формате HTML
Сам Slideshow_v5 является простым в установке, и использовании на вашем сайте.
И так давайте приступим к установке дной модификации!
Для начала скачиваем сам архив, после создаем папку Slideshow_v5 и туда залеваем все что находится в папке.
После чего идем на сайт и в каком вам нужно месте ставим между и ставим следущее:

Code

Теперь между тегами и ставим следущее:

Code

Первая панель

    Slide Show for Yukoz - Весь текст меняем на свой

    Slide Show for Yukoz......
Всем доброго врямени суток, и так к вашему внеманию предоставляется новая версия - Slideshow v5. Уважаемые пользователи если у вас есть какие либо идеи по созданию чего либо предлогайте - и мы свами попробуем их зделать вместе.
Спасибо за ваше внемание с уважением - Zlatev Dima

Вторая панель

    Slide Show for Yukoz - Весь текст меняем на свой

Третья панель

    Slide Show for Yukoz - Весь текст меняем на свой

Ну вот собствено и все.

FlashPlayer

Nikola — Sat, 19 May 2012 10:35:58 GMT

Установка:

0.Залить main_page_lister.swf в корень сайта.
1.Залить папки на сайт "js" и "upload"
2.Поменять ссылки и изображения на свои в файле "main_page_lister.xml"
3.Вставить код там,где хотите видеть плеер.

Code

Удачи!

Радио Рекорд/Radio Record

Nikola — Fri, 18 May 2012 17:39:00 GMT

Вставить в удобное для вас место (лучше в новую страницу):

Code

Content on this page requires a newer version of Adobe Flash Player.

Слайдер DarkSlider v 0.2

Nikola — Fri, 18 May 2012 17:31:59 GMT

Установка:
Это между и :

Code

Это в body:

Code

Загаловок

Текст

Загаловок

Текст

Загаловок

Текст

Lof JSliderNews 2.0 - плагин слайдшоу

Nikola — Mon, 14 May 2012 15:09:52 GMT

DEMO

Плагин слайдшоу базирующийся на jQuery и плагине easing. Добавлена возможность прокрутки слайдов с помощью колесика мышки. На демо страницах представлены различные варианты использования навигации по слайдам.
Разметка HTML

Приведен пример из Демо 1

Code

/ Новость 1 / — Четверг, Май 3, 2012 19:00


Новость 1


Один из лучших телефонов современности, хотите узнать больше...
                     Подробнее

/ Новость 2 /      — Четверг, Май 3, 2012 19:00


Новость 2


Отличнейший телефон с кучей нужных и не нужных функций...
                     Подробнее

/ Новость 3 /      — Четверг, Май 3, 2012 19:00


Новость 3


Просто возьмите мобильный в руки и вы не захотите его отдавать...
                     Подробнее

/ Новость 4 /     — Четверг, Май 3, 2012 19:00


Новость 4


Отличный девайс для интересного времяпрепровождения вне дома...
                     Подробнее

/ Новость 5 /     — Четверг, Май 3, 2012 19:00


Новость 5


Видели рекламу этого ноутбука по ТВ? Тогда обязательно посмотрите...
                     Подробнее

/ Новость 6 /     — Четверг, Май 3, 2012 19:00


Новость 6


"Моя прелесть!" Иначе и не скажешь. Копите деньги друзья...
                     Подробнее

/ Новость 7 /     — Четверг, Май 3, 2012 19:00


Новость 7


Отличный ноутбук, но можно найти такой же и без перламутровых пуговиц...
                     Подробнее

/ Новость 8 /     — Четверг, Май 3, 2012 19:00


Новость 8


Ах планшет, планшет. А нужен ли ты вообще ?...
                      Подробнее

Вперед

CSS

Опять же стили из Демо 1, в качестве примера:

Code

/* slider layout */
.lof-slidecontent { position:relative;    overflow:hidden;    border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{    height:100%;    width:100%;    position:absolute;    top:0;    left:0;    z-index:100000;    text-align:center;    background:#FFF}
.lof-slidecontent .preload div{    height:100%;    width:100%;    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}

.lof-slidecontent  .sliders-wrapper{    position:relative;    height:100%;    width:900px;    z-index:3px;    overflow:hidden; }
.lof-slidecontent  ul.sliders-wrap-inner{overflow:hidden;    background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;    padding:0px;    margin:0;    position:absolute;    overflow:hidden;}
.lof-slidecontent  ul.sliders-wrap-inner li{overflow:hidden;    padding:0px;margin:0px;    float:left;    position:relative;}
.lof-slidecontent  .lof-opacity  li{position:absolute;    top:0;    left:0;    float:inherit; }

.lof-slidecontent  .navigator-content {position:absolute; bottom:10px; right:10px;
       background:url(../images/transparent_bg.png) repeat;
       padding:5px 0px;
}
.lof-slidecontent  .navigator-wrapper{    position:relative;    z-index:10;
       height:180px;
       width:310px;
       overflow:hidden;
       color:#FFF;
       float:left
}
.lof-slidecontent  ul.navigator-wrap-inner{    top:0;    padding:0;    margin:0;    position:absolute;    width:100%; }
.lof-slidecontent  ul.navigator-wrap-inner li{ cursor:hand;     cursor:pointer;    list-style:none;    padding:0;    margin-left:0px;    overflow:hidden;    float:left;    display:block;    text-align:center;}

/*******************************************************/

ul.sliders-wrap-inner li img{    padding:0px;    }

.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
       z-index:100px;
       position:absolute;
       bottom:50px;
       left:0px;
       width:350px;
       background:url(../images/bg_trans.png);
       height:100px;
       padding:10px;
       color:#FFF;
}
.lof-slidecontent .slider-description h4 {    font-size: 14px;    margin: 10px 0;    padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{
       margin:0;
       background:#C01F25;
       font-size:75%;
       padding:2px 3px;
       font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
       text-transform:uppercase;
       text-decoration:none
}
.lof-slidecontent  .item-meta a:hover{    text-decoration:underline;}
.lof-slidecontent  .item-meta i {    font-size:70%; }

/* item navigator */

.lof-slidecontent ul.navigator-wrap-inner li img{
       border:#666 solid 3px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
       border:#A8A8A8 solid 3px;
       -moz-transition:border-color  ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next,
.lof-slidecontent .navigator-content .button-previous{
       display:block;
       width:22px;
       height:30px;
       color:#FFF;
       cursor:pointer;

}
.lof-slidecontent .navigator-content .button-next {
       float:left;
       text-indent:-999px;
       margin-right:5px;
       background:url(../images/arrow-l.png) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
       float:left;
       text-indent:-999px;
       margin-left:5px;
       background:url(../images/arrow-r.png) no-repeat left center;
}

.lof-slidecontent .button-control {
      position:absolute;
      top:10px;
      right:10px;
       height: 20px;
       width: 20px;
       cursor:hand; cursor:pointer;
       background:url(../images/transparent_bg.png) repeat;
}

.lof-slidecontent .button-control span { display:block;  width:100%; height:100%;}
.lof-slidecontent .action-start span  {
       background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
       background:url(../images/pause.png) no-repeat center center;
}

javascript

Подключаем jQuery, плагин easing и плагин Lof JSliderNews:

Code

Далее нужно инициализировать плагин (например, для Демо 1):

Опции
По умолчанию настройки у плагина стоят такие:

Quote

direction : '',
mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click'/* click|mouseenter */,
wapperSelector: '.sliders-wrap-inner',
interval : 5000,
auto : false, // авто проигрывание слайдшоу
maxItemDisplay : 3,
startItem : 0,
navPosition : 'vertical',/* значения: horizontal|vertical*/
navigatorHeight : 100,
navigatorWidth : 310,
duration : 600,
navItemsSelector : '.navigator-wrap-inner li',
navOuterSelector : '.navigator-wrapper' ,
isPreloaded : true,
easing : 'easeInOutQuad', /* смотрите эффекты easing плагина */
onPlaySlider:function(obj, slider){},
onComplete:function(slider, index){ }

Пример использования onComplete:function(slider, index){ } смотрите в Демо 6 - в исходнике

Rhinoslider - плагин слайдшоу

Nikola — Sat, 12 May 2012 16:50:16 GMT

Rhinoslider - довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру. На официальной странице плагина имеется удобный генератор эффектов - генератор - определившись с выбором можно сразу скачать сгенерированный рабочий пример.
Разметка HTML

Простейший html код:

Code

CSS

Подключаем стили плагина:

Code

Содержимое такое:

Code

.rhino-btn {
      background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
      z-index:10;
      width:56px;
      height:53px;
      display:block;
      text-indent:-999%;
      -webkit-user-select:none;
      -moz-user-select:none;
      user-select:none;
}

.rhino-prev, .rhino-next { bottom:-4px; }

.rhino-prev {
      left:-6px;
      background-position:-168px 0;
}

.rhino-next {
      right:-6px;
      background-position:-106px 0;
}

.rhino-prev:hover { background-position:-168px -53px; }

.rhino-next:hover { background-position:-106px -53px; }

.rhino-toggle {
      top:-4px;
      left:-6px;
}

.rhino-play { background-position:0 0; }

.rhino-play:hover { background-position:0 -53px; }

.rhino-pause { background-position:-56px 0; }

.rhino-pause:hover { background-position:-56px -53px; }

.rhino-container { position:relative; }

.rhino-caption {
      position:absolute;
      background: #000;
      display:none;
      left:0;
      right:0;
      top:0;
      color:#fff;
      padding:10px;
      text-align:right;
      -webkit-user-select:none;
      -moz-user-select:none;
      user-select:none;
}

.rhino-bullets {
      position: absolute;
      bottom: -3px;
      left: 50%;
      margin:0 0 0 -50px;
      z-index: 10;
      background: #fff;
      padding:0;
}

.rhino-bullets:before, .rhino-bullets:after {
      position:absolute;
      display:block;
      left:-16px;
      content:' ';
      width:16px;
      height:26px;
      background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
}

.rhino-bullets:after {
      left:auto;
      right:-16px;
      background-position: -240px 0;
}

.rhino-bullets li {
      float:left;
      display:inline;
      margin:0 2px;
}

.rhino-bullets li a.rhino-bullet {
      display: block;
      width: 16px;
      height: 15px;
      cursor: pointer;
      background: white;
      font-size: 10px;
      text-align: center;
      padding: 6px 0 5px 0;
      color: #333;
      text-decoration:none;
      -webkit-user-select:none;
      -moz-user-select:none;
      user-select:none;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
      color:#999;
      background:#eee;
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
      color:#fff;
      background:#5cd4e8;
}

javascript

Основное требование, это подключение jQuery и самого плагина, но дополнительно можно подключить и mousewheel и easing:

Code

И конечно инициализировать плагин с выбранными дополнительными опциями:
              $(document).ready(function() {
                  $('#slider').rhinoslider({
                      effect: 'explode'
                  });
              });

Рекомендуется использовать генератор для созднаия собственного слайдшоу.

Аудио слайдшоу с jPlayer

Nikola — Sat, 12 May 2012 16:28:34 GMT

Слайдшоу на jQuery с музыкальным сопровождением с помощью кросс платформенной аудио/видео библиотеки jPlayer. Смена слайдов происходит в указанные промежутки музыкальной композиции.
Разметка HTML

У нас есть контейнер audio-slideshow с двумя дополнительными атрибутами:
data-audio - путь до аудио файла
data-audio-duration - продолжительность аудио файла в секундах, требуется для расстановки маркеров на временной шкале до загрузки аудио файла.

Code

                             Плей
                             Пауза

Внутри контейнера audio-slideshow располагается DIV с классом audio-slides, который может содержать любой html, в нашем случае это изображения.
Изображениям назначены два html5 атрибута:
data-thumbnail - путь до изображения миниатюры показываемого при наведении курсора на маркер временной шкалы
data-slide-time - время в секундах, при достижении которого, происходит смена слайдов
Другие теги представляют собой элементы плеера: кнопки паузы и воспроизведения, временная шкала и т.д.
CSS

Code

.audio-slideshow {
     width: 640px;
     height: 530px;
     position: relative;
     margin: 0 auto;
}

.audio-slideshow .audio-slides {
     position: relative;
}

.audio-slideshow .audio-slides img {
     display: block;
     position: absolute;
     top: 0; left: 0;
}

.audio-slideshow .audio-control-interface {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 48px;
}

.audio-slideshow .play-pause-container, .audio-slideshow .time-container {
     position: absolute;
     bottom: 25px;
     height: 18px;
     font-weight: bold;
     color: #777;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

.audio-slideshow .play-pause-container a {
     outline: none;
     text-indent: -99999px;
     width: 16px;
     height: 16px;
     position: absolute;
}
.audio-slideshow .play-pause-container a.audio-play {
     background: transparent url(../images/play.png) no-repeat center center;
}

.audio-slideshow .play-pause-container a.audio-pause {
     background: transparent url(../images/pause.png) no-repeat center center;
}

.audio-slideshow .audio-control-interface .time-container {
     right: 3px;
}

.audio-slideshow .timeline {
     position: absolute;
     width: 100%;
     background-color: #fff;
     height: 20px;
     bottom: 0;
     left: 0;
     box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.audio-slideshow .timeline .playhead {
     position: absolute;
     height: 20px;
     background: #333;
     width: 0;
}

.marker {
     width: 10px;
     height: 10px;
     border-radius: 5px;
     box-shadow: 1px 1px 1px rgba(0,0,0,0.4) inset;
     position: absolute;
     background: #B8BAC6;
     top: 5px;
}

.marker span {
     padding: 5px;
     position: absolute;
     bottom: 20px;
     opacity: 0;
     left: -50px;
     z-index: -1;
     box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
     background: #f5f6f6;
     background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
     background: -webkit-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
     background: -o-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
     background: -ms-linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
     background: linear-gradient(top, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 );
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.marker span img {
     display: block;
}

.marker:hover span {
     opacity: 1;
     z-index: 100;
}

Как видно из CSS то все оформление можно настроить. Временную шкалу, например, можно сделать меньше или больше и расположить поверх слайдов.
javascript

Подключаем jQuery библиотеку:
[cpde][/code]
Подключаем библиотеку jPlayer:

Code

Наш плагин слайдшоу:

Code

И конечно же не забываем про инициализацию, с указанием необходимых дополнительных настроек:

Code

Webik Diz

Slider v5.0

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

Заголовок

Multi Media Bar

Multi Media Bar

Slideshow_v5

Первая панель

Вторая панель

Третья панель

FlashPlayer

Радио Рекорд/Radio Record

Content on this page requires a newer version of Adobe Flash Player.

Слайдер DarkSlider v 0.2

Загаловок

Загаловок

Загаловок

Lof JSliderNews 2.0 - плагин слайдшоу

Новость 1

Новость 2

Новость 3

Новость 4

Новость 5

Новость 6

Новость 7

Новость 8

Rhinoslider - плагин слайдшоу

Аудио слайдшоу с jPlayer