2013-05-13 3 views
1

На веб-сайте у меня есть iframe, который содержит приложение для фотосъемки, которое является полноэкранным при запуске. Теперь слайд-шоу photoswipe следует контролировать извне iframe. У меня есть этот код в главном сайте:Photoswipe: события пожара в iframe с photoswipe

<iframe src="test.html" id="iframe" width="1440" height="1080" name="iframe" scrolling="no" frameBorder="0" ></iframe> 
<div id="ruck" ><a href="#" onClick="document.getElementById('iframe').contentWindow.previous();"><img src="img/rueck.png" /></a></div> 
<div id="vor" ><a href="#" onClick="document.getElementById('iframe').contentWindow.next();"><img src="img/vor.png" /></a></div> 

и этот код в IFRAME:

<html> 
<head> 
    <link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" /> 
    <link href="photoswipe.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript" src="klass.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> 
    <script type="text/javascript" src="code.photoswipe.jquery-3.0.4.min.js"></script> 
    <script type="text/javascript"> 
     (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(); 
}  
</script> 
</head> 
<body> 
<div id="gallery">  
      <a href="demo/image001.jpg" rel="external"></a> 
      <a href="demo/image002.jpg" rel="external"></a> 
      <a href="demo/image003.jpg" rel="external"></a> 
     </div> 
</body> 
</html> 

Здесь я получил ошибку при нажатии на следующих, предыдущих кнопках: ReferenceError: myPhotoSwipe не определен myPhotoSwipe.next();

Как вы можете видеть, событие срабатывает, но функция myPhotoSwipe.next() не определена. Любые идеи, что изменить для работающего кода?

благодарит заранее.

ответ

0

Я бы сказал, у вас есть вопрос рамочный:

var myPhotoSwipe; //set here to reference it on global scope 
(function(window, $, PhotoSwipe) 
     { 
      $(document).ready(function() 
      { 
       myPhotoSwipe = $("#gallery a").photoSwipe(
       { 
        enableMouseWheel: false, 
        enableKeyboard: false, 
        captionAndToolbarHide: false 
       }); 

       $("#gallery a:first").click(); 
      }); 
     } 
     (window, window.jQuery, window.Code.PhotoSwipe)); 
+0

спасибо большое, это он. – Mazl

Смежные вопросы