Как получить номер текущего изображения в javascript

Question

Я использую модуль Drupal 7 и Views на моем сайте. И хочу показать номер на моей текущей миниатюре изображений. Найдите StackoverFlow и найдите этот код:

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/

Но я не знаю, как я могу заменить этот код для получения номера на текущем уменьшенном изображении. Спасибо.

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
})
};​