Как сделать один попап с разным контентом (библиотека fancybox)?

Question

[Alexey10]

Ребят, всем привет))
Такая ситуация:
Есть 6 карточек товара , при нажатии на кнопку купить, открывается попап.
Вопрос:
Как сделать так, чтобы один попап(шаблон попапа) использовать для всех карточек товара, только менять в нем контент (текст и картинку) в зависимости на какую карточку было нажато?
Делать 6 разных попапов нельзя, так как карточек может быть множество.
Пользуюсь библиотекой fancybox. Просьба помочь кто сталкивался с такой ситуацией.
Всем спасибо за ответ )))

Answer 1

[Extremum]

В общем-то ничего сложного - надо задать какую-то разметку и через js добавлять
Например, нужно добавить текст в инпут для дальнейшей отправки (товар я так понимаю можно заказать). На кнопку вызова попапа вешаем класс link-click и добавляем data-title с заголовком (атрибуты с приставкой data можно добавлять сколько угодно), создаем инпут с именем info в нашем попапе. Добавим jquery:

$('.text-click').click(function(){
        $("input[name=info]").val($(this).attr("data-title"));
    });

все работает. Для изображений что-то похожее, добавим какой-то элемент с классом class-img и добавим изображение в data-src:

$('.text-click').click(function(){
            $($(this).attr('href')).find('.class-img').attr('src', $(this).attr('data-src'));
        });