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 source
  var clickedItemImage=$(this).attr('src');
  //setting the src of your main image
  $(".fullimage").attr('src',clickedItemImage);
});

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <table border="0" width="100%" height="10px" cellspacing="0">

    <tr>
        <td colspan="4" >
            <img id="imgblockjs" class="fullimage" src="../img/singa.jpg" width="100%" height="300px" />

        </td>
    </tr>

    <tr>
    <td colspan="4" id="imgchanger">

    <a href="#"><img class="changeimage" src="../img/singa.jpg" id="imgthumb"></a>
    <a href="#"><img class="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...