This is just the creation of the array and as you see, you can easily change it to be created from a database or whatever. You just need to supply the valid path to the images. (Note that this only will work on your PC when you run the solution, the website needs to have a virtual folder called Images to make things happen there)
So, the complete listing goes like follows. By checking the length property we can decide whether we should display one image or create and add the script handling the slideshow. We use the HtmlGenericControl class to hold the script we want to create.
if (images.Length != 0)
{
HtmlGenericControl js = new HtmlGenericControl("script");
js.Attributes.Add("type", "text/javascript");
// Create a StringBuilder object for the JavaScript
StringBuilder script = new StringBuilder();
// Use the setTimeout function to call the function swithImg approx each fourth second.
script.Append("setTimeout('switchImg()',4000);");
// Create an array to hold the files an assign the total number if pics
script.Append("var image = new Array();");
script.Append("var total = " + images.Length.ToString());
// The number variable is used to keep track of where we are in the loop
script.Append("var number = 0");
// An int to keep track of the array elements
int index = 0;
// Loop thru the images in the folder
// These links could come from a database, as well...
foreach (string image in images)
{
// As we get them from disk, the image string contains of the
// full file directory path. We use the FileInfo class to change it
// to map the Images folder in our project.
System.IO.FileInfo fi = new FileInfo(image);
script.Append("image[" + index.ToString() + "] = 'Images/" + fi.Name + "';");
index++;
}
// Set the first image to be displayed
string img_url = "Images/" + new FileInfo(images[0]).Name;
img.ImageUrl = img_url;
lblImgHeader.Text = img_url;
// Create a function displaying each file in the image array
script.Append("function switchImg() {");
// Get the image object and the label object
script.Append("var img = document.getElementById('img');");
script.Append("var imgHeader = document.getElementById('lblImgHeader');");
// Increase the current index for the image by one
script.Append("number = parseInt(number) + 1;");
// Check wether thats larger than the total amount of images
script.Append("if(number != total)");
// If not, display that images url that correspond with the image[index]
script.Append("{img.src = image[number];}");
// If number == total, we need to start from scratch again. image [0]
script.Append("else");
script.Append("{number = 0; img.src = image[0];}");
// Make sure to display the current image name in the label
script.Append("imgHeader.innerHTML = image[number];");
// Start the switchImg loop by calling setTimeout
script.Append("setTimeout('switchImg()',4000);");
script.Append("}");
// Set the script text
js.InnerText = script.ToString();
// Add the control to the header
Page.Header.Controls.Add(js);
}
It might be hard to follow, but if you look at the result of the code above it comes much clearer.
<script type="text/JavaScript">
setTimeout('switchImg()',4000);
var image = new Array();
var total = 4
var number = 0
image[0] = 'Images/htc_1.jpg';
image[1] = 'Images/htc_2.jpg';
image[2] = 'Images/htc_3.jpg';
image[3] = 'Images/htc_4.jpg';
function switchImg()
{
var img = document.getElementById('img');
var imgHeader = document.getElementById('lblImgHeader');
number = parseInt(number) + 1;
if(number != total)
{
img.src = image[number];
}
else
{
number = 0;
img.src = image[0];
}
imgHeader.innerHTML = image[number];
setTimeout('switchImg()',4000);
}
</script>
Let's walk thru the script.
First we have the JavaScript setTimeout function which calls the switchImg() method after four seconds. Then we have the initialization of the image array holding the image links. Our folder contained four images, so the total variable holds the total number of images. The number variable is hardcoded to 0 as we want to start viewing the image with index 0. (img.src = image[0]) Then is the image links added thru the loop we made.
The function itself adds 1 to the number variable and checks whether it is larger or not than the total numbers of images. (Variable total) If not, we display that array index as the image; else we set the number variable to 0 and set that as the current image. At the end of the function we set the image name to the label and then we call the switchImg() function again starting off the loop each fourth second.
You could do a combination of the two examples given here by adding an onclick event to the image displaying a larger version of the current image in a div with faded background, but I will not do it for you, you've been given the tools now to create that functionality yourself!