SlideShowExtender – Visor de Imágenes vía Ajax


Ya había escrito sobre un Slider de imágenes pero en WPF, está vez les mostraré como el control ToolKit de Ajax nos facilita la vida en aplicaciones Web, si nosotros tenemos una aplicación que va a mostrar muchas imágenes, y queremos que sea vía Ajax, para que no haga postback cada vez que cambie la imagen, esto les será muy útil.

Para empezar, primero debemos tener instalado el kit de Ajax, luego agregamos un nuevo proyecto web, en mi caso tengo visual Studio 2010 express, aunque si tienen otro no importa.

El control SlideShow, necesita como mínimo un control Image, que será donde mostrará las imágenes, si queremos, podemos agregar un label para el titulo, y un label para la descripción, también un botón para pasar a la imagen siguiente, otro para la imagen anterior, y otro para iniciar una presentación de las imágenes.

También necesitamos un web service que será el encargado de obtener las imágenes desde el disco duro, desde una base de datos, o desde la red.

Primero voy a arrastrar un control ScriptManager para el Ajax, después insertamos un control image que será el que mostrará cada imagen, tengamos en cuenta el ID que le pongamos, ya que será el que usará el control SlideShowExtender.

<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<h2>
  SliderShow Ajax!
</h2>
<asp:Image ID="imagenes" runat="server" ImageUrl="C:/misfotos/foto1.jpg"
Style="border: 1px solid black;" />

Ahora agregamos 2 label, Uno para el título y otro para la descripción de la imagen y 3 botones para interactuar con el Slide, para la foto anterior, para la foto siguiente y otro para iniciar y detener la animación, el código queda así:

<h2>
  SliderShow Ajax!
</h2>
<asp:Label runat="Server" ID="imageTitle" />
<br />
<asp:Image ID="imagenes" runat="server" ImageUrl="http://www.soho.com.co/galerias_new/mod_208/f1.jpg"
Style="border: 1px solid black;" />
<asp:Label runat="server" ID="imageDescription"> </asp:Label>
<br />
<br />
<asp:Button ID="btnPrev" Text="Anterior" runat="server" />
<asp:Button ID="btnPlay" Text="Iniciar" runat="server" />
<asp:Button ID="btnNext" Text="Siguiente" runat="server" />
 

Ahora insertamos el control SlideShow, a continuación la descripción de cada propiedad:

<asp:SlideShowExtender ID="sliderphotos" runat="server" ImageDescriptionLabelID="imageDescription"
TargetControlID="imagenes" AutoPlay="true" SlideShowServiceMethod="obtenerImagenes"
SlideShowServicePath="~/WebService.asmx" NextButtonID="btnNext" PlayButtonID="btnPlay" PreviousButtonID="btnPrev" ImageTitleLabelID="imageTitle" StopButtonText="Detener" Loop="true" PlayInterval="8000">
</asp:SlideShowExtender>

ID: es el identificador del Control

ImageDescriptionLabelID: el ID del control que va a servir para mostrar la descripción de la imagen

TargetControlID: el ID del control donde vamos a mostrar las imágenes, el control Image

AutoPlay: Indica que las animaciones se iniciaran automáticamente, cuando se cargue el control

SlideShowServiceMethod: es el nombre del método que obtiene las imágenes del disco o de la red

SlideShowServicePath: Ruta del web service que vamos a usar para obtener las imágenes

NextButtonID: el ID del control que servirá para pasar las imágenes hacia adelante en el Slide

PlayButtonID: ID del control que va a iniciar y detener la animación de las imágenes

PreviousButtonID: ID del control para devolver las imágenes en el Slide

ImageTitleLabelID: ID del label o del control que va a mostrar el título de la imagen

Loop: Indica si al finalizar la animación de todas las imágenes, vuelve a empezar

PlayInterval: el tiempo que dura cada imagen

Web Service para obtener las imágenes:

Adicionamos un web service a nuestro proyecto:

Como nota importante, para que el web service pueda ser accedido desde Javascript, debemos “descomentariar” la línea que está antes de declarar la clase WebService:

 // 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 WebService : System.Web.Services.WebService

Ahora creamos un método que tenga como requisito retornar un array de objetos Slide, donde cada Slide tiene la dirección, el título y la descripción de la imagen.

Podemos hacer lo siguiente:

public AjaxControlToolkit.Slide[] obtenerImagenes()
{
  AjaxControlToolkit.Slide[] imagenes = new AjaxControlToolkit.Slide[1];
  imagenes[0] = new AjaxControlToolkit.Slide("C:/Imagenes/photo1", "Imagen 1", "Imagen 1");
  return imagenes;
}

Se crea el array, dándole como tamaño la cantidad de imágenes que vamos a agregar, luego en cada posición agregamos la ruta de la imagen, su titulo y su descripción.

Para hacer las cosas más interesantes, voy a tomar las imágenes de la red, encontré un sitio donde podemos referenciar las imágenes y mostrarlas en nuestra aplicación, como hay tantas fotos voy a poner un límite, aunque ustedes lo pueden modificar para ver más fotos.

Además, las fotos están divididas por subcategorias, por lo tanto cada categoría tiene cierta cantidad de fotos, he creado un algoritmo para que cuando la URL no exista o de cómo resultado un error 404, se cambie de categoría y empiece el conteo de las fotos.

El método web completo es el siguiente:

public AjaxControlToolkit.Slide[] obtenerImagenes()
{
 Int32 fotoactual = 1;
 Int32 modelo = 218;
 Int32 cantidadImagenes = 50;
 String url1 = "";
 Int32 cont = 0;
 AjaxControlToolkit.Slide[] imagenes = new AjaxControlToolkit.Slide[cantidadImagenes-1];
 while (cont != cantidadImagenes)
 {
  url1 = String.Format(@"http://www.soho.com.co/galerias_new/mod_{0}/f{1}.jpg", modelo, fotoactual);
  Uri urlCheck = new Uri(url1);
  WebRequest request = WebRequest.Create(urlCheck);
  request.Timeout = 15000;
  WebResponse response;
  try
  {
    response = request.GetResponse();
    imagenes[cont] = new AjaxControlToolkit.Slide(url1, "Modelo " + modelo, "Imagen " + fotoactual);
    cont++;
    fotoactual++;
   }
   catch (Exception)
   {
     fotoactual = 1;
     modelo++;
   }
 }
 return imagenes;
}

Al ejecutarlo puede que se demore para inciar la animación, esto se debe al número de fotos que vayamos a mostrar, pero luego de que carguen todas solo nos resta sentarnos, comprar unas ricas cervezas y a disfrutar:

Ahora ya sabemos cómo crear un buen Slide para mostrar las fotos del paseo de vacaciones, la rumba u otras cosillas.

Podemos con el Ajax Control Toolkit, dejar que las imágenes se vean en una ventana Modal, o adicionar un control de Rating para votar por las imágenes.

Las fotos son propiedad de SOHO.

El código en Visual Studio 2010 Express Aquí.

10 pensamientos en “SlideShowExtender – Visor de Imágenes vía Ajax

  1. Hola como va te comento que estuve viendo tu blog y la verdad me pareció genial, tiene muy buenos artículos y cosas interesantes sobre XNA que no hay mucho en la web, aprovecho ya que en nuestro blog estamos enfocandonos más en lo que es XNA y nos gustaría hacer una puqueña comunidad de amigos de éste entorno, así que nos gustaría saber si te interesaria un intercambio de links y sí estarías de acuerdo en que algún día pueda publicar alguno de tus post en mi blog con la fuente a esta dirección.
    Espero tu respuesta.
    Saludos

    El link del blog es: http://argade.blogspot.com/

  2. Pingback: El Blog en números del 2010 « Escarbando Código

  3. Me gustaria que colocaras el codigo para VB ya que estoy intentando hacerlo en mi pagina pero esta desarrollada en vb y hay algunas lines de codigo que no puedo pasar a dicho lenguaje

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s