Вращаем изображение на 360 градусов. Плагин от 360slider.com

0%

    Принцип работы плагина, последовательная смена статических изображений при наведении курсора и вращении картинки с зажатой кнопкой мыши.
    Для этого  нам понадобится 72 слайда(картинки) какого либо объекта под разным углом обзора. 

    Рассмотрим скрипт:

    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:

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