0

我在 jquerymobile v1.3.2，Phonegap 2.9.0 工作

我正在从运行良好的 ajax 网络服务获取照片。现在想实现灯箱，我从 ajax 获取照片并在 div 中连接。这是我的代码。我使用了 jquerymobile 演示帮助中的这个照片灯箱。

//var contenttype; 
//var cookies;
//var aGallery;
var ItemsCount=photolink_arr.length;
var divGallery = document.getElementById("Gallery");
 for (var i=0; i <  ItemsCount; i++)
        {                
            $.ajax({
                type: 'get',
                async: false, 
                url: photolink_arr[i],
                dataType: "json",
                contentType: contenttype,
                headers: {Cookie: cookies},
                success: function (data){  
                    var photo= data.image_link;
                    var thumbphoto= data.thumbnail_link;  
                    aGallery += ' <a href="#popupPhoto' + i + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + thumbphoto + '" alt="Photos" style="width:30%"></a>';
                    aGallery += ' <div data-role="popup" id="popupPhoto' + i + '" data-overlay-theme="a" data-theme="d" data-corners="false">';
                    aGallery += ' <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="' + photo + '" style="max-height:512px;" alt="Paris, France"> </div>';   
                    divGallery.innerHTML = aGallery;  
                },
                complete: function() { 
                    console.log ('LoadphotosView function complete'); 
                },            
                error: function (request,data)
                { 
                    alert("load albums error request=" + JSON.stringify( request)); 
                }
            }) ; 

        }

html

<div id="ViewPhotopage" data-role="page"  class="RedScreen"> 
            <script type="application/javascript"  src="js/AlbumCategory.js"></script> 
            <script type="text/javascript"> 
                document.addEventListener("deviceready", function() {
                    console.log('Photo view device ready started'); 
                    tabBar.hide(); 
                });

                $(document).ready(function(){                    
                    console.log('albums category document ready');
                     LoadAlbums();                    
                });

                $( document ).on( "pageinit", function() {
                    $( ".photopopup" ).on({
                        popupbeforeposition: function() {
                            var maxHeight = $( window ).height() - 60 + "px";
                            $( ".photopopup img" ).css( "max-height", maxHeight );
                        }
                    });
                }); 
            </script> 
            <div id="Header" data-role="header">
                <a data-rel="back" data-role="button" data-inline="true" data-theme="b">Back</a>  
                <h1>Photo View</h1>
                <a rel="external" data-role="button" href="PhotoAdd.html" data-inline="true" data-theme="b">Add</a>  
            </div>   
            <div id="Gallery" data-role="content" class="gallery">
                <div style='font-size:14pt;color:#fff;'>Loading..</div>
            </div>
        </div>

图像和弹出窗口都显示超链接也不起作用。我只想显示缩略图，点击大图应该显示在灯箱中。我想我必须像 jquerymobile 中的 listview 一样刷新 div。我使用过 photoswipe 并且问题是一样的。你有什么建议或给出任何替代方案。

4

0 回答 0