jQuery image change onclick | Lessoncup Programming Blog

Sunday, 26 January 2014

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

14 comments :

  1. Replies
    1. This comment has been removed by the author.

      Delete
  2. if the link is not work please make refresh once

    ReplyDelete
  3. Above link is broken please check.

    ReplyDelete
  4. fix link to demo :

    Forbidden

    You don't have permission to access /jquery-image-change-onclick/ on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    ReplyDelete
  5. Hi..
    I want design page in which,when i click on image which is in full size of page and image gets disappear and content on below that page can appear.

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons