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.


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



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>


  var imgpath = $(this).attr('dir');
  $('#image').html('<img src='+imgpath+'>');
  $('#thumbs').fadeOut(500,function (){

Live Demo   Download Script


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

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

  3. Above link is broken please check.

  4. fix link to demo :


    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.

  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.

  6. I am really appreciating very much by seeing your interesting posts.
    web design firm

  7. In any case, you either 1.) let the picture outline run constantly or 2.) you turn off it when you're not utilizing it - which is more often than not, in this way abhorring your edge and afterward you'll forget about it.jpg-compress.com


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons