You may find various Slide Show in different way by writing some Client script code, Flash, etc. In this Article the approach I used is the Server side code. All the controls which used to render is dynamics. Even the Javascript which runs on Client is written in server side code. Therefore we only need to set the paths of images which are used in server side and only copy paste the code given. This Slide Show runs normally by replacing images, 1st with 2nd , and 2nd with 3rd and so on, after n seconds as specified. Also you have access to move any image without waiting for one.

Abstract:

The Presentation and Advertisement of website is the one of the reason that effect on the number of users that visits. Therefore developer use different techniques create some Dynamic images that dynamically changes. One of the way of presenting is using Slide Show. Slide show Provide an excellent way to show dynamic Advertisement, News, etc.

Introduction:

You may find various Slide Show in different way by writing some Client script code, Flash, etc. In this Article the approach I used is the Server side code. All the controls which used to render is dynamics. Even the Javascript which runs on Client is written in server side code. Therefore we only need to set the paths of images which are used in server side and only copy paste the code given. This Slide Show runs normally by replacing images, 1st with 2nd , and 2nd with 3rd and so on, after n seconds as specified. Also you have access to move any image without waiting for one.

Description:

So Let’s Start of making our Slide Show. First of all note that all the code written put into Page_Load in order to work.

Here are some settings, that you can change to set your settings,


This code specify some initial settings like time interval after image is changed in seconds and path of images to show, these images must be start with application root.

Next create dynamic controls,


This second region used for creating some dynamic controls for example, Table, Images, LinkButtons etc. One Point is to note that there are four image control used, because if you use one control and change their src which might take time to download. Once image files you’ve preloaded will be automatically stored in the browser’s cache. If you use the same URL elsewhere in the page , the cached version will be used. I think it is good to only hide and show their display rather then change their src every time. Further You can use Placeholder to place the slide show any where you want, just this by replacing,
           


This region specifies the onclick Event for every control. Link 1, 2 ,3, and 4 only used to set an global Variable in Javascript CurrentLink which tracks the current image which is shown. Play is used to start a timer function and Stop is used to stop the timer function. Also Play and Stop used to show and hide Stop and Play Link and vice versa.


Finally the javascript code in written at server side,



And Finally this region  specifies the body of Timer Function, Setting Global Variables i.e., CurrentLink and Interval. In this function only setting CurrentLink Variable, Setting color of  links and showing and hiding images.

Summary:

In this article all the code we have seen, need to put in the Page_Load Event. Then you can Play and Stop Slide Show any time, and jump directly into 1, 2 ,3 and 4th image directly.

[Download Sample]