Before I wrote a post about how to create a simple jquery image rotator in asp.net. I'v expanded on that code to include the ability to "browse images" in the slideshow by clicking on a number for the image. The end result now looks something like this. Please ignore the size and width (these can be set) and this is just for pure example. Also please ignore the bad looks of the play button as well. Again, just for example. I will also include a zip file as well.
Since I'm expanding on my first post, I will just be adding the code I changed to to make this happen.
Let's start with the code behind file. Our goal here it to create the numbers that users can use to navigate the slideshow we created. Also, we are adding a simple title text saying "Browse Image". We will be doing this by taking a count of how many images we have and writing out a div container with nested div's. Please see the code snippet below.
That is it for the changes to our code behind file. The rest is for javascript and CSS.
The CSS aspect is pretty self explanitory. As you can see from the code snippet above we gave our div's ID's. This is how we will use CSS with them. Below are the CSS classes I added to this solution.
Ok, now for the javascript code. Which, by the way, if any of you have suggestions on how to make this more simple or more efficient please let me now. As I was coding this it just seemed as though I could have done it a better way, but this worked so I'm sticking with it :) I changed enough code here that I will paste the javascript as is on my control. I have comments below in the code to help make some sense of it.
That is about it. Again, please read my first post about this so it makes more sense. The first post also shows you how to apply the user control to a page and set it's properties that it needs. Below is the zip file as well.
ImageRotator.zip (3.13 kb)
4c369bf7-7ef0-4281-8f5e-e6ee95f10914|0|.0
ASP.NET, Javascript