Question

使用Fancybox时收到以下消息。我在这里搜索了所有帖子，似乎没有解决我的问题。如果我遗失任何内容，请告诉我

"The requested content cannot be loaded. Please try again later."

输入HTML：

<div class="ow_video_list_item ow_small">
   <a id="inline" href="#396">
      <img src="http://www.site.com/1.jpg">
   </a>
</div>

<div class="ow_video_list_item ow_small">
   <a id="inline" href="#397">
      <img src="http://www.site.com/2.jpg">
   </a>
</div>

jQuery转换后的生成输出：

<div class="ow_video_list_item ow_small">
   <div style="display: none;" id="#396">This is video 396</div>
   <a id="inline" href="#396">
      <img src="http://www.site.com/1.jpg">
   </a>
</div>

<div class="ow_video_list_item ow_small">
   <div style="display: none;" id="#397">This is video 397</div>
   <a id="inline" href="#397">
      <img src="http://www.site.com/2.jpg">
   </a>
</div>

每当我点击图片时，我都会看到fancybox弹出窗口“无法加载请求的内容。请稍后再试。”根据我的理解，fancybox按预期加载得很好。

下面提供了绑定Fancybox的jQuery。

                   $("#inline").fancybox({
                       overlayShow: true,
                       frameWidth:640,
                       frameHeight:360
                   });

Answer 1

当您（例如使用#）引用具有特定href的其他元素时，您应该使用哈希 ID符号但这样的元素不会不需要在自己的ID属性中使用哈希符号，所以

id="#396"应为id="396"

此外，ID应该是唯一的...两个或更多元素不应使用相同的ID。如果要两次或更多次使用相同的选择器，请改用类。

所以改变这个

<a id="inline" href="#396">和<a id="inline" href="#397">

...到此

<a class="inline" href="#396">和<a class="inline" href="#397">

...并将您的fancybox脚本更改为

$(".inline").fancybox()

查看第6页的 FAQ 标签了解更多信息。

无法加载Fancybox内容

1 个答案: