Slideshow Ajax Control Toolkit

 

Hoy vamos a ver como aplicar el SlideShow a un control Image para poder mostrar una galería fotográfica. El control nos permitirá pasar de una foto a otra en un sólo control de imagen por medio de los botones anterior y siguiente, además, de permitir la ejecución automática mediante el botón Ejecutar. 

1.- Primero agregamos a una página el ToolkitScriptManager arrastrándolo desde la barra de controles del Ajax Control Toolkit. Éste será el encargado de coordinar las llamadas asíncronas de Ajax

2. Agregamos los siguientes controles de la barra de controles estándar y les configuramos las propiedades ID y Text como se indica. La página debe ir quedando como se muestra en la imagen.

	Id	Text
Label	lblTitulo	Título
Imagen	imgFoto
Label	lblDescripcion	Descripción
Button	cmdPrev	<<
Button	cmdPlay	Ejecutar
Button	cmdNext	>>

3. Ahora que ya tenemos la página, empezamos con Ajax. De la barra de controles del Ajax Control Toolkit, arrastramos un control SlideShowExtender directamente a la imagen.

4. Seleccionamos el SlideShow Extender (yo lo hago en el tab de source más fácil) y en la ventana de propiedades le configuramos las siguientes propiedades.

Propiedad	Valor
AutoPlay	true
ImageDescriptionLabelID	lblDescripcion
ImageTitleLabelID	lblTitulo
Loop	True
NextButtonID	cmdNext
PlayButtonID	cmdPlay
PreviousButtonID	cmdPrev
PlayButtonText	Play o Ejecutar ;)
StopButtonText	Stop o Detener :D

5. Ahora, para agregarle el comportamiento e indicarle de donde tomar las fotos y las descripciones, tenemos que hacerlo por código mediante un método de un Web Service. Tenemos dos formas de hacerlo fácil:

• Si seguimos en la ventana de propiedes del SlideShow extender, nos fijamos que abajo de las propiedades hay una liga que dice Add SlideShow method. Le damos click y nos agrega un método Web en nuestro page behind.

• Si estamos en la vista de diseño, seleccionamos la imagen, y le damos click en el Smart Tag (la flechita) y le damos Add SlideShow method.

6.- En el code behind, nos creo un método Web GetSlides(), quitamos el código que nos puso por defualt y le ponemos el código para que quede como en el ejemplo.

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{
    return new AjaxControlToolkit.Slide[] {
        new AjaxControlToolkit.Slide("graficos/00001.jpg", "Blue Hills", "Go Blue"),
        new AjaxControlToolkit.Slide("graficos/00002.jpg", "Sunset", "Setting sun"),
        new AjaxControlToolkit.Slide("graficos/00003.jpg", "Winter", "Wintery..."),
        new AjaxControlToolkit.Slide("graficos/00004.jpg", "Sedona", "Portrait style picture")};
}

Listo, ahora solo queda grabar y probar. Cualquier duda… ahí me avisan…

Salu2 y Byte…