jQuery - Afbeeldingen vervangen en vergroten


Met het onderstaande script maak je een soort van galerij, het klikken op een kleine afbeelding onder de grote afbeelding wordt deze in het groot erboven getoond. Op deze manier heb je een simpele galerij bijvoorbeeld voor een webwinkel om meerdere foto's van een product te kunnen tonen. Met CSS kun je de galerij zelf naar wens opmaken.

HTML

<div class="image-container">
        <div class="image-title">Afbeelding 1</div>
        <div class="image"><img src="images/slide1.jpg" /></div>
        <div class="more-views">
                <a href="images/slide1.jpg"><img src="images/slide1_tb.jpg" class="active" /></a>
                <a href="images/slide2.jpg"><img src="images/slide2_tb.jpg" /></a>
                <a href="images/slide3.jpg"><img src="images/slide3_tb.jpg" /></a>
                <a href="images/slide4.jpg"><img src="images/slide4_tb.jpg" /></a>
        </div>
</div>


jQuery

$(document).ready(function() {
        $(".image-container div.more-views a").click(function() {
                $('.image-container div.more-views a').removeClass('active');
                $(this).addClass('active');
                imagetitle = $(this).attr("title");
                imagesrc = $(this).attr("href");
                $(".image-container .image-title").fadeOut(400, function() {
                        $(".image-container .image-title").text(imagetitle);
                }).fadeIn(400);
                $(".image-container .image").fadeOut(400, function() {
                        $(".image-container .image").children("img").attr("src", imagesrc);
                }).fadeIn(400);
                return false;
        });
});


CSS

.image-container,
.image-container .image-title,
.image-container .image {
        float:left;
        width:493px;
        margin:0px 0px 15px 0px;
}
.image-container div.more-views {
        float:left;
        width:493px;
}
.image-container div.more-views a {
        float:left;
        display:block;
        width:120px;
        margin:0px 4px 0px 0px;
}
.image-container div.more-views a.image-last {
        margin:0px;
}
.image-container div.more-views a {
        border:2px solid #ccc;
}
.image-container div.more-views a.active {
        border:2px solid #ff6600;
}


Demo

Titel van de eerste afbeelding