在jquerymobile v1.3.2,phonegap v2.9.0中刷新div

时间:2013-11-08 08:52:11

标签: ios cordova lightbox jquery-mobile-popup jquery-mobile-ajax

我正在使用jquerymobile v1.3.2,Phonegap 2.9.0

我从ajax webservice获得的照片工作正常。现在想要实现lightbox我从ajax获取照片并在div中连接。这是我的代码。我在jquerymobile演示帮助中使用了这个photo lightbox

//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,问题是一样的。你建议做什么或给任何替代方案。

0 个答案:

没有答案
相关问题