Макет
Примерно так это будет выглядеть (30 картинок):
Или вот так, более плавно, но это будет гораздо дольше загружаться (125 картинок):
Но по задумке — нашему java скрипту должно быть пофиг количество картинок. Хоть мильон.
Принцип работы
Один оборот модели прибл. 3 сек / 36 снимков. Стало быть, каждая модель имеет исходно примерно 30-36 фотографий hires 2160*3840 pix (первая картинка здесь а последняя 30-я тут) + уменьшенные копии в размере 562*1000 пикс для предварительного просмотра (первая здесь, а последняя 30-я тут).
Файлы имеют название name_XXX.jpg где XXX — порядковый номер, начиная с 001 для макс. разрешения + уменьшенные версии вида name-scaled_XXX.jpg.
Файлы загружаются на сервер в любую удобную папку, берётся URL первой картинки в макс. разрешении name_001.jpg и подцепляется java-скриптом.
Что требуется
- Сначала посетителю сайта загружаются картинки 1000 пикс по высоте, надпись поверх экрана «перетащите, чтобы повернуть»
- В фоновом режиме загружаются большие картинки 3840 пикс по высоте + видеосюжеты (о них ниже)
- Колесо мыши — увеличение или уменьшение картинки. Сейчас здесь zoom неполноценный!
- Вращение модели осуществляется с зажатой ЛКМ (левой клавишей мыши).
- Клик — запускает последовательно один из фрагментов видео в разрешении 1080*1920. Назовём их условно «видео сюжеты». Воспроизведение видео зациклено!
- Медленное автовращение модели при первой загрузке сайта (превью), чтобы пользователь понял, что перед ним «живая» картинка. Опция должна быть отключаемая.
- Конечно, mobile friendly: соответствующие реакции на пульпирование 🙂 — вращение модели пальцем, зум щипками, показ видеосюжетов по тапу/касанию экрана.
Видеосюжеты 4-5 штук (примеры)
сюжет №1:
сюжет №2:
сюжет №3:
сюжет №4:
сюжет №5:
Заказчик
Сайт: unirentspb.ru
CMS (насколько я понял при помощи 2ip.ru/cms/) → modx.com
Final words
Я не знаю как всё пойдёт, но путей может быть несколько, я вижу две крайних точки:
- Полностью помочь внедрить всё это клиенту на сайт: мы снимаем (фото, видео), загружаем на сайт, создаём страницы и проч. и проч. описание. Под ключ.
- Мы снимаем (фото, видео), программируем нужные java скрипты (ну или что там), тестируем на одной модели одежды на стороне клиента, а дальше они сами при помощи выданных нами инструкций (manual-а). Мы получаем деньги и радуемся.
Наша задача прямо сейчас — сделать презентацию в ближайшие дни, обрисовать сроки, стоимость так, чтобы заказчик смог принять решение в нашу пользу.