Zmena zdroja obrázka pomocou jQuery

Môžete použiť funkciu jQuery's attr(). Ak má napríklad váš tag img atribút id s hodnotou 'my_image', urobíte toto:

<img id="my_image" src="first.jpg"/>

Potom môžete zmeniť src vášho obrázka pomocou jQuery takto:

$("#my_image").attr("src","second.jpg");

Ak to chcete pripojiť k udalosti click, môžete napísať:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Ak chcete obrázok otočiť, môžete urobiť toto:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Ukážem vám, ako zmeniť obrázok src tak, aby sa po kliknutí na obrázok otáčal cez všetky obrázky, ktoré sú vo vašom HTML (konkrétne vo vašom id d1 a triede c1)... či už máte v HTML 2 alebo viac obrázkov**.

Ukážem vám tiež, ako vyčistiť stránku po dokončení dokumentu tak, aby sa na začiatku zobrazil len jeden obrázok.

Úplný kód

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

Rozdelenie

1. Vytvorte kópiu odkazov obsahujúcich obrázky (poznámka: pre pridanú funkčnosť by ste mohli využiť aj atribút href odkazov... napríklad zobraziť pracovný odkaz pod každým obrázkom):

       var $images = $("#d1 > .c1 > a").clone(); ;

2. Skontrolujte, koľko obrázkov bolo v HTML, a vytvorte premennú na sledovanie toho, ktorý obrázok sa zobrazuje:

   premenná $dĺžka = $images.length;
   var $imgShow = 0;

3. Upravte dokument'HTML tak, aby sa zobrazoval len prvý obrázok. Všetky ostatné obrázky odstráňte.

   $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

4. Viažte funkciu, ktorá sa postará o kliknutie na odkaz na obrázok.

       $("#d1 > .c1 > a").click(function(event) {
           $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
           event.preventDefault();
       });

   Jadrom uvedeného kódu je použitie ++$imgShow % $length na cyklické prechádzanie objektu jQuery, ktorý obsahuje obrázky. ++$imgShow % $length najprv zvýši naše počítadlo o jednotku a potom toto číslo zmení na počet obrázkov. Výsledný index sa tak bude cyklicky meniť od 0 po dĺžka-1, čo sú indexy objektu $images. To znamená, že tento kód bude pracovať s 2, 3, 5, 10 alebo 100 obrázkami... cyklicky prechádza každý obrázok v poradí a po dosiahnutí posledného obrázka sa znovu spustí od prvého obrázka.

   Okrem toho sa .attr() používa na získanie a nastavenie atribútu "src" obrázkov. Na výber prvkov z objektu $images nastavím $images ako jQuery context pomocou tvaru $(selector, context). Potom použijem .eq() na výber práve prvku s konkrétnym indexom, ktorý ma zaujíma.

jsFiddle príklad s 3 obrázkami

Môžete tiež uložiť src do poľa.
jsFiddle príklad s 3 obrázkami

A tu'je spôsob, ako začleniť hrefs zo značiek kotiev okolo obrázkov:
jsFiddle príklad

Môžete to urobiť aj pomocou jQuery týmto spôsobom:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Môžete mať podmienku, ak existuje viacero stavov pre zdroj obrázku.