Question

我是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没有这个概念，但我不确定这是否影响了照片。

Answer 1

要使用jQuery模拟click事件，可以使用触发器方法。

在您的代码中尝试此操作：

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

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

Photoswipe没有在phonegap上触发（Android）

1 个答案: