CODEWITHSUNDEEP
javascripthtmlcssthumbnails
nictoriousface
nictoriousface

Reputation: 199

Javascript Enlarge Thumbnail

Im in the process of making a site and would like to have a section in which there are three pictures and a paragraph. Two of the pictures are small and the other large. I'd like to have it so when you click on one of the smaller pictures, it takes the spot of the bigger one and what was the bigger one would shrink and take the spot of the thumbnail. Any idea how I would go about doing this? Thanks!

<div class='picture-container' id='pc1'>
    <div class='large-picture' id='lp1'>
        <img src='make-up_artist_dupontstudios.png' width='45%' height='100%' class='no-mobile' style='float:left;' />
        <div class='picture-content' style='float:right;'>
            <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
            <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
            <div class='small-picture' style='float:left;'>
                <img src='hair_and_makeup_dupontstudios.png' width='175' height='100' />
            </div>
            <div class='small-picture'>
                <img src='infinity_wall_dupontstudios.png' width='175' height='100' />
            </div>
        </div>
    </div>
</div>

Update: here's some CSS

.picture-container{
    height:300px;
    width:99%;
    margin-left:auto;
    margin-right:auto;
}

.picture-content{
    width: 100%;
    margin: 0 auto;
    text-align:center;
    font-size:75%;
}

.picture-text{
    font-size:65%;
    padding-top:25px;
}

.picture-title{
   color:#FE2E2E;
   font-size:85%;
}

.small-picture{
    float:left;
    padding-right:25px;
    padding-top:25px;
    display:none;
}

#text-container{
    margin: 0 auto;
    width:90%;
}

Upvotes: 1

Views: 1435

Answers (2)

Seth McClaine
Seth McClaine

Reputation: 10040

$('img').click(
function(e){
  var current_img_src $('e.currentTarget').attr('src');
  var current_img $('e.currentTarget').parent();
  var large_img_src $('.large-picture img').attr('src');

  current_img.attr('src',large_img_src);
  $('.large-picture img').attr('src',current_img_src);
});

heres my own example http://jsfiddle.net/DcRTh/

Upvotes: 1

brbcoding
brbcoding

Reputation: 13596

Another Jquery Answer :P

$(document).ready(function(){
    $('img').click(function(){
        // get the url of the picture we clicked
        var url = $(this).attr('src');
        // get the url of the large image
        var bigUrl = $('.large-picture > img').attr('src');
        // change the url of the big picture
        $('.large-picture > img').attr('src', url);
        // change the url of this picture
        $(this).attr('src', bigUrl);
    });
});

http://jsfiddle.net/brbcoding/VEy5j/

Upvotes: 0

Related Questions