我是javascript的新手,想要调整以下jquerymobile代码,以便在没有对data-role =“popup”div中的图像路径进行硬编码的情况下使用它。
以下是代码的两个部分。第一部分用于显示缩略图,触摸时显示具有较高分辨率图片的灯箱:
<a href="#popupPhoto" data-rel="popup" data-position-to="window" data-inline="true" data-transition="fade" ><img class="v100col" alt="equinox" src="images/equinox.jpg"></a>
触摸图片执行以下操作以显示弹出窗口:
</div>
<div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="a" 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" rc="images/equinox_big.jpg" alt="Equinox">
</div>
我想用变量替换src =“images / equinox_big.jpg”,以便可以为我的移动页面上的所有图像执行相同的div例程。
在显示图像之前,执行以下事件处理功能
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
可以通过修改popupbeforeposition js函数或其他方法来完成吗?
由于 Elliot``
答案 0 :(得分:1)
仅仅因为我是服务器端开发人员,我会使用mysql进行数据库查询并使用php检索图像名称。
类似的东西:
<?php
$query = "SELECT * FROM mytable";
$result = mysql_query($query) or die (mysql_error());
while ($row = mysql_fetch_assoc($result)) {
$img = $row['img_name'];
echo '<img src="'.$img.'"/>';
}
?>
我认为如果你想管理大量的图片并在数据库中很好地组织它们,这可能是最好的解决方案。