Как сделать галерею изображений проще

Question

Я знаю, как сделать галерею изображений с помощью javascript .. когда я нажимаю на изображение, оно становится больше ... ОК, если у меня есть 50 изображений ... Я должен написать 50 функций для моего галерея для работы !! ... мой вопрос ... Есть ли способ написать короткую функцию, которая спасет меня и время и позволит?

, например, это одна из функций:

function changeImg1(){ 
    $("#show").hide("explode"); 
    $("#show").show("bounce"); 
    $("#captionText").hide("explode"); 
    $("#captionText").show("pulsate"); 
    showImage.setAttribute("src",images[1]); 
    showCaption.innerHTML=(captions[1]); 
    imageIndex=1; 
    captionIndex=1; 
}; 

Большое спасибо, ребята, я много узнал от вас ...

Answer 1

вам нужно прочитать о «этом» в JS и JQuery , например

$(".many_many_img_with_same_class").click(function(){ 

    var current_img_src = $(this).attr("src"); 

    alert(current_img_src); 

}); 

, чем нажать кнопку Img, функция запуска в контексте этого IMG, и всегда показывают ГКЗ щелкнули IMG. стр. для anower вопрос в комментарии

HTML

<img src="/some/place1" data-any-spec-text="my text 1" class="many_many_img_with_same_class"> 
<img src="/some/place124" data-any-spec-text="my text 222" class="many_many_img_with_same_class"> 
<img src="/some/other/place" data-any-spec-text="more text 222" class="many_many_img_with_same_class"> 

Js

$(".many_many_img_with_same_class").click(function(){ 

    var current_img_src = $(this).attr("src"); 
    var current_img_capton_info = $(this).data("any-spec-text"); 

    alert(current_img_src, current_img_capton_info); 

});