簡單的社交分享fancybox popup

我很驚訝我找不到Joomla擴展來做到這一點。 jquery & fancybox已經安裝在網站上，所以都可以使用，所以我決定推出自己的。尋找例子來加速完成這項任務。簡單的社交分享fancybox popup

我有社交媒體圖標已經顯示和定位，我想彈出一個jQuery的fancybox，當一個被點擊，允許用戶在社交媒體網站上共享一個特定的URL（參數）。

我發現此頁（http://atlchris.com/1665/how-to-create-custom-share-buttons-for-all-the-popular-social-services/），其中描述了提交指向各種社交媒體網站鏈接的URL。

問題是如何在fancybox中創建一個簡單的表單，該表單包含標題和描述的輸入字段，以及提交按鈕以調用每個特定社交媒體的URL，以便爲標題，描述和輸入字段值進行urlen編碼要共享的URL（作爲參數傳入）。會有一個提交按鈕的列表（「點擊圖標與之共享：fbIcon，twIcon，g + Icon ...），它將提交表單（作爲GET請求）並在fancybox中顯示任何結果。關閉右上角X的fancybox。

這裏的示例：http://fancybox.net/howto對於使用iframe的詳細信息有點細，我認爲這需要捕獲社交媒體網站的結果或允許該網站我想可以使用ajax代替iframe

我想這是一個簡單的javascript函數，我可以用我已經放置的社交圖標的onclick方法觸發。功能是要共享的URL。與哪個社交網站共享的是de在fancybox彈出窗口中由用戶引用。

我發現了很多Joomla的社交媒體擴展，但沒有一個能夠以這種方式工作，並且大多數連接到第三方網站（除了社交媒體網站）以用於代碼，計數器，統計數據和其他原因。

關於如何最好地做到這一點的任何想法將大大幫助我避免重新發明車輪。謝謝！

來源

2015-06-07 user4830534

jQuery(".fancybox") 
 
    .attr('rel', 'gallery') 
 
    .fancybox({ 
 
    beforeShow: function() { 
 
    \t var engTitle = jQuery(this.element).data("caption"); 
 
    \t var cResult='<div class="pop-content">'; 
 
    \t \t \t cResult+='<div class="pop-nptitle">'+this.title+'</div>'; 
 
    \t \t \t cResult+='<div class="pop-entitle">'+engTitle+'</div>'; 
 
    \t \t \t cResult+='<div class="social-share">'; 
 
    \t \t \t \t cResult+='<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a>'; 
 
    \t \t \t \t 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>'; 
 
    \t \t \t cResult+='</div>'; 
 
    \t \t cResult+='</div>'; 
 
    \t 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-14 11:05:36

簡單的社交分享fancybox popup

回答

相關問題