0

我有一个页面显示相册中的照片，我想使用 Photoswipe，因为 Fancybox 在手机上看起来不合适。我查看了网站上的示例并尝试将其与我的应用程序集成，但无法使其正常工作。照片显示，但是当我点击其中一张时，屏幕变为空白，然后当我刷新照片时，照片会像平常一样显示（没有灯箱效果）。我的页面的代码如下：

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

0

当你使用 PhoneGap 或 Cordova 时，你应该使用 deviceready 事件来做你的事情。

    <script>
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            // your functions

            $("#Gallery a").photoSwipe({jQueryMobile: true});
        }
    </script>

您可以让您的脚本创建如下所示的 UL，而不是直接在网格 DIV 下添加图像。

    <div id="grid" class="ui-grid-a">
       <ul id="Gallery" class="gallery">
          < a href="image.jpg"><img src="img.jpg"/></a>
        </ul>
    </div>

这是您应该放置 js 代码的地方。Photoswipe 和 Phonegap 对我来说就像轻而易举。它第一次对我有用。

于 2013-11-13T17:11:02.213 回答