Untitled

img thumbnail click replace div text value with thumbnail title

$(".imgcontainer").each(function() {

    var imgsrc = $(".minicontainer img:first-child", this).attr("src");

    var imgtitle = $(".minicontainer img:first-child", this).attr("title");

    $(this).append('<div class="presentouter"><img src="' + imgsrc + '" class="presentimg"/><div class="currentimgtitle" title="' + imgtitle + '">' + imgtitle + '</div></div>');

});

$(".miniimg, .miniimg2, .miniimg3").click(function() {

    var miniimgrc = $(this).attr("src"),

        $presentImg = $(this).closest(".imgcontainer").find(".presentimg");

 

    $presentImg.attr('src', miniimgrc);

});

$(".miniimg, .miniimg2, .miniimg3").click(function(index) {

    var miniimgtitle = $(this).attr("title"),

        $presentTitle = $(this).closest(".imgcontainer").find(".currentimgtitle");

 

    $presentTitle.attr('title', miniimgtitle);

 

});

$(".imgcontainer").each(function(index) {

$(".miniimg, .miniimg2, .miniimg3").click(function() {

    var textval =  $(this).attr("title");

    $(".currentimgtitle").text(textval);

});

});

<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>

 

<div class="imgcontainer">

    <div class="minicontainer">

    <img src="http://3.bp.blogspot.com/-EyJOI3UFWvo/Te5KHGgOpSI/AAAAAAAAESY/PhG66jWB1OA/s200/blogger-featured-slideshow.png" title="Blogger Logo" class="miniimg"/>

    <img src="http://2.bp.blogspot.com/-BKPnpE6QpfY/TewL7Q16ipI/AAAAAAAAERg/pxn6NY1nNsg/s640/best-blogger-template-stunning-slider-magazine.PNG" title="blogger template" class="miniimg2"/>

    <img src="http://4.bp.blogspot.com/-gxaZr19LXtY/TdRcJrxv3gI/AAAAAAAAD68/KaX9UN0B2nE/s640/advanced-design-magazine-blogger-template.PNG" title="another blogger template" class="miniimg3"/>

    </div>

</div>

       

$(".currentimgtitle").text(textval);

       

$(this).closest(".imgcontainer").find(".currentimgtitle").text(textval);

       

$('.minicontainer img').click(

    function(){

        var miniImgSrc = this.src,

            imgTitle = this.title,

            $container = $(this).closest('.imgcontainer');

        $container

            .find('.presentimg')

            .attr('src',miniImgSrc);

        $container

            .find('.currentimgtitle')

            .attr('title',imgTitle)

            .text(imgTitle);

    });