2012-10-07 152 views
0

我是新來的JavaScript,並希望適應下面的jquerymobile代碼,以便它可以在data-role =「popup」div中不使用硬編碼圖像路徑的情況下使用。jquerymobile generic photopopup

以下是代碼的兩個部分。第一部分是用來顯示一個縮略圖觸摸顯示器時具有較高清晰度圖像中的收藏夾:

<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

只是因爲我比較服務器端的開發者,我會做一個數據庫查詢與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.'"/>'; 
} 
?> 

我想,這可能是最好的解決方案,如果您要管理大量的圖像,並讓他們很好地組織在一個數據庫中。

+0

我可能是錯的,但我不認爲頁面在觸摸縮略圖和顯示完整圖像之間在服務器上刷新。所以在我看來,php不會成爲一條路。我認爲,如果有可能popupforeforeposition必須有權訪問 – Elliot

+0

它的工作原理和查詢頁面正常,只需通過我檢查這個測試網站http://test.slimspa.eu/andrea/mobile/ – thefly73