Сложные изображения Fancybox 3 в формате DIV

Question

Я новичок в Javascript, Jquery и Fancybox.Создание сайта галереи изображений для клиента.Подписи к изображениям являются сложными (заголовки, абзацы, форма PayPal и т. Д.). Попытка сделать DIV со всей разметкой правильно визуализировать в fancybox-slide, но безрезультатно.Пожалуйста помоги!Пример разметки:

Ссылка

<a href="../assets/img/illustration/2018-02-Roi-de-coeur.jpg" data-title-id="roi-de-coeur" data-fancybox="gallery" class="card roi-de-coeur"></a>

DIV Я пытаюсь правильно отобразить

    <div id="roi-de-coeur" class="fancybox-caption">
        <h4>Le Roi de coeur</h4>
        <p>Scratchboard on Masonite with watercolor, 7&#34; h x 5&#34; w (2018). For upcoming <span class="pubTitle"><a href="http://bostoncomics.com/" target="_blank">Boston Comics Roundtable</a> Card Deck</span>. Framed original art $150 USD + $15 shipping</p>
        <form target="paypal" action="URL" method="post">
            <input type="hidden" name="cmd" value="">
            <input type="hidden" name="hosted_button_id" value="">
            <input type="image" src="" name="submit" alt="">
            <img alt="" border="0" src="" width="1" height="1">
        </form>
</div>

Заранее спасибо.

Answer 1

Извините за задержку ответа.Я был сбит с толку желаемой функциональностью, кодируемой двумя разными способами.Решение CodePen обернуло пользовательский комментарий в тег привязки, который я не мог использовать, так как комментарии имеют свои собственные привязки, создавая встроенные теги привязки (<a>amazingly <a>customized</a> content</a>), которые HTML отказывался отображать. Fancybox Demo упаковывает пользовательские комментарии в <figcaption>, используя другой скрипт.Я бы обновил пример CodePen, чтобы он соответствовал демонстрации Fancybox.Спасибо за вашу помощь!

Answer 2

Проверьте документы, есть некоторые образцы, которые должны помочь (особенно последний) - https://fancyapps.com/fancybox/3/docs/#faq-2 например,

$( '[data-fancybox]' ).fancybox({
    caption : function( instance, item ) {
        return 'html code of some other element that can contain anything';
    }
});