CODEWITHSUNDEEP
javascriptjqueryimageeachsrc
Fiddler
Fiddler

Reputation: 45

jQuery on thumbnail click replace second img src with thumbnail src

JSFIDDLE HERE On pressing a .miniimg/2/3 it should replace the src of an img classed .presentimg which i have appended using jquery to the div .imgcontainer, I have been through the jQuery (BELOW HTML) and the only reason i think it wont work because of the fact i have used a function within a function and i do not know an alternative method

<div class="imgcontainer">
    <div class="minicontainer">
    <img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUeMwXoI/AAAAAAAAFoc/7f0Um7OTgNg/s000/Antartic-by-Peter-Rejcek.jpg" title="icy mountains" class="miniimg"/>
    <img src="http://lh3.googleusercontent.com/_Zuzii37VUO4/Ta0nUFUhg6I/AAAAAAAAFoY/GToUxRYcteY/s000/Antartic-by-Kelly-Speelman.jpg" title="icy planes and hills" class="miniimg2"/>
    <img src="http://lh4.googleusercontent.com/_Zuzii37VUO4/Ta0nTs8AbPI/AAAAAAAAFoU/zCvNKv4kfe4/s000/BeachWaves-By-RePublicDomain.jpg" title="sun rise with clouds" class="miniimg3"/>
    </div>
</div>

The jquery, in the jquery I use (index) for the outer .each function as i saw it on a forum but i dont not know if that actually works unfortuately

$(".imgcontainer").each(function(){
    var imgsrc = $(".minicontainer img:first-child").attr("src");
    $(this).append('<img src="'+imgsrc+'" class="presentimg"/>');
});
$(".miniimg").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc);
    });
});
$(".miniimg2").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc2 = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc2);
    });
});
$(".miniimg3").each(function(index){
    var $this = $(this);
    $(this).click(function(){
        var miniimgrc3 = $this.attr("src");
        $(".presentimg").atrr('src', miniimgrc3);
    });
});

Upvotes: 1

Views: 977

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

Actually, I think your problem is that you have several misspellings of attr:

$(".presentimg").atrr('src', miniimgrc3);

should be:

$(".presentimg").attr('src', miniimgrc3);

Updated fiddle: http://jsfiddle.net/nv9em/

Additionally, you can shorten your code to just one event handler:

$(".imgcontainer").each(function() {
    var imgsrc = $(".minicontainer img:first-child").attr("src");
    $(this).append('<img src="' + imgsrc + '" class="presentimg"/>');
});

$(".miniimg, .miniimg2, .miniimg3").click(function() {
    var miniimgrc = $(this).attr("src");
    $(".presentimg").attr('src', miniimgrc);
});

Updated fiddle: http://jsfiddle.net/Fr5yW/

Upvotes: 1

Related Questions