Databases
StackOverflow2013
Postsdbo
POPhotoswipe: fire events in iframe with photoswipe
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPhotoswipe: fire events in iframe with photoswipe
    text
    copied!<p>In a website, I´ve an iframe which contains a photoswipe application which is fullscreen on startup. Now, the photoswipe slideshow should be controlled from outside the iframe. I have this code in the main site:</p> <pre><code>&lt;iframe src="test.html" id="iframe" width="1440" height="1080" name="iframe" scrolling="no" frameBorder="0" &gt;&lt;/iframe&gt; &lt;div id="ruck" &gt;&lt;a href="#" onClick="document.getElementById('iframe').contentWindow.previous();"&gt;&lt;img src="img/rueck.png" /&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="vor" &gt;&lt;a href="#" onClick="document.getElementById('iframe').contentWindow.next();"&gt;&lt;img src="img/vor.png" /&gt;&lt;/a&gt;&lt;/div&gt; </code></pre> <p>and this code in the iframe:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" /&gt; &lt;link href="photoswipe.css" type="text/css" rel="stylesheet" /&gt; &lt;script type="text/javascript" src="klass.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="code.photoswipe.jquery-3.0.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; (function(window, $, PhotoSwipe) { $(document).ready(function() { var myPhotoSwipe = $("#gallery a").photoSwipe( { enableMouseWheel: false, enableKeyboard: false, captionAndToolbarHide: false }); $("#gallery a:first").click(); }); } (window, window.jQuery, window.Code.PhotoSwipe)); function previous() { myPhotoSwipe.previous(); } function next() { myPhotoSwipe.next(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="gallery"&gt; &lt;a href="demo/image001.jpg" rel="external"&gt;&lt;/a&gt; &lt;a href="demo/image002.jpg" rel="external"&gt;&lt;/a&gt; &lt;a href="demo/image003.jpg" rel="external"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here, I got an error when clicking on the next, previous-buttons: ReferenceError: myPhotoSwipe is not defined myPhotoSwipe.next();</p> <p>As you can see, the event is firing, but the function myPhotoSwipe.next() is undefined. Any ideas, what to change for a running code?</p> <p>thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload