Jquery Mobile通過PHP發佈圖像

我需要幫助。我正在開發一個使用Jquery Mobile和PHP的應用程序。我正在從MySQL數據庫中檢索數據。我能夠提取包括圖像的數據。我需要用戶能夠點擊任何圖像並放大圖像。我使用PHP來遍歷行併爲要彈出的圖像創建彈出窗口部分。這可以在筆記本電腦上完美運行，但在移動設備上運行非常緩慢，創建的彈出窗口非常大，比普通的移動Web應用程序寬度要寬得多。Jquery Mobile通過PHP發佈圖像

請參閱下面的代碼，並感謝您的時間：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <link rel="stylesheet" href="css/mystyle.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
</head> 

<body> 

    <section id="main" data-role="page" data-theme="a" data-add-back-btn="true"> 

     <header data-role="header" data-position="fixed" data-id="theHeader"> 

     <h1>Header Title</h1> 

     <a href="/" data-rel="back">Go Back</a> 

    </header> 


    <article data-role="content"> 

    <?php 

     $con = mysql_connect('db','user','password'); 
     if (!$con) 
     { 
      die('Could not connect: ' . mysql_error()); 
     } 

     mysql_select_db("db"); 


     $sql = "select * from table"; 


     $result = mysql_query($sql); 
     $num_rows = mysql_num_rows($result); 
     $ii = 0; 

     while($row = mysql_fetch_array($result)) 
     { 
       echo('<div class="ui-grid-a">'); 

       echo('<div class="ui-block-a"><h6>'.$row['col1'].'</h6><h6>'.$row['col2'].'</h6><h6>'.$row['col3'].'</h6></div>'); 

       echo('<a href="#popup'.$ii.'" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://..../images/' . $row["imageName"] .'" alt="' . $row["imageName"] .'" style="height: 180px; width:130px;"></a>'); 

       echo('<div data-role="popup" id="popup'.$ii.'" data-overlay-theme="a" data-theme="d" data-corners="false"><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="http://..../images/' . $row["imageName"] .'" style="max-height:512px;" alt="'.$row["imageName"].'"></div>'); 

       echo('</div>'); 
       echo('<hr />'); 
       $ii++; 
     } 

     mysql_close($con); 

    ?> 

    </article> 

    <footer data-role="footer" data-position="fixed" data-id="theFooter"> 

     <h1>Footer</h1> 

    </footer> 
    </section> 

</body>

來源

2013-07-20 ahmadoa4

已經試過嗎？ http://view.jquerymobile.com/1.3.2/dist/demos/#Photolightbox – Omar

這是不同的，因爲我使用PHP來加載圖像並在PHP中生成JQMobile popup div。圖像正在工作，但它非常緩慢，彈出窗口的div被瘋狂放大。 – ahmadoa4

所以，你可以有小的照片，以便當用戶CLICS他們他們不退出在jQuery Mobile的網站擴大。

這是我使用的，我希望它可以幫助你。

   <a href='#popupPic1' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/$pic1' alt='' height='90' width='32%' style='max-width:200px;'></a> 
       <a href='#popupPic2' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a> 
       <a href='#popupPic3' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='./img/rest/NO_es.jpg' alt='' height='90' width='32%' style='max-width:200px;'></a> 

       <div data-role='popup' id='popupPic1' data-overlay-theme='a' data-theme='d' data-corners='false'> 
        <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='./img/rest/$pic1' style='max-height:512px;' alt=''></div> 
       <div data-role='popup' id='popupPic2' data-overlay-theme='a' data-theme='d' data-corners='false'> 
        <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='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div> 
       <div data-role='popup' id='popupPic3' data-overlay-theme='a' data-theme='d' data-corners='false'> 
        <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='./img/rest/NO_es.jpg' style='max-height:512px;' alt=''></div>

明顯地只是修復你想要加載的IMG的SRC。

如果它幫助你，給我豎起大拇指。

感謝

來源

2013-07-21 04:08:46

我指的是使用PHP來加載圖像並在PHP中生成JQMobile popup div。圖像正在工作，但它非常緩慢，彈出窗口的div被瘋狂放大。 – ahmadoa4

考慮將最大寬度指定爲最大高度。 –

-1

你可以使用pophoto類。該類是jqm中的標準彈出式元素類之一。

也許jquery mobile documention有更多有用的信息，您可以使用您的項目。

來源

2016-04-15 05:28:15 negin51

請問您可以添加更多信息來回答問題嗎？ – slfan

Jquery Mobile通過PHP發佈圖像

回答

相關問題