AJAX SLIDE SHOW
It
is used to create a slide show with a set of images. AJAX slideshow is a simple
way to create a slide show without any jquery library. We can create so many
stylish slideshow by jquery but it require plugins and libraries so AJAX
slideshow is a simple way to create and use
- To create this kind of application Add a page in your website name it as “slideshow.aspx”. Take a tool script manager and a Image control.
- With in the HTML source of the page Drag and drop a SlideShow Extender and set the properties for it.
<body bgcolor="white"> <form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<div align="center">
<asp:Image ID="Image1" runat="server"
Height="280px"
Width="480px"
/>
<asp:SlideShowExtender ID="SlideShowExtender1" runat="server"
TargetControlID="Image1”
PlayInterval="3000"
Loop="true"
AutoPlay="true"
SlideShowServiceMethod="GetImages"
UseContextKey="True">
</asp:SlideShowExtender>
- If you are interested to create a shadow behind the image then you may use the Ajax DropShadow Extender and set its properties like this.
<asp:DropShadowExtender ID="DropShadowExtender1"
runat="server"
TargetControlID="Image1"
Opacity="0.2"
Width="30">
</asp:DropShadowExtender>
- If you want to rounded corner of the image then use Ajax RoundedCorners Extender and set its properties like this.
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"
TargetControlID="Image1"
Radius="12">
</asp:RoundedCornersExtender>
</div>
</form>
</body>
You can add buttons like Previous, Next,
Play and also labels for showing the Title and Description of the Image.
- Now within the design of the page click on the smart tag of Image control and choose “Add SlideShow Page Method” that will automatically create a method with name “GetNames” which is set as slideshow service method for the slideshow extender and write the following code in that method.
public static Slide[] GetImages(string
contextKey)
{
return new Slide[]
{
new Slide("Images/img1.jpg","Title","Description"),
new Slide("Images/img2.jpg","Title","Description"),
new Slide("Images/img3.jpg","Title","Description"),
new Slide("Images/img4.jpg","Title","Description")
};
}
Run your page and see how wonderful it is, it will
show like this.
- If you want to show Next Button, Previous Button and Play Button then place three buttons and set its ID as btnNext, btnPrev, btnPlay respectively and in the SlideShow Extender properties write these properties
(PreviousButtonId=”btnPrev” PlayButtonId=”btnPlay”
NextButtonId=”btnNext”)
Now your Previous, Next and Play button will work.
No comments:
Post a Comment