Как выводить модальное окно с определёнными фотографиями при клике на фотографию???

Question

[Pedronin]

Делаю сайт с картинами, и по клике на одну картину нужно открывать модальное окно с несколькими вариантами этой картины, таких картин много и по клике на каждую нужно будет открыть новое окно с подобными фотографиями (у каждй свои). Нужно что-то типо галереи. Как лучше это сделать, организовать? Для каждой картины создавать свою модалку? Или как это оптимизировать подскажите пожалуста.

Comments

[Pedronin]

Мне нужно чтоб при клике на одну из картинок открывалась галерея с самой картинкой на которую кликнули + картинками которые не видно до клика (их нигде на сайте нет только в этой галерее)

Answer 1

[MoralGray]

https://www.w3schools.com/howto/howto_js_lightbox.asp

Только у каждой картинки есть объект/массив с ее вариантами.
В галерею прокидывай вариации и рисуй их.

Comments

[Pedronin]

Да я знаю, но это не совсем то. Мне нужно чтоб при клике на одну из картинок открывалась галерея с самой картинкой на которую кликнули + картинками которые не видно до клика (их нигде на сайте нет только в этой галерее)

[Mico Sanoa]

Pedronin, это прям совсем то, что вы просили - галерея. А какие туда картинки подкидывать решить - кроме вас никто не решит

[MoralGray]

Pedronin, ну, не знаю что не то.

используй свайпер для отрисовки галлереи., ссылка у поста @HardBot

допустим у тебя есть массив с объектами.
допустим у этого объекта есть поле с главной фоткой, которую тебе надо отрисовать.
допустим у этого же объекта есть поле с массивом из вариаций этой же фотки.

у фотки в верстке есть идентификатор, ты по нажатию на фотку его читаешь и берешь массив этой фотки.
массив прокидываешь в свайпер а свайпер находится внутри попапа, а сам попап показываешь.

const fotki = [
  {
    id: 1,
    glavnaya: 'url',
    massiv: [fotka, fotka, fotka]
  },
  {
    id: 2,
    glavnaya: 'url',
    massiv: [fotka, fotka, fotka]
  }
]

[Pedronin]

Можете пожалуйста поподробнее объяснить, я просто совсем плохо разбираюсь в js, понимание языка есть но знаний ноль

[MoralGray]

Pedronin, делай что сможешь. день-два. приходи сюда с чем получилось. мы посмотрим.

[Pedronin]

так я наконец-то занялся этим, до этого времени никак не находил, как оказалось все очень просто буквально за пол часа со всем разобрался. Но вот такой вопрос а если на сайте будет очень много swipers, порядка 20, то это очень плохо? большая нагрузка на сайт будет?

[Pedronin]

при том что я немного облегчу его вес, импортируя только те функции которые я буду использовать, а не весь файл целиком

Answer 2

[HardBot]

https://swiperjs.com/demos