jQuery image change onclick

Hi, today i am showing a stylish profile picture changing while on mouse click using jquery, you can use this in any social network or personal or product related websites and you can also manage the small thumbs by clicking show and hide thumbs button at top right side corner. i have done this with few lines jQuery of code let's see how we do this.

HTML

in html take two div's for show and hide buttons and give them id name's and keep the hide button in hidden mode, now take a div to display the big profile picture , take UL tag and take list of images to keep the small thumbs inside the LI tags, now in each LI tag store the big profile picture name inside the DIR attribute

<div class="lessoncup">

<div class="btn" id="show">Show Thumbs</div>
<div class="btn" id="hide" style=" display:none;">Hide Thumbs</div>

<div id="image"><img src="2.png" width="200" height="200"></div>


<div id="thumbs">
<ul>
<li style="background-image:url(t1.jpg); background-repeat:no-repeat;" dir="5.png"></li>
<li style="background-image:url(t2.jpg); background-repeat:no-repeat;" dir="4.png"></li>
<li style="background-image:url(t3.jpg); background-repeat:no-repeat;" dir="3.png"></li>
<li style="background-image:url(t4.jpg); background-repeat:no-repeat;" dir="2.png"></li>
<li style="background-image:url(t5.jpg); background-repeat:no-repeat;" dir="1.png"></li>
</ul>
</div>

</div>

JAVASCRIPT

here we have two tasks one is while clicking on show thumb button we need to show the hidden thumbs and next is while clicking on small thumbs the big profile picture will be update according to the small thumb ,now write the click function on LI tag as a selector and grab the data from DIR attribute and store it in imgpath variable and by using html() method  just change the content of big profile image div inside this method by adding <img src='+imgpath+'> this script

to showing and hiding the thumbs just write the click function on .btn button as a selector and make the small thumbs list to be visible by using fadeIn() method and hide the show thumb button and visible the Hide Thumb button

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('li').click(function(){
  
  var imgpath = $(this).attr('dir');
  
  $('#image').html('<img src='+imgpath+'>');
  
 });
 
 
 $('.btn').click(function(){
  
  $('#thumbs').fadeIn(500);
  $('#image').animate({marginTop:'10px'},200);
  $(this).hide();
  
  $('#hide').fadeIn('slow');
  
 });
 
 
 $('#hide').click(function(){
  
  $('#thumbs').fadeOut(500,function (){
  $('#image').animate({marginTop:'50px'},200);
  });
  
  $(this).hide();
  $('#show').fadeIn('slow');
  
 });
 
 
});
</script>

Live Demo   Download Script