—»     —»   HTML5: Threesixty.js генерирует обзоры на 360 градусов из изображений
  Раздел: Библиотеки скриптов   Комментариев: 4  

HTML5: Threesixty.js генерирует обзоры на 360 градусов из изображений



Панорамные обзоры, которые могут быть знакомы вам, прежде всего, при помощи самых популярных автомобильных брендов, это примерно то, что вы можете ждать от этого нового jQuery-плагина под названием Threesixty.js. Он позволяет добиться такого эффекта при помощи HTML5-атрибута data, и дает вам возможность в считанные минуты представить контент в очень привлекательной манере.

HTML5: Threesixty.js генерирует обзоры на 360 градусов из изображений

Threesixty.js: атрибуты data и галерея изображений

Threesixty.js не потребует от вас много. jQuery и путь до галереи ваших изображений, к которой нужно применить обзор на 360 градусов. Следующий пример собирает 61 изображение, и отображает их в процессе вращения. Изображения названы с учетом следующего формата: номеризображения.расширение, и в нашем примере, как видно, и используется gem0.jpg, gem1.jpg,…, gem61.jpg. Изображение под номером 0 отвечает за начало показа.

<div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>

Div-элемент указывается внутри HTML в том месте, где вы хотите отобразить трехмерный объект. При помощи HTML5-атрибута data – в данном случае data-path и data-count – вносятся в функцию для предназначенной презентации в исходном HTML-коде.

Следующий javascript-код был использован для реализации объекта:

$(document).ready(function(){
$('.threesixty').threeSixty({
dragDirection: 'horizontal'
});
});

Запуск функции может быть расширен при помощи параметров. В нашем примере мы использовали только dragDirection. Этот параметр отвечает за ось, по которой будет производиться вращение. По умолчанию, вращение начинается по горизонтали, но вы также можете реализовать и вертикальное вращение. Просто измените значение на vertical. Пока что невозможно осуществлять вращение по обеим осям одновременно.

Направление движения регулируется при помощи кнопок вперед и назад:

$('.threesixty').nextFrame();

и

$('.threesixty').prevFrame();

Параметры draggable и useKeys позволят вам добавить возможность перетаскивать объект, просто удерживая левую кнопку мыши, и возможность использовать кнопки для вращения объекта в соответствующие стороны. Сначала здесь была предусмотрена и поддержки вращения посредством колесика мыши, но затем разработчик Nick Jonas исключил ее.

Threesixty.js – довольно молодой проект, и последней версией на данный момент является версия 0.1.2. Ее можно скачать с GitHub и использовать бесплатно. Не забудьте использовать какую-нибудь функцию предварительной загрузки, так как неизвестно, сколько времени потребуется для загрузки 61 изображения. Даже такой простой пример требует времени на загрузки.

Ссылки

* Демо-сайт | Threesixty.js
* Репозиторий GitHub | Threesixty.js
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 9227   |   Оставлено комментариев: 4
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 марта 2013 @ 04:30
Написал: alex0603 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ссылочка на гитхаб битая. говорит 404
Комментарий #2: 29 марта 2013 @ 12:39
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alex0603, значит умер раздел. Что поделать ...
Комментарий #3: 30 марта 2013 @ 01:10
Написал: alex0603 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Нет он не умер. Вот верный линк на сабж
https://github.com/modernassembly/threesixtyjs
Комментарий #4: 30 марта 2013 @ 21:20
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
alex0603, спасибо, линк в статье обновлен.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31