Fancybox 内容无法加载

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 的 jQuery。

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

Answer 1

当您引用（例如使用href）具有特定ID 的不同元素时，您应该使用hash # 符号，但此类元素不需要具有hash 符号在它自己的ID 属性中，所以

id="#396" 应该是id="396"

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

所以改变这个

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

...到这个

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

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

$(".inline").fancybox()

查看 FAQ 标签，第 6 号了解更多信息。