Hello,
I need help please. I am developing an application using Jquery Mobile and PHP. I am retrieving data from a MySQL database. I was able to pull the data including images. I need the user to be able to click on any image and the image is enlarged. I used PHP to loop through the rows and create popup divisions for the images to popup. This is working perfectly on a laptop but on a mobile device, it is very slow and the popup images created are very large and much wider than the normal mobile web app width.
Please refer to the code below and thank you for your time:
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
<meta charset="utf-8" />
<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>