John Mendez

I wanted a simple simple image rotator and came across this one using jquery.  (Please check out my updated post, Part II, that allows being able to have a number navigation for the images as well). However, because I'm not a fan of static code, I wanted to make it work server side, but this was a great example on how to get started for the static code

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html

I basically modified the code from the post above and made the image part of it server side.  I left the CSS and Javascript code in place.  Well I switched the rotation from 6 seconds to 4 seconds.

So here is the concept of this code:

• Have a server side ascx control
• Assign the property for the path where the images are stored
• Assign the property for the image file names delimited by a pipe (i.e, image1.jpg|image2.jpg)
• Assign the property of the Width of the images
• Assign the property of the Height of the images
• Assign the property of the Alt Text for the images (all images share this)

As usual I will pretty much do a copy of paste of the code to make this happen. Comments are in the code as needed


NOTE: The path for my images in my test website was /images/

##########################################
Markup of the ImageRotator.ascx control
##########################################

]]>
]]>

##########################################
Codebehind of the ImageRotator.ascx control
##########################################



##########################################
Implementing the control on an aspx page
##########################################





And that is that. As you can see, I pretty much just take the property values needed and write out the HTML needed that the javascript will use.

If you needed to, in the Page Init or before the if statement in Page Load, you could grab the image names from any source and make then a pipe delimited string.  The source could be an XML file or a database, or whatever else you wanted to store the image names.

Well hopefully this helps other out there.  This makes a simple way to have a server side ASCX control that is a jquery image rotator for ASP.NET.

ASP.NET, Javascript jquery