Three sixty - поворот изображения на 360°

jQuery плагин поворота изображения на все 360 градусов. Полностью настраиваемый плагин, позволяющий показывать изображения под любым углом. Подобные эффекты сейчас используются в интернет магазинах, позволяя рассмотреть товар со всех сторон. Плагин работает во всех браузерах, включая наш любимый IE6.

HTML

<div class="threesixty car">
    <div class="spinner">
        <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
</div>

CSS

Стили плагина:

#container .threesixty {
  position: relative;
  overflow: hidden;
  border: solid 1px #999;
  margin: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#container .threesixty .spinner {
  width: 60px;
  display: block;
  margin: 0 auto;
  height: 30px;
  background: #333;
  background: rgba(0, 0, 0, 0.7);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#container .threesixty .spinner span {
  font-family: Arial, "MS Trebuchet", sans-serif;
  font-size: 12px;
  font-weight: bolder;
  color: #FFF;
  text-align: center;
  line-height: 30px;
  display: block;
}
#container .threesixty .threesixty_images {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
#container .threesixty .threesixty_images img {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}
#container .threesixty .threesixty_images img.current-image {
  visibility: visible;
  width: 100%;
}
#container .threesixty .threesixty_images img.previous-image {
  visibility: hidden;
  width: 0;
}
#container .threesixty .nav_bar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 11;
}
#container .threesixty .nav_bar a {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  background: url(../../assets/images/sprites.png) no-repeat;
  text-indent: -99999px;
}
#container .threesixty .nav_bar a.nav_bar_previous {
  background-position: 0 -73px;
}
#container .threesixty .nav_bar a.nav_bar_next {
  background-position: 0 -104px;
}
#container .threesixty .nav_bar a.nav_bar_play {
  background-position: 0 0;
}
#container .threesixty .nav_bar a.nav_bar_stop {
  background-position: 0 -37px;
}

JS

Для работы плагина необходимо подключить jQuery библиотеку, сам плагин threesixty.js и указать параметры инициализации нашего слайдера:

<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='src/threesixty.js'></script>
<script>
    window.onload = init;
 
    var car;
    function init(){
 
      car = $('.car').ThreeSixty({
          totalFrames: 52, // Total no. of image you have for 360 slider
          endFrame: 52, // end frame for the auto spin animation
          currentFrame: 1, // This the start frame for auto spin
          imgList: '.threesixty_images', // selector for image list
          progress: '.spinner', // selector to show the loading progress
          imagePath:'assets/product4/', // path of the image assets
          filePrefix: '', // file prefix if any
          ext: '.png', // extention for the assets
          height: 447,
          width: 1000,
          navigation: true
      });
    }
</script>

Методы

Позволяют управлять слайдером после его инициализации:

• .play() - функция для вызова автоматического вращения слайдера
• .stop() - функция остановки автоматического вращения
• .next() - функция перехода к следующему кадру слайдера
• .previous() - функция перехода к предыдущему кадру слайдера
• .gotoAndPlay() - используйте эту функцию для перехода к конкретному кадру слайдера

Настройки

• totalFrames:180, - число - общее количество кадров используемых при повороте на 360 градусов
• currentFrame:1, - число - устанавливаем стартовый кадр при инициализации
• endFrame:180, - число - указываем последний кадр для автоостановки
• framerate:60, - число - число кадров для анимации
• filePrefix:'', - строка - указываем префикс для файлов, например если файлы у вас имеют название: nike_boot_1.png то префикс будет: nike_boot_
• ext:png, - строка - расширение для всех файлов используемых в слайдере
• height:300, - число - высота для контейнера со слайдером
• width:300, - число - ширина для контейнера со слайдером
• style:{}, - объект - контейнер со стилями для прелоадера, что-то похожее на jQuery.css({})
• navigation:true, - логическая переменная - установите false, чтобы не показывалась навигация по умолчанию
• autoplayDirection:1, - число - направление вращения, может быть 1 или -1
• dragging:true, - логическая переменная - укажите false, если хотите отключить мышь и тач события на слайдере