jquerymobile通用photopopup

时间:2012-10-07 17:32:04

标签: javascript jquery-mobile photo-gallery

我是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``

1 个答案:

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

我认为如果你想管理大量的图片并在数据库中很好地组织它们,这可能是最好的解决方案。