Speakerdeck

Question

Speakerdeck

使用script to embed调用来设置api和json响应，如：

{
    "version": "1.0",
    "type": "video",
    "provider_name": "YouTube",
    "provider_url": "http://youtube.com/",
    "width": 425,
    "height": 344,
    "title": "Amazing Nintendo Facts",
    "author_name": "ZackScott",
    "author_url": "http://www.youtube.com/user/ZackScott",
    "html":
        "<object width=\"425\" height=\"344\">
            <param name=\"movie\" value=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"></param>
            <param name=\"allowFullScreen\" value=\"true\"></param>
            <param name=\"allowscriptaccess\" value=\"always\"></param>
            <embed src=\"http://www.youtube.com/v/M3r2XDceM6A&fs=1\"
                type=\"application/x-shockwave-flash\" width=\"425\" height=\"344\"
                allowscriptaccess=\"always\" allowfullscreen=\"true\"></embed>
        </object>",
}

只需放置一个Speakerdeck嵌入链接，例如：

<script async class='speakerdeck-embed' data-id='4ece03012a0554004f008afa' data-ratio='0.9534450651769087' src='//speakerdeck.com/assets/embed.js'></script>

效果很好，但我无法将其与fancybox v2集成。但运行a href="script"的问题似乎比使用fancybox iframe中的oEmbed api json更多。（但不确定。）

所以我把它分解为只通过a href="script"链接启动脚本的最小值 - 因为fancybox使用了a元素 - 我尝试了一些变体：

<a href="javascript(async class='speakerdeck' data-id='4ece03012a0554004f008afa' data-ratio='0.9534450651769087' src='//speakerdeck.com/assets/embed.js')" >show it</a>

所有我得到的都是旋转装载机图标，更糟糕的是。

我认为我只是对明显的心理错误，你能帮忙吗？

Answer 1

如果您已经拥有data-id='4ece03012a0554004f008afa'，就可以通过href方法将其直接传递到embed链接，就像

一样简单

<a class="fancydeck" href="http://speakerdeck.com/embed/4ece03012a0554004f008afa">CLICK to open speakerdeck inside fancybox</a>

然后只使用这个fancybox自定义脚本

$(document).ready(function() {
 $(".fancydeck").fancybox({
  type : "iframe",
  width: 640, // or whatever
  height : 420,
  fitToView : false
 });
}); // ready

SEE DEMO

注意：我在我的演示中使用了fancybox 2.x但是我不明白为什么它不能用于v1.3.4

在fancybox里面的Speakerdeck

Speakerdeck

1 个答案: