0

This is the basic sample code to use 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>

You can download it from photoswipe website: http://www.photoswipe.com/ : It's the file 01-default.html from example folder.

What I want to do is to load the frame list into a invisible iframe (e.g. named "foo") instead than have it hardcoded in the page. The problem is that I can not access the image list. I tried:

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

instead of

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

after moving the ul in an external list.html file (source of the iframe) like this:

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

But it doesn't work. Why?

The debugger shows the following exception: "Code.PhotoSwipe.createInstance: No images to passed."

EDIT: -from the comments-

  1. It's a cross-domain issue. Why do I get a cross domain issue if files are all on my webserver? how should I refer to them in order to avoid such problem?

  2. Could be this approach valid for my purpose? (and with a long life expectancy...)

4

0 回答 0