Контакты
  • evgenylebedevv@gmail.com
  • +7 960 255 15 53
  • L.E.V.rus

THREESIXTY SLIDER — 3D Слайдер 360 градусов — Установка на WordPress

Это плагин jQuery для создания слайдера изображений на 360 градусов!

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

0%

    Установка на WordPress:

    1. Вносим HTML разметку на страницу или пост, учитывайте, что при переключении рабочей среды (html-текст -> Визуальный редактор) код частично форматируется:

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

    2. Копируем папки с изображениями в ваша_тема/assets/images/

    3. Закидываем таблицу стилей threesixty.css к себе в папку ваша_тема/CSS

    4. Так же поступаем и со скриптом threesixty.js, его в папку ваша_тема/JS

    5. Проверяем пути в загруженных файлах стилей и скриптов до ваших изображений и изменяем, у каждого они свои, я например указал прямой путь:

    (было «/../../assets/sprites.png«, стало «http://evgenylebedev.ru/wp-content/themes/bridge/assets/images/sprites.png«)

    6. Подключаем таблицы CSS в файле functions.php вашей темы, где-нибудь в конце:

     // Register Style CAR
    function car() {
    	wp_register_style( 'car-style', get_template_directory_uri() . '/css/threesixty.css', false, false );
    	wp_enqueue_style( 'car-style' );
    }
    add_action( 'wp_enqueue_scripts', 'car' );
      // Register Style CAR

    7. Подключаем скрипт threesixty.js в файле functions.php вашей темы, где-нибудь в конце:

     // Register Script CAR
    function threesixty_js_fnc()  
    {    
        wp_register_script( 'threesixty_js', get_template_directory_uri() . '/js/threesixty.js', false, true );  
        wp_enqueue_script( 'threesixty_js' );  
    }  
    add_action( 'wp_enqueue_scripts', 'threesixty_js_fnc' );
     // Register Script CAR

    8. Инициируем скрипт в любом вашем рабочем файле скриптов custom.js или common.js  или какой там у вас есть, с помощью этого кода (в нём тоже требуется подправить пути к вашим изображениям):

    jQuery(document).ready(function($){
    
    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:'http://evgenylebedev.ru/wp-content/themes/bridge/assets/images/', // path of the image assets
    			  filePrefix: '', // file prefix if any
    			  ext: '.png', // extention for the assets
    			  height: 447,
    			  width: 1000,
    			  navigation: true
    		  });
    		}
    }); 

    9. Enjoy!

     

    Дополнительно:

    Методы

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

    .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, если хотите отключить мышь и тач события на слайдере

     

    Поделись, если оказалось полезно :)
    Нет Комментариев

    Написать комментарий