gpt4 book ai didi

javascript - 单击链接后如何加载 fancybox 内容?

转载 作者:行者123 更新时间:2023-11-28 01:34:29 25 4
gpt4 key购买 nike

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>

最佳答案

您遇到的问题是您正在加载 iframe作为内联内容,因此无论它是否可见,它仍然在后台加载。

您要做的是,不要定位内联选择器 #image_link ,直接定位到 iframe 的内容(其 src 属性的值)在您的 <a> 中标签如:

<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

关于javascript - 单击链接后如何加载 fancybox 内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21691179/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com