Необходимо найти / доделать-переделать / написать с нуля связку из javascript и css которые будут выводить картинки в карточке товара.
На данный момент это реализовано так:
1) Для каждой картинки есть три размера – маленький, далее – S, средний, далее – M, и большой, далее – L. Но есть нюанс, для старых фото изображение B отсутствует.
2) Со стороны сервера – полный контроль т.е. сделаем все, как скажете.
3) Должно быть 4 "режима" просмотра – ширина экрана выше 1366 точек – "TV", диагональ от 1024 до 1366 – "PC", 768-800 – "Tablet" и до 768 – "Mobile".
4) Формата картинок два, у них общая ширина, но отличается высота, вот второй формат:
Теперь подробнее про каждый:
1. TV
Выводим картинку L, если ее нет (что можно определить и сообщить неким образом от сервера) – растягиваем до нужных размеров M.
Клик по левой половине картинки – показывает предыдущую (последнюю) картинку, клик по правой половине – следующую (первую), актуальные миниатюры подсвечиваются некой рамочкой.
Клик по миниатюре сразу показывает соотв. картинку в большом контейнере.
Крутилка типа "Loading.." на время загрузки.
Общее для всех "режимов", если миниатюр слишком много (пример –
необходимо реализовать механизм как их прятать. То, как сделано сейчас – не очень и наврядли технически будет совместимо с текущей задачей.
2. PC
Выводим картинку M.
По бокам стрелочки (кусок картинки в 10-15% с каждой стороны) – прокручивают картинки вперед / назад аналогично режиму TV. Клик по картинке – открывает версию L в новом слое – примерно так, как это реализовано сейчас.
В открывшемся новом слое с картинкой L – тоже есть стрелочки которые прокручивают картинки вперед-назад. Клик по картинке L – закрывает слой.
Все остальное аналогично режиму TV.
3. Tablet
Выводим картинку L, если ее нет – аналогично TV.
Расположение элементов на странице меняется, что можно видеть зайдя на сайт с таким разрешением, картинка теперь занимает 100% ширины экрана.
Картинки прокручиваются вперед-назад аналогично режиму TV, но обязательно с поддержкой свайпов т.е. прокручиваются пальцами.
По клику на картинку соотв. ничего не происходит.
Все остальное аналогично предыдущим режимам, но добавляем обязательную поддержку свайпов в переключении миниатюр.
4. Mobile
Все точно также, как и в случае Tablet, но показываем картинку M.
Технические требования:
- кроссбраузерность начиная с IE 9
- подключено и можно использовать jQuery 2.x, другие библиотеки подключить можно, но только если без них совсем нельзя
- комментарии в стилях и скрипте, без фанатизма
Инициатива по улучшению функционала, юзабильности, коррекция ТЗ приветствуется.
Вроде бы более-менее понятно...
Напишите пожалуйста сколько вы хотите за реализацию вышеизложенного.
Успешный кандидат автоматически получает все последующие заказы по работе с этим сайтом, к примеру в ближайшем будущем будем переносить боковое меню наверх.
Примеры ваших работ, портфолио – обязательно.
Варианты оплаты обсуждаются, если вы в Мск – можем лично встретится + пожизненная скидка на все услуги салона. Если вы не в Мск – то через безопасную сделку.