0

私はjqueryモバイルとphonegapの比較的初心者で、写真ギャラリーを機能させるために写真スワイプを使用しようとしています。画像をクリックするとギャラリーが表示されますが、ページが読み込まれたときにシミュレートされたクリックイベントを発生させることができません。

以下に使用しているコードを同封しました。

<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 にはこの概念がないことはわかっていますが、これが写真のスワイプに影響するかどうかはわかりません。

4

1 に答える 1

0

jQuery でクリック イベントをシミュレートするには、trigger メソッドを使用できます。

コードでこれを試してください：

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

これにより、イベントがシミュレートされ、写真スワイプ スライドショーが開始されます。これが役立つことを願っています。

于 2013-02-20T14:42:36.997 に答える