CODEWITHSUNDEEP
javascriptjqueryasp.netcss
user735627
user735627

Reputation: 281

changing the images

Could anyone helps me in the following.

I need to show the 3 images in a image box control of asp.net. The images should shown for 30 seconds and those should be one after the other.

Upvotes: 0

Views: 388

Answers (3)

Ahmad Firdaus
Ahmad Firdaus

Reputation: 61

I think its better for you to create some javascript for easy reading and call it from code behind using RegisterStartupScript.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        // called every n milisecond
        function changeImage(imgID, imageList) {
            if (typeof (this.currentImageCounter) == "undefined") {
                // init counter when necessary
                this.currentImageCounter = 0;
            } else {
                // increment counter between 0 to image array length

                this.currentImageCounter = (++this.currentImageCounter) % imageList.length;
            }

            // display image based on current image counter
            document.getElementById(imgID).src = imageList[this.currentImageCounter];
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Image ID="imgSlideShow" runat="server" ClientIDMode="Static" />
    </div>
    </form>
</body>
</html>

note: make sure you put ClientIDMode="static", otherwise javascript won't recognized your image control.

and then call it from code behind:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    imgSlideShow.ImageUrl = "../chimg/1-P.png"

    ClientScript.RegisterStartupScript(GetType(String), "scChangeImage", _
        "setInterval(""changeImage('imgSlideShow', " & _
        "new Array('../chimg/1-i.png','../chimg/2-i.png','../chimg/3-i.PNG'))"",2000);", True)

End Sub

You can also call RegisterStartupScript using C# if you want to.

Upvotes: 1

Ivo
Ivo

Reputation: 3436

You can best do this with jQuery and CSS.

See for example Easy Jquery Auto Image Rotator and Create an Image Rotator with Description (CSS/jQuery) or Google JQuery Image Rotator.

Upvotes: 0

fardjad
fardjad

Reputation: 20404

Your question is more about Javascript than C# / ASP.NET.

There are several ways to create an Image Slideshow:

  1. Using pure JavaScript:

    Create a function to load next image and use SetInterval() function to activate that function after a specific time

  2. Using JQuery plugins like Cycle.

Pure JavaScript Example:

function changeImage() {
    // ...
    var img = new Image();
    img.src = "fileNameForTheNextImage";
    document["YourIMGTagID"].src = img.src;
}

// Then in your document load, after DOM Ready:

setInterval("changeImage()", 30000);

Upvotes: 1

Related Questions