now I am going to explain how to display images slideshow using Ajax Slideshowextender control from project folder images using asp.net.
SlideShow is an extender that targets image controls. You can provide it with buttons to hit previous, next and play. You can configure the slideshow to play automatically on render, allow it loop through the images in a round robin fashion and also set the interval for slide transitions. You can use a page method to supply images to the slide show or use a webservice
First add AjaxControlToolkit reference to your
application and add
<%@ Register Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"
tagPrefix="ajax"
%>
To your aspx page and design your page likes this
|
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register
Namespace="AjaxControlToolkit"
Assembly="AjaxControlToolkit"
TagPrefix="ajax"
%>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
id="Head1"
runat="server">
<title>AJAX Slidshow Extender Example</title>
<style
type="text/css">
.button
{
border:solid 1px #c0c0c0;
background-color:#D55500;
color:#ffffff;
cursor:pointer;
font-weight:bold;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<ajax:ToolkitScriptManager
ID="scriptmanager1"
runat="server">
</ajax:ToolkitScriptManager>
<div>
<table
style="border:Solid 3px #D55500; width:400px; height:400px" cellpadding="0"
cellspacing="0">
<tr
style="background-color:#D55500">
<td
style=" height:10%; color:White; font-weight:bold; font-size:larger"
align="center">
<asp:Label
ID="lblTitle"
runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Image
ID="imgslides"
runat="server"
Height="400px"
Width="400px"
/>
</td>
</tr>
<tr>
<td
align="center">
<asp:Label
ID="lblimgdesc"
runat="server"></asp:Label>
</td>
</tr>
<tr>
<td
align="center">
<asp:Button
ID="btnPrevious"
runat="server"
Text="Prev"
CssClass="button"
/>
<asp:Button
ID="btnPlay"
runat="server"
Text="Play"
CssClass="button"
/>
<asp:Button
ID="btnNext"
runat="server"
Text="Next"
CssClass="button"
/>
</td>
</tr>
</table>
<ajax:SlideShowExtender
runat="server"
AutoPlay="true"
ImageTitleLabelID="lblTitle"
ImageDescriptionLabelID="lblimgdesc" Loop="true"
NextButtonID="btnNext"
PreviousButtonID="btnPrevious"
PlayButtonID="btnPlay"
PlayButtonText="Play"
StopButtonText="Stop"
TargetControlID="imgslides" SlideShowServicePath="Slideshow.asmx"
SlideShowServiceMethod="GetSlides"></ajax:SlideShowExtender>
</div>
</form>
</body>
</html>
|
If you observe above code I have define lot of
properties to ajax:SlideShowExtender now I will explain each property
NextButtonID -
ID of the button that will allow you to see the next picture.
PlayButtonID -
ID of the button that will allow you to play/stop the slideshow.
PreviousButtonID -
ID of the button that will allow you to see the previous picture.
PlayButtonText -
The text to be shown in the play button to play the slideshow.
StopButtonText -
The text to be shown in the play button to stop the slideshow.
PlayInterval -
Interval in milliseconds between slide transitions in play mode.
ImageTitleLabelID -
ID of Label displaying current picture's title.
ImageDescriptionLabelID -
ID of Label describing current picture.
Loop - Setting this to true
will allow you to view images in a round-robin fashion.
AutoPlay - Setting this to
true will play the slideshow automatically on render.
SlideShowServicePath -
Path to the webservice that the extender will pull the images from.
SlideShowServiceMethod -
The webservice method that will be called to supply images
After that add one new Images folder to your
application and add some images to that folder here we are going to display
slideshow based on images available in Images folder.
After that add one new webservice page to your
application and give name as Slideshow.asmx because here I used the same
name in slideshowextender if you give different name change the path name of
slideshowextender also.
Here we need to remember one point that is we need to
write webmethods this format only and use exact parameters that should be same
as whatever I mentioned in web method
|
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
……
……
}
|
In this web method we have a chance to change GetSlides
method name only but return type and parametername should match
After that write the following code in webservice page
|
/// <summary>
/// Summary description for Slideshow
/// </summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called
from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Slideshow :
System.Web.Services.WebService {
public Slideshow () {
//Uncomment the following line if using
designed components
//InitializeComponent();
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public AjaxControlToolkit.Slide[] GetSlides()
{
string[] imagenames =
System.IO.Directory.GetFiles(Server.MapPath("~/Images"));
AjaxControlToolkit.Slide[]
photos = new AjaxControlToolkit.Slide[imagenames.Length];
for (int i = 0; i < imagenames.Length; i++)
{
string[] file =
imagenames[i].Split('\\');
photos[i] = new
AjaxControlToolkit.Slide("Images/" + file[file.Length - 1],
file[file.Length - 1], "");
}
return photos;
}
}
|
No comments:
Post a Comment