Ajax Control Toolkit Example:SlideShowExtender
Today we will learn how to use Ajax SlideShowExtender using webservice,jquery to show in popup.
1 step : Drag n drop Ajax SlideShowExtender ,Add asp image tag in default.aspx page.
In <body> tag.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table style="border:Solid 3px #D55500; width:400px; height:400px" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="width:660; height:320;">
<asp:Image ID="imgslides" runat="server" />
</td>
</tr>
<tr>
<td align="center" class="style1">
<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>
<asp:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" Loop="true" NextButtonID="btnNext" PreviousButtonID="btnPrevious" PlayButtonID="btnPlay" PlayButtonText="Play" StopButtonText="Stop"
TargetControlID="imgslides" SlideShowServicePath="~/Slideshow.asmx" SlideShowServiceMethod="GetSlides" >
</asp:SlideShowExtender
2 step: Create webservice ->Right click on Solution Explorer Add new item webservice you will find webservice.asmx file in root and .cs file in appcode folder open webservice.cs file
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using AjaxControlToolkit;
[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 {
DataSet ds = new DataSet();
string[] imagenames = { };
AjaxControlToolkit.Slide[] photos;
public Slideshow () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod(EnableSession = true)]
public AjaxControlToolkit.Slide[] GetSlides()
{
ds = objExbt.getimages();// get all images in dataset
try
{
if (ds.Tables.Count > 0)
{
photos = new AjaxControlToolkit.Slide[ds.Tables[0].Rows.Count];
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
photos[i] = new AjaxControlToolkit.Slide(("images/" + ds.Tables[0].Rows[i]["imgpath"]).ToString().Replace("\\", "/"), "", "");
}
}
return photos;
}
catch (Exception)
{
throw;
}
finally
{
}
}
output:
3 step: To open SlideShowExtender in popup add default2.apx
<head> tag
Here I have use Colorbox Download.
<link href="ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
<script src="ColorBox/jquery.colorbox.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$(".example7").colorbox({ iframe: true, innerWidth: 700, innerHeight: 420 });
});
</script>
<body> tag
Create anchor tag to open default page in popup
<a class='example7' id="link" href="Default.aspx"> </a>
enjoy....
enjoy....
