jquery 移动通用照片弹出窗口

Question

我是 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 例程。

在显示图像之前，会执行以下 on-event 函数

$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
}); 

可以通过修改popupbeforeposition js函数或者其他方法来实现吗？

谢谢 艾略特``

Answer 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.'"/>';
}
?>

如果您想管理大量图像并将它们很好地组织在数据库中，我认为这可能是最佳解决方案。