How To Change Img Src With A Transition By Clicking Another Image

So I'm on a project which requires me to use table, and forbids me to use any div tag. I want to make a slider in one row of my table. I want the image to change with a click on ot

Solution 1:

You can change that images dynamically using JQuery I have added the classes to the images so that I can access them using class Main Image: added class "fullimage" small Images: added class "changeimage"

$('.changeimage').click(function(){
  //getting the current clicked image sourcevar clickedItemImage=$(this).attr('src');
  //setting the src of your main image
  $(".fullimage").attr('src',clickedItemImage);
});

<scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script><tableborder="0"width="100%"height="10px"cellspacing="0"><tr><tdcolspan="4" ><imgid="imgblockjs"class="fullimage"src="../img/singa.jpg"width="100%"height="300px" /></td></tr><tr><tdcolspan="4"id="imgchanger"><ahref="#"><imgclass="changeimage"src="../img/singa.jpg"id="imgthumb"></a><ahref="#"><imgclass="changeimage"src="../img/gajah.jpg"id="imgthumb"></a></td></tr></table>

I hope it helps :)

Solution 2:

$("img").on("click", function(){
   $("#imgblockjs").fadeOut(1000, function() {
       $("#imgblockjs").attr("src",this.src);
    }.bind(this)).fadeIn(1000);
 });

If an image is clicked, change the #imgblockjs.src to this images src...