Home/ Questions/Q 6953691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:30:43+00:00

I’m a beginner and have this simple script. My question is how to set

  • 0

I’m a beginner and have this simple script. My question is how to set the time interval between fading out the mainImg and fading in the Img(1,2,3) because the source of the mainImgchanges directly when fading out:

<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function(){
        $("#img1").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/1.png");
            $("#mainImg").fadeIn("slow");
        });
        $("#img2").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/2.png");
            $("#mainImg").fadeIn("slow");

        });
        $("#img3").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/3.PNG");
            $("#mainImg").fadeIn("slow");
        });
    });

</script>
<style type="text/css">
    #theImage{
        width:256px;
        height:256px;   
    }
    .thumb{
        width:100px;
        height:100px;
        cursor:pointer;
        margin-right:20px;
        margin-left:20px;   
    }
</style>
</head>


<body>
<div id="theImage"><img id="mainImg" src="images/1.png" width="256" height="256" /></div>
<img id="img1" src="images/1.png" class="thumb" /> <img id="img2" src="images/2.png" class="thumb" /> <img id="img3" src="images/3.PNG" class="thumb" />
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use one function for all clicks like this;

    function changeImage(e) {
    e.preventDefault();
    var that = this;
    $("#mainImg").fadeOut("slow", function() {
        $(this).attr("src","images/" + that.id.replace('img', '') + ".png").fadeIn("slow");
    });
}

$(function(){
    $("#img1,#img2,#img3").click(changeImage);
});

    Here is jsFiddle example. Don’t mind CSS, I had to change them for display purposes.

    • 0