Question

我正在使用title属性hack在fancybox popover的媒体（我的情况下是视频）下添加html元素。

查看

<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元素（花式框）中有一些关系，因为它们在页面上工作，而不是fancybox popover。

我愿意尝试其他解决方案，因为标题属性hack很好...... hackish。

如何向Fancybox添加分享按钮（twitter，Facebook）？

0 个答案: