NOTICE

Adfly Links not working Find Direct Links HERE

change image with click on tabs or thumbnails using jQuery

We can change Image in a div by clicking on thumbnails using jQuery without any CSS.




 HTML CODE
<table border="1" >
 <tr>
     <td colspan="3"><div id="thumb"><img src='Default-Image.jpg' height='200px' widht='200px' ></div>
        </td>
    </tr>
    <tr>
     <td>
   <div id="one"><img src='img-thum1.jpg' height='50px' widht='50px' ></div>
     </td>
     <td>
   <div id="two"><img src='img-thum2.jpg' height='50px' widht='50px' ></div>
     </td>
     <td>
   <div id="three"><img src='img-thum3.jpg' height='50px' widht='50px' ></div>
     </td>
    </tr>    
</table>

jQuery CODE
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$("#one").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

$("#two").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

$("#three").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

</script>

0 comments :

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)