Bootstrap3 адаптивая фотогалерея с отбором и сравнением изображений
Сделать адаптивную фотогалерею с отбором и сравнением изображений на 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, не возникло конфликтов скриптов.
Во вложении примерный эскиз того, что нужно получить визуально. Кнопки функционируют как чекбоксы.
Отвечу на вопросы.