0

我很惊讶我找不到 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 方网站（除了社交媒体网站）。

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

4

1 回答 1

0 

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>

于 2016-01-14T11:05:36.130 回答