简单的社交分享花式框弹出窗口

Question

我很惊讶我找不到执行此操作的 Joomla 扩展程序。网站上已经安装了 jquery 和 fancybox，所以两者都可以使用，所以我决定自己动手。寻找示例以加快完成此任务。

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

我找到了这个页面 (http://atlchris.com/1665/how-to-create-custom-share-buttons-for-all-the-popular-social-services/)，它描述了提交各种社交媒体网站链接的 URL。

问题是如何在幻想框中创建一个简单的表单，该表单具有标题和描述的输入字段以及一个提交按钮，用于调用每个特定社交媒体的 URL，该 URL 对标题、描述和要共享的 URL（作为参数传入）。会有一个提交按钮列表（“单击要共享的图标：fbIcon、twIcon、g+Icon ...），它们将提交表单（作为 GET 请求）并在fancybox中显示任何结果。然后用户用右上角 X 关闭花式框。

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

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

我发现大量 Joomla 社交媒体扩展程序，但没有一个能以这种方式工作，并且由于代码、计数器、统计数据和其他原因，大多数都连接到 3rd 方网站（除了社交媒体网站）。

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

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>