Если перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQuery. Threesixty - достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.
Демонстрации приведен один пример реализации эффекта, в исходниках можно найти еще несколько интересных эффектов с элементами управления. И так, давайте приступим.
Шаг 1. HTML
Нам необходимо создать классы, которые будут отвечать за вызов необходимой нам информации, кроме этого мы добавим спаны в которых будет заключены обозначения о загрузке всех изображений. Картинки будут загружаться все одновременно, так как их достаточно много, это может занять некоторое время:
<div class="threesixty car">
<div class="spinner">
<span>0%</span>
</div>
<ol class="threesixty_images"></ol>
</div>
С разметкой мы разобрались, давайте перейдем к следующему шагу.
Шаг 2. CSS
Так как основную работу будет выполнять плагин, нам стили необходимы только для оформления контейнера и его базовых параметров:
#container .threesixty {
position: relative;
overflow: hidden;
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;
}
Шаг 3. JS
Для правильной работы эффекта нам необходимо подключить и инициализировать плагин threesixty.js, кроме этого мы укажем дополнительные параметры при инициализации:
<script type="text/javascript" src='src/threesixty.js'></script>
<script>
window.onload = init;
var car;
function init(){
car = $('.car').ThreeSixty({
totalFrames: 52, // Общее число кадров используемых в слайдере
endFrame: 52, // Указываем последний кадр для автоостановки
currentFrame: 1, // Устанавливаем стартовый кадр при инициализации
imgList: '.threesixty_images', // Выбираем список изображений
progress: '.spinner', // Селектор для отображения процесса загрузки
imagePath:'assets/product4/', // Путь к необходимым изображениям
filePrefix: '', // Префиксы
ext: '.png', // Формат изображений
height: 447,
width: 1000,
navigation: true
});
}
</script>Плагин достаточно гибкий, как мы уже говорили раннее, по этому он имеет набор весьма интересных настроек:
totalFrames:180, - число - общее количество кадров используемых при повороте на 360 градусов
currentFrame:1, - число - устанавливаем стартовый кадр при инициализации
endFrame:180, - число - указываем последний кадр для автоостановки
framerate:60, - число - число кадров для анимации
filePrefix:'', - строка - указываем префикс для файлов.
ext:png, - строка - расширение для всех файлов используемых в слайдере
height:300, - число - высота для контейнера со слайдером
width:300, - число - ширина для контейнера со слайдером
style:{}, - объект - контейнер со стилями для предзагрузки
navigation:true, - логическая переменная - установите false, чтобы не показывалась навигация по умолчанию
autoplayDirection:1, - число - направление вращения, может быть 1 или -1
dragging:true, - логическая переменная - укажите false, если хотите отключить мышь на слайдере
Вот и все. Готово!
Материал взят из зарубежного источника - creativeaura.github.io/threesixty-slider и представлен исключительно в ознакомительных целях.
