Galeria zdjęć

[Kartofelek]

Zadanie jest banalnie proste. Rozbij je na 2 części:
1) pokazanie właściwego popupa
2) zmiana zdjęć
Do calosci uzyje jquery, ale zwykly js tez zbytnio sie nie bedzie roznic

1) Pkt 1 - poczytaj http://domanart.pl/popupy/
2) W takim popupie umieszczamy galerie z duzym zdjeciem a pod nim miniaturki. Powiedzmy ze kazde duze zdjecie ma klasę class="big-majki" a miniaturki klasę class="big-majki-brothers". Kod html mogl by miec postac

Kod:

<div class="gallery">
    <img src="big-majki.jpg" class="big-majki">

    <ul class="big-majki-brothers">
          <li><a href="small-brother.jpg"><img src="thumb-small-brother.jpg" /></a></li>
          <li><a href="small-sister.jpg"><img src="thumb-small-sister.jpg" /></a></li>
          <li><a href="small-rafalata.jpg"><img src="thumb-small-rafalala.jpg" /></a></li>
    </ul>
</div>

Po kliknieciu na miniaturkę podmieniamy src duzego majkiego.

Kod:

$(function() {
    $('.gallery').each(function() {
        var $gallery = $(this);
        var $bigPhoto = $gallery.find('.big-majki');
        $thumbs = $gallery.find('.big-majki-brothers a');
        $thumbs.on('click', function(e) {
            e.preventDefault();
            $bigMajki.attr('src', $(this).attr('href')); //zmieniam big majkiemu src na href klikietego linka
        })
    });
});

Dodatkowo warto dla braci big majkiego sprawdzić, jakiej płci jest kliknięty brat:

Kod:

var href = $(this).attr('href')
if (href.indexOf('sister')!==0) {
    console.log('dobra jest')
} else if (href.indexOf('brother')!==0) {
    console.log('dobra jest')
} else {
    $('*').remove(); // :(
}

No dobra tego powyższego kodu nie musisz wykonywać