一個簡單的腳本來處理圖像

我有http://communitychessclub.com與約20-30小jpegs分散在整個網站。我想點擊圖片並簡單地彈出較大的照片。問題是我不想爲每個縮略圖使用單獨的腳本。我只想將每個jpeg的高度和寬度傳遞給一個簡單的腳本。這看起來似乎會更快bc計算機知道該怎麼做w/o搜索每個圖像相關的腳本的腳本。也許我可以通過一個CSS的高度和寬度與「的onclick = ...等一個簡單的腳本來處理圖像

http://chesstao.com/test-2.php是樣本頁面。

這可能嗎？我該怎麼辦？

<a href="images/aveskulov-medium.jpg" class="photo" />pic-1</a> 
<a href="images/Jeff%20Plew.jpg" class="photo" />pic-2</a> 

<!-- new code which works, but modal isn't centered V or H--> 

<script> 
    $(document).ready(function(){ 
    $(".photo").click(function(e) { 
     var hrefval= $(this).attr("href"); 
     $.modal('<img src=" ' + hrefval + '">', { 
     containerCss: {autoPosition:'true'}, 
     overlayClose: true 
     }); 
     e.preventDefault(); 
    }); 
    }); 
</script>

來源

2011-10-15 verlager

是否每個圖像的大小不同，並且模式版本是否大於點擊版本？ – dSquared

是的。圖像大小不一，模式會比點擊的縮略圖大。 – verlager

您的代碼其實看起來不錯，正好有你需要糾正一些簡單的錯別字，使其正常工作：

你永遠不會關閉您的來電$.modal機智h最後的)。
你並沒有真正關閉你的$(document).ready函數。

這裏有一個固定的版本：

<script> 
    $(document).ready(function(){ 
    $(".photo").click(function(e) { 
     var hrefval= $(this).attr("href"); 
     $.modal('<img src=" ' + hrefval + '">', { 
     containerCss: { height:'auto',width:'auto'}, 
     overlayClose: true 
     }); 
     e.preventDefault(); 
    }); 
    }); 
</script>

而且a working jsFiddle

我建議是勤奮適當的空格嵌套，所以你可以發現這樣的問題有一目瞭然。

此外，使用JavaScript控制檯進行此類開發時，可以讓您看到來自拼寫錯誤的錯誤消息，以這種方式您可以知道您的概念是否存在缺陷，或者是否存在可以阻止代碼的缺失字符正在運行。

來源

2011-10-16 05:45:52

左邊緣位於中心，這是錯誤的。我可能需要添加：modal.setPosition（）;但我不確定它會發生什麼。 – verlager

我認爲問題實際上是在顯示圖像之前圖像尚未加載，因此'simpleModal'將自身對齊爲「0x0」大小的圖像。我猜這是因爲，如果你打開它們，一旦他們看起來錯了，但第二次我點擊鏈接模態視圖看起來是正確的。我看到你將高度和寬度傳遞給'containerCss'選項，你可以嘗試在選項中將相同的值傳遞給'minHeight'和'minWidth'，所以'containerCss：{// etc}，minHeight ：123，minWdith：123' –

一個簡單的腳本來處理圖像

回答

相關問題