Learn free online HTML5, javascript, and jquery Tutorials by Examples

Monday 26 May 2014

On Click image Change in jQuery

---------------------------------------------
<script src="http://http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.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>


<div class="blog">

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

<style>
     .blog{ width:560px;height:300px;margin:0 auto;margin-top:170px; padding:10px; background-color:#111111;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666;}

#image{-webkit-box-shadow: 0 1px 15px #6CF;box-shadow: 0 1px 15px #6CF;width:200px; height:200px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;}

#thumbs{width:300px;margin:0 auto; display:none;}

#thumbs ul{list-style:none; padding:0; margin:0;}

#thumbs li{float:left; width:50px; height:50px; border-radius:100%; margin:5px; cursor:pointer;}

.btn{padding:10px; color:#000;-webkit-box-shadow: 0 0 2px #666;box-shadow: 0 0 2px #666; float:right; background-color:#FF0; cursor:pointer; text-transform:uppercase;}

.btn:hover{background-color:#F90;}

</style>


---------------------------------------------

No comments:

Post a Comment