Возможно вы замечали в разных интерне-магазинах как при наведении на изображение, товар начинал крутиться с разных ракурсов. Так вот, об этом у нас и будет идти речь в данной статье. Я расскажу про интересный плагин под названием Turntable.js благодаря которому мы и сделаем подобное. С данным плагином я столкнулся недавно на одном из репозиторий GitHub - PolarNotion и решил поделиться в своем блоге.
Прежде всего немного описания плагина от автора (спасибо гугл транслейту):
Turntable.js является отзывчивым слайдер JQuery, который позволит вам вращать через список изображений, как ваши мышь (или палец) зачисток через контейнер. Думайте об этом как FlipBook сделанный с Javascript, а не бумаги. Все, что вам нужно, это набор изображений и JQuery. Это свежая альтернатива типичным защелкиванием к слайду 'JQuery галереи.
Думаю о чем хотел сказать автор, гугл нам перевел все очень понятно и доходчиво.
А теперь, если вы все поняли, давайте в качестве примера возьмем любое видео с ютуба и сделаем из него мини обзор с помощью этой библиотеки. Я провел долбанных 40 минут в поиске видео, где есть просмотр товара в обзоре 360. Хотел для теста взять iPhone, но ничего кроме этого чёртового TomTom не нашёл.
Не знаю как вы будете разделять видео по кадрам, тут уже ваши проблемы (гугл в помощь).
В общем я использовал свой стандартный плеер и вручную разделил видео на несколько кадров, итого вышло 27 кадров. Мне не хотелось скачивать программу для выполнения этой несложной задачи.
[info] Хочу отметить, что у меня данный плагин работает как-то странно. Если навести на середину изображения, то начинает с задней части устройства, то есть с 15 кадра. Возможно так было задумано автором данного плагина, но хотелось, чтобы прокрутка начиналась с середины
И так, прежде всего я вам советую добавить ваши кадры в отдельную папку. У меня она называется images.
_32<div id="myTurntable" class="turntable">_32 <ul>_32 <li data-img-src="images/image1.png"></li>_32 <li data-img-src="images/image2.png"></li>_32 <li data-img-src="images/image3.png"></li>_32 <li data-img-src="images/image4.png"></li>_32 <li data-img-src="images/image5.png"></li>_32 <li data-img-src="images/image6.png"></li>_32 <li data-img-src="images/image7.png"></li>_32 <li data-img-src="images/image8.png"></li>_32 <li data-img-src="images/image9.png"></li>_32 <li data-img-src="images/image10.png"></li>_32 <li data-img-src="images/image11.png"></li>_32 <li data-img-src="images/image12.png"></li>_32 <li data-img-src="images/image13.png"></li>_32 <li data-img-src="images/image14.png"></li>_32 <li data-img-src="images/image15.png"></li>_32 <li data-img-src="images/image16.png"></li>_32 <li data-img-src="images/image17.png"></li>_32 <li data-img-src="images/image18.png"></li>_32 <li data-img-src="images/image19.png"></li>_32 <li data-img-src="images/image20.png"></li>_32 <li data-img-src="images/image21.png"></li>_32 <li data-img-src="images/image22.png"></li>_32 <li data-img-src="images/image23.png"></li>_32 <li data-img-src="images/image24.png"></li>_32 <li data-img-src="images/image25.png"></li>_32 <li data-img-src="images/image26.png"></li>_32 <li data-img-src="images/image27.png"></li>_32 <li data-img-src="images/image1.png"></li>_32 </ul>_32</div>
Спросите, почему в конце image1.png? Я ожидал, что пройдя до самого конца, плагин перейдет к первому изображению автоматом. Но увы, оказалось не так. Последнее изображение в нашем случае, является фронтальной стороной устройства.
Перед <body> подключим наши .js и после полной прогрузки страницы, выполним скрипт на блок #myTurntable.
_10<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>_10<script src="js/turntable.js"></script>_10<script>_10 $(document).ready(function(){_10 $('#myTurntable').turntable();_10 });_10</script>
Напомню, что данный плагин не будет работать без jQuery. Так же, не забудьте скачать плагин с официальной страницы Turntable.js.
Весь код страницы я выложил ниже, так же прикрепил архив с рабочей демонстрацией.
Ссылка на скачивание архива с демо jQuery Turntable.js Demo и со всеми кадрами.