0
도움주세요. Jquery Mobile과 PHP를 사용하여 애플리케이션을 개발 중입니다. MySQL 데이터베이스에서 데이터를 가져옵니다. 이미지를 포함한 데이터를 가져올 수있었습니다. 사용자가 이미지를 클릭 할 수 있어야하고 이미지가 확대되어야합니다. PHP를 사용하여 행을 반복하고 이미지가 팝업되도록 팝업 분할을 만들었습니다. 이것은 랩톱에서 완벽하게 작동하지만 모바일 장치에서는 매우 느리고 생성 된 팝업 이미지는 일반 모바일 웹 앱 너비보다 훨씬 크고 훨씬 넓습니다.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>
시도해 보셨습니까? http://view.jquerymobile.com/1.3.2/dist/demos/#Photolightbox – Omar
이것은 PHP를 사용하여 이미지를로드하고 PHP 내부에서 JQMobile 팝업 div를 생성하는 것과 다릅니다. 이미지가 작동하지만 매우 느리고 팝업 div가 미쳐 확대됩니다. – ahmadoa4