22 Июл THREESIXTY SLIDER — 3D Слайдер 360 градусов — Установка на WordPress
Это плагин jQuery для создания слайдера изображений на 360 градусов!
Многофункциональный и полностью настраиваемый плагин, он может показывать изображения под любым углом. Такие решения часто применяются в интернет магазинах, позволяя рассмотреть товар со всех сторон.
Установка на WordPress:
1. Вносим HTML разметку на страницу или пост, учитывайте, что при переключении рабочей среды (html-текст -> Визуальный редактор) код частично форматируется:
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 вашей темы, где-нибудь в конце:
7. Подключаем скрипт threesixty.js в файле functions.php вашей темы, где-нибудь в конце:
8. Инициируем скрипт в любом вашем рабочем файле скриптов custom.js или common.js или какой там у вас есть, с помощью этого кода (в нём тоже требуется подправить пути к вашим изображениям):
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, если хотите отключить мышь и тач события на слайдере
Нет комментариев