Change image url dynamically

Question

I created an image element in web page. I am extracting image urls from database and wanted to set the url of the image element to these values with a gap of 5 seconds of interval each.

How can I achieve this?

here is my sample code...

RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);
foreach (DetailsForSlideShow detail in details)
{
    imgSlideShow.Attributes["src"] = ResolveUrl(detail.GraphUrl);
    Thread.Sleep(detail.TimeInterval);
}

By the above code I am able to set the image url only for the first value that i am getting from database....

Answer 1

You can load all of image links into Data Table and put it into Session. Then add ajax update panel and ajax timer to your web page. Set timer interval to 5000 and read 1 row of table in each callback.

Answer 2

What you are describing seems much like a client-server with "push logic" from server using an extabilished, permanent communication. This is not possible to get working on the web. Last, using sleep events during a page processing, it's not always a good idea, unless there are some specific reasons (i.e. to wait a specific resource to get available). Even when using an ajax update panel it's always the client to trigger the event, leading to server.

To have your slideshow, you have many options, I will show you two of them, but you can also use ready to use plugins, there are tons of examples on the web, just search for them.

---

1- A quick and dirty solution, but hopefully for a short number of images. You can create a javascript array based on db content, and use it as if they were statically created for a simple slideshow javascript, and let it change through SetInterval js function.

c# code:

//
// ... this is your code
//
RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

string script = "var myimg = new Array();\n";
int i=0;
foreach (DetailsForSlideShow detail in details)
{
  script += "myimg[" + i.ToString() + "] = \"" + ResolveUrl(detail.GraphUrl) + "\";\n";
}
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "arraykey", script, true);

web page:

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

This will render to web page to something like:

var myimg = new Array();
myimg[0] = "/path/img0.jpg";
myimg[1] = "/path/img1.jpg";
myimg[2] = "/path/img2.jpg";
[...]

Which you can later use/cycle with javascript:

var curimg=0;
function slideshow() {
    document.getElementById("mydiv").getElementsByTagName("img")[0].src = myimg[curimg];
    curimg++;
    if(curimg >= myimg.length) curimg=0;  //Restart from first image
}

and then start the slideshow, with a script at end of html (or on onload event in body)

  setTimeout(slideshow, 5000);

note: you can generate/append also this script in c# RegisterClientScriptBlock as shown before, just change the "arraykey" value every time. More infos here: http://msdn.microsoft.com/it-it/library/bahh2fef%28v=vs.80%29.aspx

---

2- A better solution is to use jquery's ajax method to get "next image" from a c# web method.

web page:

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

javascript code:

function slideshow() {
  $.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: "/ajax.aspx/GetNextImage",
    dataType: "json",
    success: function (data) {
      //this changes the image on the web page
      $('#mydiv img').attr("src", data.d);

      //fires another sleep/image cycle
      setTimeout(slideshow(), 5000);
    },
    error: function (result) {
      alert(result.message);
    }
  });
}

$(document).ready(function () {
  //Kicks the slideshow
  slideshow();
});

cs code:

[WebMethod]
public static string GetNextImage()
{
  //
  // ... this is your code
  //
  RollingScreenBAL bal = new RollingScreenBAL();
  DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

  //Someway get next image you need to display
  //So I assume you get 1 record only (from DB?)
  DetailsForSlideShow detail = details[0];

  //Last you can save last sent image name or index as per user...
  //I.e. you could use a Session variable, or move also this logic
  //to client side
  [...]

  //Send back to jquery call the image url
  return ResolveUrl(detail.GraphUrl);
}

note: if you are missing what jquery is, search the web for it, I'm sure it will help you a lot using javascript.