Простая социальная доля fancybox popup

Question

Я удивлен, что я не могу найти расширение Joomla для этого. jquery & fancybox уже установлены на сайте, поэтому оба доступны для использования, поэтому я решил бросить свой собственный. Ищите примеры, чтобы ускорить выполнение этой задачи.

У меня есть значки социальных сетей, которые уже отображаются и расположены, и я хочу всплывать при запуске jQuery fancybox при щелчке, который позволяет пользователям обмениваться определенным URL (параметром) на сайте в социальных сетях.

Я нашел эту страницу (http://atlchris.com/1665/how-to-create-custom-share-buttons-for-all-the-popular-social-services/), которая описывает URL-адрес для отправки ссылок на различные сайты социальных сетей.

Вопрос заключается в том, как создать простую форму внутри fancybox, которая имеет поля ввода для названия и описания, и кнопку отправки для вызова URL-адреса для каждого конкретного социального медиа, который urlencodes значения поля ввода для названия, описания и URL для совместного использования (передается как параметр). Появится список кнопок отправки («Нажмите значок, чтобы поделиться с: fbIcon, twIcon, g + Icon ...), который отправит форму (как запрос GET) и отобразит любые результаты в fancybox. Затем пользователь закрывает fancybox с верхним правом углом X.

Пример: http://fancybox.net/howto немного тонкий в деталях для использования iframe, который, как я полагаю, необходим для захвата результатов с сайта в социальных сетях или для разрешения этого сайта отображать форму для входа в систему. Я полагаю, что ajax можно использовать вместо iframe.

Я представляю это как просто функцию javascript, которую я мог бы вызвать с помощью метода onclick социальной иконки, которую я уже разместил. функция - это URL-адрес для совместного использования. Какой социальный сайт он разделяет, пользователь в всплывающем окне fancybox.

Я нашел множество расширений для социальных сетей для Joomla, но ни один из них не будет работать таким образом, и большинство из них связано с сайтами сторонних разработчиков (в дополнение к сайту социальных сетей) для кода, счетчиков, статистики и других причин.

Любые идеи о том, как лучше всего это сделать, очень помогут мне избежать повторного использования колеса. Благодаря!

Answer 1

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>