Question

这是使用photoswipe的基本示例代码：

<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
...
<script type="text/javascript">

  (function(window, PhotoSwipe){

    document.addEventListener('DOMContentLoaded', function(){
      var options = {},
      instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );  
    }, false);
  }(window, window.Code.PhotoSwipe));   
</script>
</head>
<body>
...
<div id="MainContent">
<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>

<ul id="Gallery" class="gallery">
    <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" alt="Image 001" /></a></li>
    ...
    <li><a href="images/full/018.jpg"><img src="images/thumb/018.jpg" alt="Image 018" /></a></li>
</ul>
</div>  
</body>
</html>

您可以从photoswipe网站下载：http://www.photoswipe.com/：它是示例文件夹中的文件01-default.html。

我想要做的是将帧列表加载到不可见的iframe（例如命名为“foo”），而不是在页面中硬编码。问题是我无法访问图像列表。我试过了：

PhotoSwipe.attach(window.frames['foo'].document.querySelectorAll('#Gallery a'), options);

而不是

PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

在外部list.html文件（iframe的源代码）中移动ul后，如下所示：

...
<div id="MainContent">
<div class="page-content">
    <h1>PhotoSwipe</h1>
</div>
    <iframe id="foo" src="list.html"></iframe>
...

但它不起作用。为什么呢？

调试器显示以下异常：“Code.PhotoSwipe.createInstance：没有要传递的图像。”

编辑： - 来自评论 -

这是一个跨域问题。如果文件全部在我的网络服务器上，为什么会出现跨域问题？为了避免这样的问题，我应该如何参考它们？
this approach可能符合我的目的吗？（预期寿命很长......）

photoswipe：从iframe中获取图片列表

调试器显示以下异常：“Code.PhotoSwipe.createInstance：没有要传递的图像。”

0 个答案: