Question

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

我在Fancybox需要帮助。我正在使用带有提升变焦的花式盒子。当我们将鼠标悬停在图像上时，它会像ecoomerce网站一样放大效果，当我点击它时，会打开一个更大尺寸图像的花式框。

现在我想在此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>'
        },

先谢谢

笛莎

Answer 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 home的网址。

要添加产品链接，请将URL作为数据网址放入您的标签中，然后更改beforeShow函数以从标记中读取该数据网址我猜$（this）.attr（“data-url” “）应该给予这个价值。我没有测试它。但是一旦你有网址，你就可以在这里轻松展示它。

用于wordpress图像的Fancy box jQuery中的动态链接

1 个答案: