0

我正在用 Wordpress 设计一个网站。

我需要 Fancybox 的帮助。我正在使用带有提升缩放功能的精美盒子。当我们将鼠标悬停在图像上时，它会像电子商务网站一样提供放大效果，当我单击它时，会打开一个带有更大尺寸图像的花式框。

现在我想在这个fancybox弹出窗口上添加一个链接，它将用户带到该产品的专用页面。但我不确定如何在 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>'
        },

提前致谢

迪莎

4

1 回答 1

1

这是我在 Fancybox 示例中找到的示例

http://jsfiddle.net/G5TC3/

重要的代码是 BeforeShow：此示例显示 Facebook 链接，但您可以轻松地将其替换为您的链接、图像或内容。

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        if (this.title) {
            // New line
            this.title += '<br />';

            // Add tweet button
            this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
        }
    },
    afterShow: function() {
        // Render tweet button
        twttr.widgets.load();
    },
    helpers : {
        title : {
            type: 'inside'
        }
    }  
});

http://fancyapps.com/fancybox/是fancybox 主页的网址。

要添加产品链接，请将 URL 作为 data-url 放在您的 a 标签中，然后更改 beforeShow 函数以从我猜 $(this).attr("data-url") 应该的标签中读取该 data-url给出那个值。我没有测试它。但是一旦你有了 url，你就可以在这里轻松地展示它。

于 2013-06-19T11:36:44.630 回答