與jQuery Mobile和PhoneGap一起使用Photoswipe

我有一個頁面顯示來自相冊的照片，我想使用Photoswipe，因爲Fancybox在手機上看起來不合適。我查看了網站上的例子，並試圖將其與我的應用程序集成，但無法實現它的工作。照片顯示，但當我點擊其中一個屏幕變爲空白，然後當我刷新照片顯示正常（沒有燈箱效果）。我的頁面的代碼如下：與jQuery Mobile和PhoneGap一起使用Photoswipe

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

我使用一個網格，以顯示照片也許這是搞亂的代碼？

來源

2013-08-01 WebDev84

有人甚至聽說過Photoswipe嗎？ – WebDev84

是的。我聽說過：D – Purus

當你使用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-13 17:11:02 Purus

與jQuery Mobile和PhoneGap一起使用Photoswipe

回答

相關問題