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