Hi Friend,Today we will learn "How to use SlideShowExtender control on asp.net website". The SlideShowExtender enables you to create a slideshow of images. This is helpful to allow you to add buttons to perform some actions ,such as Previous ,play and Next. You can show your slides automatically or manually on the page .The images included in the slideshow are added to the extender control using a web service or a page method.
In this control , you can show your images automatically or with the help of button's clicks on the page. For this control you have to required AjaxControlKit . So you can download and install it from Here.
There are some important properties of this control as given below:-
There are some steps to implement this whole concepts as given below:-In this control , you can show your images automatically or with the help of button's clicks on the page. For this control you have to required AjaxControlKit . So you can download and install it from Here.
There are some important properties of this control as given below:-
- TargetControl ID :-It sets the ID of image control to which the extender control is attached.
- SlideShowServicePath :-It sets the path of the web service that the extender to extract images.
- SlideShowServiceMethod :- It sets the web service method that is called to provide the images for the slideshow.
- ContextKey:-It helpful to specify the user/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath.
- UseContextKey :- It enables once the ContextKey property is set.This property specifies whether you want to use the ContextKey property or not.
- PreviousButtonID:-It sets the id of the button control that is used to display the previous image in the slideshow.
- PlayButtonID:- It sets the id of button control that is used to play and stop slideshow.
- NextButtonID:- It sets the id of button control that is used to display the Next image in slideshow.
- PlayButtonText:- It sets the text that is displayed on the play button to play the slideshow.
- StopButtonText:- It sets the text that is displayed in the play button to stop the slide.
- PlayInterval:- It sets the interval time between two images when the slideshow plays.
- Loop :- It provides a loop to display the all images in image control.
- AutoPlay:-It determines whether or not the slideshow starts playing when it is rendered for the first time.
- ImageTitleLabelID:- It sets the ID of the Label control that display the title of the current page.
- ImageDescriptionLabelID :- It sets the ID of the Label Control that display the description of the current page.
Step 1 :- First open your visual studio --> File --> New-->Website --> Select ASP.NET Empty website -->OK -->Open Solution Explorer --> Add a New Page (Default.aspx)--> Drag and drop ToolKitScriptmanager, Labels ,UpdatePanel ,Image and Button controls as shown below:-
Step 2 :- Now Open Source --> Drag and drop SlideShowExtender Control as shown in below image.
Step 5 :- You can see all Source codes from below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] Get_Images()
{
return new AjaxControlToolkit.Slide[]
{
new AjaxControlToolkit.Slide("images/DSCN0967.JPG","image1", "First-Screen"),
new AjaxControlToolkit.Slide("images/DSCN0973.JPG","Image2", "Second Screen"),
new AjaxControlToolkit.Slide("images/Image0192.jpg","Image3", "Third screen"),
new AjaxControlToolkit.Slide("images/Image0202.jpg","Image4", "Fourth_Screen"),
new AjaxControlToolkit.Slide("images/Image0199.jpg","Image5", "Fifth Screen")
};
}
</script>
<style type="text/css">
.style1
{
font-size: large;
color: #FF0066;
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: left">
<br class="style1" />
<span class="style1">How to Use Slider Show control on asp.net website</span>:-<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Label ID="Label1" runat="server" Text="Label"
style="font-weight: 700; color: #FF3399; font-size: large; background-color: #FFFFCC;"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"
style="font-weight: 700; color: #FF3399; font-size: large; background-color: #FFFF99;"></asp:Label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<asp:Image ID="Image1" runat="server" Height="256px" Width="424px" />
<br />
<asp:Button ID="Button1" runat="server" Height="30px"
style="font-weight: 700; background-color: #6699FF" Text="Previous"
Width="97px" />
<asp:Button ID="Button2" runat="server" Height="30px"
style="font-weight: 700; background-color: #6699FF" Text="Play" Width="97px" />
<asp:Button ID="Button3" runat="server" Height="30px"
style="font-weight: 700; background-color: #6699FF" Text="Next" Width="97px" />
<br />
<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="Image1"
AutoPlay="true" Loop="true" PreviousButtonID="Button1"
PlayButtonID="Button2" PlayInterval ="2600" PlayButtonText="Play" StopButtonText="Pause"
NextButtonID="Button3" SlideShowServiceMethod="Get_Images"
ImageTitleLabelID="Label1" ImageDescriptionLabelID="Label2">
</asp:SlideShowExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] Get_Images()
{
return new AjaxControlToolkit.Slide[]
{
new AjaxControlToolkit.Slide("images/DSCN0967.JPG","image1", "First-Screen"),
new AjaxControlToolkit.Slide("images/DSCN0973.JPG","Image2", "Second Screen"),
new AjaxControlToolkit.Slide("images/Image0192.jpg","Image3", "Third screen"),
new AjaxControlToolkit.Slide("images/Image0202.jpg","Image4", "Fourth_Screen"),
new AjaxControlToolkit.Slide("images/Image0199.jpg","Image5", "Fifth Screen")
};
}
</script>
Note :- You can easily use this slideshow control on your Existing website.
For More...
- How to create registration and login page in asp.net website
- oops concepts in C#
- Learn SQL Server With Real life example
- Learn LINQ concepts Completely
- Learn WebServices completely with examples
- Learn WCF with Examples
Download
0 comments:
Post a Comment