Как добавить кнопки «Поделиться» (Twitter, Facebook) в Fancybox? - PullRequest
2 голосов
/ 07 марта 2012

Я использую хак атрибута заголовка для добавления html-элементов под носитель (в моем случае это видео) для всплывающего окна fancybox.

View

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/blahblah?rel=0"
            title="
                <span class='vote_count'>345</span> votes
                <a href='#' method='post' onclick=&quot;vote_up('/videos/vote?id=2', 'blahblah'); return false;&quot; remote='true'><img alt='Vote' src='/images/vote_thumb.png', class='vote_thumb'></a>
                <span class='share'>
                    <a href='https://twitter.com/share' class='twitter-share-button' data-url='/videos/2' data-hashtags='PrettyDarnFunny'>Tweet</a>
                    <div class='fb-like' data-href='/videos/2' data-send='false' data-layout='button_count' data-width='450' data-show-faces='false' data-font='lucida grande'></div>
                </span>
            ">
    <%= image_fu video.keyframe, nil %>
</a>                    

ненавязчивый Javascript

// Tweet this
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// Like this
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Хотя это хороший хак, кнопки Twitter и Facebook не заменяются правильно. Я уверен, что это как-то связано с тем, как fancybox вставляет их в новый элемент DOM (fancy box), когда они работают на странице, но не в поповере fancybox.

Я готов попробовать другие решения, так как взломать атрибут заголовка - это хорошо ... взломать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...