Question

我很惊讶我无法找到Joomla扩展来执行此操作。 jquery＆amp; fancybox已经安装在网站上，所以两者都可以使用，所以我决定推出自己的。寻找示例来加速完成此任务。

我已经显示并定位了社交媒体图标，我想在点击一个jquery fancybox时弹出一个jquery fancybox，允许用户在社交媒体网站上共享特定的URL（参数）。

我找到了此页面（http://atlchris.com/1665/how-to-create-custom-share-buttons-for-all-the-popular-social-services/），其中描述了提交各种社交媒体网站链接的网址。

问题是如何在fancybox中创建一个简单的表单，其中包含标题和描述的输入字段，以及一个提交按钮，用于调用每个特定社交媒体的URL，这些媒体对标题，描述和输入字段值进行urlen编码要共享的URL（作为参数传入）。将有一个提交按钮列表（＆＃34;点击图标与：fbIcon，twIcon，g + Icon ...共享）将提交表单（作为GET请求）并在fancybox中显示任何结果。然后用户用右上角X关闭fancybox。

此处的示例：http://fancybox.net/howto在使用iframe的细节上有点薄，我认为这是从社交媒体网站捕获结果或允许该网站显示登录表单所必需的。我想也可以使用ajax而不是iframe。

我设想这是一个简单的javascript函数，我可以通过我已经放置的社交图标的onclick方法触发。该函数的参数是要共享的URL。与其共享的社交网站由用户在fancybox弹出窗口中决定。

我为Joomla找到了大量的社交媒体扩展，但没有一种能够以这种方式工作，而且大多数都与第三方网站（除了社交媒体网站之外）有关的代码，计数器，统计数据和其他原因。

关于如何做到这一点的任何想法将极大地帮助我避免重新发明轮子。谢谢！

Answer 1

jQuery(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    beforeShow: function () {
    	var engTitle = jQuery(this.element).data("caption");
    	var cResult='<div class="pop-content">';
    			cResult+='<div class="pop-nptitle">'+this.title+'</div>';
    			cResult+='<div class="pop-entitle">'+engTitle+'</div>';
    			cResult+='<div class="social-share">';
    				cResult+='<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a>';
    				cResult+='<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>';
    			cResult+='</div>';
    		cResult+='</div>';
    	this.title = cResult;
    },
    afterShow: function () {
        // Render tweet button
        twttr.widgets.load();
    },
    helpers: {
        title: {
            type: 'inside'
        }, //<-- add a comma to separate the following option
        buttons: {} //<-- add this for buttons
    },
    closeBtn: false, // you will use the buttons now
    arrows: false
});

<div class="col-md-4">
<a class="fancybox" title="CSK_5864" data-caption="Sunflower Farming" href="http://localhost/photoedition/wp-content/uploads/2015/11/CSK_5864.jpg" rel="gallery">
<div class="pic">
<img class="img-responsive" alt="" src="http://localhost/photoedition/wp-content/uploads/2015/11/CSK_5864.jpg">
<span class="pic-caption top-to-bottom">
<h1 class="pic-title">CSK_5864</h1>
</span>
</div>
</a>
</div>

简单的社交分享fancybox popup

1 个答案: