Jquery Photosweep：使用Photosweep在iframe中触发事件_Jquery_Events_Iframe_Photoswipe

Jquery Photosweep：使用Photosweep在iframe中触发事件

jquery events iframe

Jquery Photosweep：使用Photosweep在iframe中触发事件,jquery,events,iframe,photoswipe,Jquery,Events,Iframe,Photoswipe,在一个网站中，我有一个iframe，其中包含一个Photosweep应用程序，在启动时全屏显示。现在，应该从iframe外部控制Photosweep幻灯片。我在主站点中有以下代码： <iframe src="test.html" id="iframe" width="1440" height="1080" name="iframe" scrolling="no" frameBorder="0" ></iframe> <div id="ruck" ><a

在一个网站中，我有一个iframe，其中包含一个Photosweep应用程序，在启动时全屏显示。现在，应该从iframe外部控制Photosweep幻灯片。我在主站点中有以下代码：

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


（功能（窗口，$，Photosweep）
{
$（文档）.ready（函数（）
{
var myphotosweep=$（“#图库a”）.photosweep(
{
enableMouseWheel:错误，
启用键盘：false，
标题和工具栏隐藏：false
});
$（“#图库a:第一”）。单击（）；
});
}
（window，window.jQuery，window.Code.photoswip））；
函数previous（）
{
myphotosweep.previous（）；
}
函数next（）
{
myphotosweep.next（）；
}

在这里，我在单击下一个、上一个按钮时出错： ReferenceError:未定义MyPhotosweep myphotosweep.next（）

如您所见，事件正在触发，但函数myphotosweep.next（）未定义。有什么想法吗？运行代码需要更改什么

提前感谢。

我想说您有一个范围问题：

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