Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net ajax slideshow extender example/sample

Mar 22, 2011
Introduction:

Here I will explain how to show images slideshow using Ajax Slideshowextender control from root folder in asp.net

Description:

Previously I explained
how to insert images into our project folder and display the images from folder in gridview based on images path in database using asp.net check this link here
After saving images into folder 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;
}
}
Demo

Download sample code attached


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

39 comments :

Anonymous said...

its so nice

Anonymous said...

great work ya...nice

Anonymous said...

and asp.net vb?

Anonymous said...

i have a gallery which contain more than one album.. whihc stores images of all album in same folder... how can i use slideshow album wise...

Anonymous said...

Thanks man. very helpful.

Anonymous said...

Dear Suresh,
I this tutorial extremely useful, it is the one that I was looking for hours. But I need to modify it a bit like follow:
I don't need a play button to use it to play but to get the full link of image and set for example to and textbox!! If you could help me on that it will be highly appreciated.
However thanks a lot for sharing.
Armend

Joesy said...

how can I make it that when I click on an image, the image will be shown as popup?

Suresh Dasari said...

@Josey..
check these posts
show image in popup whenever click on image
Image slideshow gallery in asp.net

Anonymous said...

iTS rEALLY SUPERBB YAAR.. THNKS

Anonymous said...

nice work dude. Appriciate

Surendrasinh Rathod said...

Thanks dear its very usefull to me...because i were face problems to show images using below code
AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[3];
slides[0] = new AjaxControlToolkit.Slide("8.jpg", "Image1", "house");
slides[1] = new AjaxControlToolkit.Slide("9.jpg", "Image2", "seaside");
slides[2] = new AjaxControlToolkit.Slide("img05.jpg", "Image3", "car");
return (slides);

but after apply ur code my problem is solved..now i enjoy Slideshow in my Testing Website..

poonam said...

Hi
nice coding but this is one time slideshow for images but if i want to do more that one time with different images then what to do and how to save this slideshow in our computer

Respect gandhi said...

Done Same code... but nothing happen...
I write code in contentPlaceHolder...
please help me with it...
thanks in advance...

Anonymous said...

Dear Suresh,
Nice tutorial very useful.
But how can i apply effects to images that means Image will slide from left to right or vice versa.
Please Help !!!!!!!!!!!!!

rajesh said...

Hi,

I have developed an web application which display top blogs added by the user to that website.
I am displaying data in gridview. i have given pagination to gridview.
Now i want that "if i scroll down the page, then gridview automatically expands.
Ex: Initially it contains 10 records, when i scroll down page at bottom it should show me next 10(Total 20) record, again when i scroll down it should again show me next 10(Total 30) records without refreshing the page.
This is just like facebook, when you scroll down the page it automatically shows you older posts.

Anonymous said...

how to prevent click previous button when first image is displaying

Dipti's Life said...

its not working in my case i hv done with same instructions...

Anonymous said...

How To set a hyperlink on the image?

Anonymous said...

hi Suresh ..,

This is Nice. and i will develop a Photo Gallery for my existing site .. My Requirement is i have a moster page div tag ie Gallery .. and i will create a special folder ie Admin .Then i will give access to Admin to upload a image file to DB from admin access page and it will show or Reflect to total all other pages .. how to write a code?

Anonymous said...

Hi Suresh this is very nice. may i know how to implement the same with ashx file my concept is images stored in database as binary format and i need to retrive those images and presented in a ajax slide extender control is it possible to do..?

Alfredo S said...

Hello, I am trying to implement this, but in this line: string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/Images"));
We have the pictures ina virtual directory, so I read from the database something like this "http://myhost/mypirctures/image1.jpg" and so on. How can I do it???

Anonymous said...

sir, vb.code pls..

Unknown said...

that is very helpful

Unknown said...

Dear Suresh thank you. Your code is very helpful for the asp.net lovers like me.

Anonymous said...

Thank you very much.

Anonymous said...

Hi, im not able to see the images.. i gave the folder name in the code :(

Anonymous said...

lukin good suresh..hahahah :) :)

Anonymous said...

I want to pass the location of image from database to slideshowextender (getslide() method)..Please help friend....

Thanks..

Anonymous said...

I want to pass the location of image from database to slideshowextender (getslide() method)..Please help friend....

Thanks..

hermes said...

Helpful advice in Ajax Slideshowextender control. Thanks!

shashi kiran said...

Anna.... nuvvu manishivi kaadey maa paalita devunivey..

Anonymous said...

Hi

Well how come we implement the same thing when we have to consume the web-service you created above from other website ?? i am facing many problems ..

anyone tried so ?? servicemappath is a headache issue for me ?? help meeee

Anonymous said...

if we want to click on the individual slideshow image and it must redirect to another page ....is there any solution for it

Unknown said...

thanks its very useful

Unknown said...
This comment has been removed by the author.
Anonymous said...

is there any way to display contents of database as slide show like one record at time from database in vb.net

Unknown said...

dear suresh

i put your html code in master page...

but this didnt work...that is only the designing of table with three buttons and labels are show only.when click play button it only changed to stop.but images not shows and remaining button did'nt work. what is my problem..

please help me immediately bcz i should submit my project within one day...

web service code is

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;


///
/// Summary description for Slideshow
///
[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("~/SlideImages"));
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("~/SlideImages/" + file[file.Length - 1], file[file.Length - 1], "");


}
return photos;
}



}

Unknown said...

Hello Suresh,
This very uf and thank u....

Anonymous said...

how to bind images from xml file in Asp.net ajax slideshow extender.Plz help as soon as possible

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.