0

アルバムの写真を表示するページがあり、携帯電話では Fancybox が適切に表示されないため、Photoswipe を使用したいと考えています。ウェブサイトの例を見て、アプリと統合しようとしましたが、機能しません。写真は表示されますが、そのうちの 1 つをクリックすると画面が空白になり、更新すると写真が通常どおり表示されます (ライトボックス効果はありません)。私のページのコードは以下のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wedding</title>
        <link href="css/jquery-mobile.css" rel="stylesheet" />
        <link href="css/application.css" rel="stylesheet" />
        <link href="css/photoswipe.css" rel="stylesheet" />
        <script src="js/jquery.js"></script>
        <script src="js/global.js"></script>
        <script src="js/jquery-mobile.js"></script>
        <script src="phonegap.js"></script>
        <script src="js/connection.js"></script>
    </head>
    <body>
        <div data-role="page" id="album">
            <div id="header" data-role="header"><p align="center">Wedding</p></div>
            <div id="content" data-role="content">
                <div id="album_message" class="message" style="margin-bottom:20px;"></div>
                <div id="album_loader" class="message">
                    <p align="center">
                        <strong>Please Wait, Loading Photos...</strong><br /><img src="images/loading.gif" />
                    </p>
                </div>
                <div id="album_photos"></div>
            </div>
            <div id="footer" data-role="footer" data-position="fixed">
                <nav data-role="navbar">
                    <ul>
                        <li><a href="index.html" data-icon="home">Home</a></li>
                        <li><a href="instructions.html" data-icon="info">Instructions</a></li>
                    </ul>
                </nav>
            </div>
            <script src="js/klass.min.js"></script>
            <script src="js/photoswipe.js"></script>
            <script>
            $(document).on('pagebeforeshow', '#album', function() {
                var album_id = localStorage.getItem('album_id');
                var album_title = localStorage.getItem('album_title');
                var album_bride = localStorage.getItem('album_bride');
                var album_groom = localStorage.getItem('album_groom');
                var album_user = localStorage.getItem('album_user');
                $('#album_message').html('<p align="center"><strong>Album:</strong> ' + album_title + ' <br /><strong>By:</strong> ' + album_bride + ' & ' + album_groom + '</p>');
                $.ajax({
                    url: server_url + "get-photos",
                    type: "post",
                    data: 'album_id=' + album_id,
                    dataType: 'json',
                    crossDomain: true,
                    beforeSend : function () {
                        $('#album_loader').show();
                    },
                    error: function() {
                        $("#album_loader").hide();
                        $('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
                    },
                    success: function(data) {
                        $("#album_loader").hide();
                        if (data.response === "true") {
                            $('#album_photos').empty();
                            $("#album_photos").append('<div id="grid" class="ui-grid-a"></div>');
                            var html = '';
                            for (i = 0; i < data.photos.length; i++) {
                                html += '<div class="ui-block-b"><a href="' + photo_url + album_user + '/resized/' + data.photos[i].photo_resized + '"><img src="' + photo_url + album_user + '/thumbnail/' + data.photos[i].photo_thumbnail + '" class="img-border" /></a></div>'; 
                            }
                            $("#grid").append(html);
                            $('#album_photos').trigger('create');
                        } else {
                            $('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
                        }
                    }
                });

                (function(window, PhotoSwipe) {
                    document.addEventListener('DOMContentLoaded', function() {
                        var options = {},
                            instance = PhotoSwipe.attach( window.document.querySelectorAll('#grid a'), options );
                    }, false);
                }(window, window.Code.PhotoSwipe));

            });
            </script>
        </div>
    </body>
</html>

写真を表示するためにグリッドを使用しているため、コードが台無しになっている可能性がありますか?

4

1 に答える 1