Вращение изображения на 360 градусов
Давайте рассмотрим как можно создать красивый вращающийся слайдер вашего продукта с помощью простого jQuery плагина 360slider. Он настраивается с помощью ряда опций и позволяет показать картинку под любым углом в развертке 360 градусов. Такой въювер будет отлично смотреться в различных магазинах, так как посетитель сможет увидеть товар с любого ракурса.
Особенности
- Плавная анимация
- Выбор опций и параметров
- Взаимодействие с API
- Простое взаимодействие с мышью
- Настройка поведения
- Поддержка устройств с тачем
- Простое подключение
- Никакой Flash анимации
- Интеграция с плагинами
Плагины
- Модуль для Drupal написан Rashid Abdullah
Пример
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
window.onload = init; var product; function init(){ product1 = $('.product1').ThreeSixty({ totalFrames: 72, // Общее число кадров endFrame: 72, // конечный кадр currentFrame: 1, // с какого кадра стартовать imgList: '.threesixty_images', // селектор изображений progress: '.spinner', // селектор элемента процесса загрузки imagePath:'assets/product1/', // путь к папке с изображениями filePrefix: 'ipod-', // префикс файлов ext: '.jpg', // формат изображения height: 265, width: 400, navigation: true, disableSpin: true }); } |
HTML снипет
|
1 2 3 4 5 6 |
<div class="threesixty product1"> <div class="spinner"> <span>0%</span> </div> <ol class="threesixty_images"></ol> </div> |
Таким образом мы запустили слайдер для product1. Конструктор классов нуждается в конфигурации таких параметров как totalFrame, endFrame и currentFrame
Документация
Функции
Функции для контроля анимации слайдера.
| Функция | Описание |
|---|---|
| .play() | Запуск авто прокрутки слайдера |
| .stop() | Остановка слайдера |
| .next() | Прокрутка к следующему кадру |
| .previous() | Возврат к предыдущему кадру |
| .gotoAndPlay() | Переход к определенному кадру |
Конфигурация
Список настроек которые мы можете свободно менять, дабы придать своему слайдеру нужный вид.
| Настройка | Стандартное значение | Тип | Описание |
|---|---|---|---|
| totalFrames | 180 | Number | Задает общее количество кадров |
| currentFrame | 1 | Number | С какого кадра следует начинать анимацию |
| endFrame | 180 | Number | На каком кадре заканчивается анимация |
| framerate | 60 | Number | Частота кадров в секунду |
| filePrefix | » | String | Префикс для файлов изображений (для nike_boot_1.png filePrefix будет nike_boot_) |
| ext | png | String | Расширение файла |
| height | 300 | Number | Задает высоту контейнера слайдера |
| width | 300 | Number | Задает ширину контейнера слайдера |
| style | {} | Object | Стили jQuery.css({}) |
| navigation | true | Boolean | если вы не хотите показывать элементы управления, поставьте — false |
| autoplayDirection | 1 | Number | Установка направления прокрутки 1 or -1 |
| drag | true | Boolean | false — если вы хотите отключит прокрутку с помощью мыши или тача |
| disableSpin | false | Boolean | Отключение анимации загрузки |
| zeroPadding | false | Boolean | true добавит нулевой отступ для имен файлов 1 — 9 |
| responsive | false | Boolean | включение адаптивности для слайдера |
| onReady | function() {} | Function | Триггер оповещения о загрузке всех картинок |
| playSpeed | 100 | Number | Контроль скорости вращения (в мс) при нажатии Play |
Этот плагин поддерживается абсолютно всеми браузерами, включая «всеми любимый» IE6
Источник: https://github.com/creativeaura/threesixty-slider
