Question

fancybox内容在页面加载时加载..我想要它，所以只有在点击链接时才能加载内容...现在，当你打开页面时，fancybox中的内容正在加载。我认为你必须放一个事件处理程序，但我不知道如何。

请观看视频以充分理解！ http://www.youtube.com/watch?v=b6MxkBhRC-w

这是我的代码

<body>

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>




<script type="text/javascript">
$(document).ready(function() {
        $("#click").fancybox();
    });
</script>


</body>

Answer 1

您遇到的问题是，您要将iframe加载为内联内容，因此无论是否可见，它仍会在后台加载。

您需要做的是，而不是定位内联选择器#image_link，而是直接定位到{iframe的内容（src属性的值）<a> 1}}标签如：

<a href="http://www.putlocker.com/embed/E25FA20CE8643E5F" title="PutLockerMedia" id="click">watch</a>

...这是你需要的唯一html（你可以删除隐藏的div）

然后使用此代码：

$(document).ready(function () {
    $("#click").fancybox({
        type: "iframe",
        width: 600,
        height: 360
    });
});

参见 JSFIDDLE

Answer 2

我不知道fancybox，但我知道类似的灯箱＆＃39;。我认为他们可能会以同样的方式工作。

不是fancybox加载你需要的内容，但iframe会加载。我认为Fancybox只是以某种风格展示它。

因此尝试在iframe中删除src attribut。并尝试显示fancybox使用API。我可以使用灯箱来表明我的意思。

$("#click").click(function() {$("iframe").attr("src","xxxx"); $.lightbox("#image_link")})

我希望它有所帮助。

如何在点击链接后加载fancybox内容？

2 个答案: