CODEWITHSUNDEEP
javascriptjqueryhtml
Javaughn Irawan
Javaughn Irawan

Reputation: 1

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 other image in the second row. I've managed to do that using this code:

function changeImage(a) {
    document.getElementById("imgblockjs").src=a;
}

And the html:

<HTML>
<HEAD>

<TITLE>
    Home -- RTR
</TITLE>    

<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" /> 
<SCRIPT src="../script.js"></SCRIPT>

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

    <tr>
        <td colspan="4" >

            <img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" />

        </td>
    </tr>

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

    <a href="#"><img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');"></a>
    <a href="#"><img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');"></a>

    </td>
    </tr>

    </table>

</BODY>
</HTML>

But that code doesn't have any transition.

I've tried using jquery:

$("#imgthumb1").click(function() {
    $("#imgblockjs").fadeOut(1000, function changeImage(a) {
        document.getElementById("imgblockjs").src=a;
    }).fadeIn(1000);
    return false;
});

I'm actually very new to jquery and haven't learn all the basics, I got the above jquery code on the internet and modified it a bit, thinking it would work. But it doesn't.

Can someone fix it? Or maybe use a different code? Basically I want the attribute src to be changed instead of having images on top of another. But if it's not possible, I'm open to any suggestion.

Also if possible I planned to make the picture change every 5 seconds automatically, using transition. But my first question is the priority

Thanks in advance

Upvotes: 0

Views: 1843

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138297

$("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...

Upvotes: 1

M.Nabeel
M.Nabeel

Reputation: 1066

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 :)

Upvotes: 2

Related Questions