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

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

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

Установка на 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“, стало “https://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:'https://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, если хотите отключить мышь и тач события на слайдере