JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.imgcontainer{
    width:500px;
    height:300px;
    border:1px solid #606060;
}
.miniimg, .miniimg2, .miniimg3{
    width:150px;
    height:100px;
    display:block;
    float:left;
    cursor:pointer;
}
.minicontainer{
    width:151px;
    float:left;
}
.presentimg{
    width:345px;
    height:300px;
    float:right;
}
.presentouter{
    width:345px;
    height:300px;
    float:right;
    position:relative;
}
.currentimgtitle{
    width:325px;
    min-height:20px;
    color:#fff;
    position:absolute;
    bottom:0px;
    left:0px;
    background-image:url('http://www.motoresbritanicos.com/2011/images/bg-black-transparency.png');
    padding-bottom:15px;
    padding-left:10px;
    padding-right:10px;
}

JavaScript

$(".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(index) {
    var self = $(this),
        
        miniimgtitle = self.attr("title"),
        miniimgrc = self.attr("src"),
        
        parent = self.closest(".imgcontainer");
    
    $(".currentimgtitle", parent).attr('title', miniimgtitle).text(miniimgtitle);
    $(".presentimg", parent).attr('src', miniimgrc);

});