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...)

andreaconsole
  • 430
  • 3
  • 17
  • 1
    Is this a cross-domain issue, since your reference to iframe content is correct. – Samuli Hakoniemi Jan 04 '13 at 08:49
  • Can you create a sample jsFiddle? – ATOzTOA Jan 04 '13 at 08:57
  • zvona, you are right: if I open the file from my webserver (127.0.0.1/show.html) it doesn't work, but if I open as a file it works (indeed only with opera, doesn't work with chrome for some security issue, I guess). Is there a solution for such cross-domain issues? Which approach could I use to obtain the possibility to update image list using the list taken from an external file? – andreaconsole Jan 04 '13 at 09:04
  • and: why I'm getting a crossdomain issue if the files are all on my pc? how should i refer to them in order to avoid that issue? PS: ATOzTOA, since zvona got the problem, I think that a sample it's not useful, is it? Thank you however! – andreaconsole Jan 04 '13 at 09:56
  • Moreover, I'd like to know if this is a valid approach http://www.tomslabs.com/index.php/2012/06/iframes-and-javascript-cross-domain-security/ , i.e. if it doesn't raise security issues that could cause someday the browser to block it. – andreaconsole Jan 04 '13 at 10:13

0 Answers0