0

我是 jquery mobile 和 phonegap 的相对初学者，我试图使用 photoswipe 来让照片库正常工作。我让它在您单击图像时出现的位置工作，但我无法让它在页面加载时触发类似的单击事件。

我在下面附上了我正在使用的代码：

<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" />
    <link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="klass.min.js"></script>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="code.photoswipe.jquery-3.0.4.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>



</head>

<body>
<div id="photos" data-role="page" data-add-back-btn="true">


            <script type="text/javascript">
                $("#photos").on('pageshow', function() {

                    (function(window, $, PhotoSwipe)
                    {
                        $(document).ready(function()
                        {

                            $("#gallery a").photoSwipe(
                            {
                                enableMouseWheel: false,
                                enableKeyboard: false
                            });
                            $("#gallery a:first").click();

                        });

                    }(window, window.jQuery, window.Code.PhotoSwipe));


                });

            </script>
        <div data-role="content">

            <div id="gallery">

            <a href="images/full/001.jpg" rel="external"><img src="images/thumb/001.jpg" alt="Image 001" /></a>
            <a href="images/full/002.jpg" rel="external"><img src="images/thumb/002.jpg" alt="Image 002" /></a>
            <a href="images/full/003.jpg" rel="external"><img src="images/thumb/003.jpg" alt="Image 003" /></a>
            <a href="images/full/004.jpg" rel="external"><img src="images/thumb/004.jpg" alt="Image 004" /></a>
            <a href="images/full/005.jpg" rel="external"><img src="images/thumb/005.jpg" alt="Image 005" /></a>
            <a href="images/full/006.jpg" rel="external"><img src="images/thumb/006.jpg" alt="Image 006" /></a>
            <a href="images/full/007.jpg" rel="external"><img src="images/thumb/007.jpg" alt="Image 007" /></a>
            <a href="images/full/008.jpg" rel="external"><img src="images/thumb/008.jpg" alt="Image 008" /></a>
            <a href="images/full/009.jpg" rel="external"><img src="images/thumb/009.jpg" alt="Image 009" /></a>

            </div>
        </div>
</div>
</body>

</html>

我认为 $(document).ready 可能存在问题，因为我知道 jquery mobile 没有这个概念，但我不确定这是否会影响 photoswipe。

4

1 回答 1

0

要使用 jQuery 模拟点击事件，可以使用 trigger 方法。

在你的代码中试试这个：

$("#gallery a:first").trigger("click");

这应该模拟事件并启动您的 photoswipe 幻灯片。我希望这有帮助。

于 2013-02-20T14:42:36.997 回答