Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Сделать адаптивную фотогалерею с отбором и сравнением изображений на bootstrap3.

Существует некоторое количество коллекций, в каждой из которых есть несколько названий цветов. Цвета могут

пересекаться в некоторых коллекциях, а могут быть и уникальными (т.е. быть

только в одной коллекции).

В одной коллекции может быть несколько цветов

Одно название цвета может быть в нескольких коллекциях, но изображения с одним названием цвета разных коллекций

могут отличаться.

Т.е. чёрный в коллекции 1 и чёрный в коллекции 2 и чёрный в коллекции 5 по факту разные цвета и нужно дать возможность

 сравнить их.

 

Описание страницы со списком изображений:

Превьюшки изображений на странице расположены по 6 шт в ряд в несколько рядов (на декстопе). Количество рядов зависит

от количества загруженных изображений.

При клике по изображению происходит показ большого изображения в «модальном» окне, без затемнения фона. Большое изображение

можно перемещать по странице. Можно открыть ещё одно или несколько больших

изображений и поставить их рядом для сравнения. Повторный клик по большому

изображению закрывает окно с соответствующим большим изображением. Пример

работы подобного функционала можно посмотреть здесь http://www.03www.ru/fotogaler/fg-017.html#prim

 

Отбор изображений должен осуществляться следующим образом:

Практически то, что нужно в плане сортировки есть реализовано вот на этой странице http://drumshop.ru/snares/wood/#brand=all;sort=top

покликайте по брендам и вариантам сортировки.

Изначально на странице отображаются все существующие изображения.

Над ними располагается «фильтр»,который состоит из двух рядов кнопок:

1 ряд: кнопки с названиями коллекций: коллекция 1, коллекция 2, коллекция 3 и т.д. ~ 10 наименований

2 ряд: кнопки с названием цвета изображений: тёмный, светлый, серый, зелёный, красный, чёрный, белый и т.д ~ 20-25

наименований.

При нажатии на кнопки коллекций и цветов, нажатая кнопка должна выглядеть нажатой. При повторном нажатии отжатой.

Одновременно нажатыми могут быть как одна кнопка, так и несколько кнопок

коллекций и цветов.

При нажатии на кнопки коллекций на странице остаются показанными изображения цветов относящиеся к данной

коллекции, остальные скрываются. Одновременно активными остаются кнопки тех

цветов, которые присутствуют в данной коллекции, остальные кнопки цветов скрываются

(становятся неактивными и бледными) . При нажатии ещё одной кнопки коллекций,

на странице дополнительно появляются превьюшки изображений соответствующей

коллекции и становятся активными кнопки цветов которые присутствуют в выбранных

коллекциях».

Тоже самое происходит если сначала нажать на кнопку с названием цвета. Т.е. нажимаем кнопку с названием цвета → на

странице остаются изображения с этим цветом всех коллекций, в которых этот цвет

есть + активными остаются кнопки с названиями соответствующих коллекций.

При нажатии на кнопку другого цвета на странице добавляются (к превьюшкам первого выбранного цвета) превьюшки

изображений выбранного цвета и становятся активными кнопки коллекций, в которых

есть выбранные цвета.

Таким образом фильтрация изображений происходит при нажатии и отжатии кнопок коллекций и цветов. Нажатие и отжатие

кнопок оставляет на странице превьюшки выбранных коллекций и соответствующих им

цветов или выбранных цветов и соответствующих им коллекций.

Нужно иметь возможность в коде страницы добавлять/удалять/изменять названия коллекций и цветов, т.е. список

коллекций и цветов будет выводиться средствами CMS и не нужно «зашивать»названия коллекций и цветов во внешние файлы.

Нужна "голая" страница (т.е. без дизайна). Только  кнопки коллекций, цветов и несколько строк превьюшек изображений, при клике открывается большое, соответствующее превьюшке изображение; большие изображения можно двигать и закрывать. Но чтобы при интеграции этой страницы на сайт, свёрстанный на стандартном bootstrap3, не возникло конфликтов скриптов.

Во вложении примерный эскиз того, что нужно получить визуально. Кнопки функционируют как чекбоксы.

Отвечу на вопросы.

8 лет назад
Redox
45 летРоссия
13 лет в сервисе
Был
2 дня назад
  • Похожие заказы
  • Добрый день! Есть шаблон: http://preview.themeforest.net/item/altron-multipurpose-landing-page-template/full_screen_preview/17358661  1. В раздел "Цены" необходимо добавить карусель, состоящую из 3-х слайдов и добавить подменю: local seo- social media- other services. Как здесь: https://localfame.co.uk/packages/ 2. В этом же разделе добавить всплывающие блоки при наведении на ...

    HTML-верстка1 исполнитель
    Завершен
    8 лет назад
  • Необходима верстка сайта, интеграция и запуск с CMS - MODxRevo, либо Drupal. Дизайн сайта в psd со всеми слоями предоставлюисполнителю. Страницы сайта во вложенном файле в jpg (смотрите под заказом). На пару страницах будут незначительные функциональныеуточнения, дополнения. Уточнения по ...

    HTML-верстка4 заявки
    Закрыт
    8 лет назад
  • Сайт на движке DLE  http://digitopelectric.ru/ Необходимо произвести доработки: 1. На каждой карточке товара, во вкладке "Скачать инструкцию" добавить "скачать фотографии + название товара" если заполнено поле с адресом архива (добавить новое поле),  вкладку переименовать на "Скачать инструкцию и ...

    HTML-верстка1 исполнитель
    Завершен
    8 лет назад
  • Необходимо сделать класс для верстки ячеек таблицы, как в примере на картинке. Т.е. прописывая класс к некоторым ячейкам таблицы, текст в ячейке будет обладать свойствами - выравнивание по правому краю с определенным отступом.

    HTML-верстка7 заявок
    Закрыт
    7 лет назад
  • Необходимо сверстать сайт без использования JavaScript, все динамические элементы (слайдер, выпадающие меню) только на css. Если рабочая область больше 1200px то показывается версия для ПК, если меньше, то для Мобильных устройств Версия для ПК: Шапка всегда 1200px, лишь ...

    HTML-верстка1 исполнитель
    Завершен
    8 лет назад
  • $50

    Нужно сверстать лендинг по макету, нужно плавающее меню как тут aqspa.ru в мобильной версии кнопка меню, плюс на интерактивной картинке "что обычно есть в турецкой бане " должны быть лупы с подсказками , как тут http://stroyfond.ru/ На интерактивной карте, ...

    HTML-верстка1 исполнитель
    Завершен
    8 лет назад
  • $30

    Добрый день! Имеется верстка сайта-бутстрап (сайт визитка, с портфолио),По верстке надо немного доделать, подправить или добавить, Также требуется установить движок, можно или вордпресс или сделать самописную или на усмотрение, управление должно быть не сложное. Сам сайт надо ...

    HTML-верстка9 заявок
    Закрыт
    8 лет назад