如何在javascript中獲取當前圖像的編號

Question

我在我的網站中使用Drupal 7和Views模塊。並希望顯示我當前的縮略圖圖片上的編號。搜索計算器，找到這個代碼：

HTML CODE: 
<img src="http://www.ambuvet.com/images/white-cat.jpg" /> 
<img src="http://www.biobest.co.uk/assets/images/diagnostics/cats.jpg" /> 
<img src="http://animal.discovery.com/guides/atoz/gallery/cat.jpg" /> 

JAVASCRIPT CODE: 
window.onload = function() { 
for (var i = 0; i < document.images.length; i++) { 
    var image = document.images[i]; 
    image.setAttribute("index", i + ""); 
    image.onclick = function() { 
     var index = this.getAttribute("index"); 
     alert("This is image #" + index); 
    }; 
} 
}; 

看到此鏈接：http://jsfiddle.net/uUF8x/

但我不知道，我怎麼能在當前縮略圖上取代對GET號此代碼。謝謝。

Answer 1

創建縮略圖作爲背景圖像的DIV像

HTML

<div class="thumbnail" style="background-image: url(http://www.ambuvet.com/images/white-cat.jpg);width:100px;height:100px;"></div> 
<div class="thumbnail" style="background-image: url(http://www.biobest.co.uk/assets/images/diagnostics/cats.jpg);width:100px;height:100px;"></div> 
<div class="thumbnail" style="background-image: url(http://animal.discovery.com/guides/atoz/gallery/cat.jpg);width:100px;height:100px;"></div> 

JS

window.onload = function() { 
    $(".thumbnail").each(function(index){ 
    $(this).html(index+1); // Will insert number inside div tag, use css to position it where you need 
}) 
};​