jquery - ワードプレス画像用のファンシーボックスjQueryのダイナミックリンク

Question

WordpressでWebサイトをデザインしています。

Fancybox で助けが必要です。エレベートズーム付きのファンシーボックスを使用しています。画像にカーソルを合わせると、ecocommerce の Web サイトのように効果的にズームインし、クリックすると、ファンシーボックスが開き、より大きなサイズの画像が表示されます。

ここで、このファンシーボックスのポップアップ ウィンドウにリンクを追加して、ユーザーをその製品の専用ページに移動させたいと考えています。しかし、jQuery で動的リンクを追加する方法がわかりません。

これはfancybox jqueryのスニペットです

        // HTML templates

        tpl: {
            wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
            image    : '<img class="fancybox-image" src="{href}" alt="" /><div class="fancybox-caption"><a href="**?page_id=**">Click here to view the details</a></div>',
            iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>',
            error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
            closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
            next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
            prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
        },

前もって感謝します

ディシャ