[ASP.NET MVC] Mostrar imágenes + jQueryLightbox mediante modelo XML

Trabajando con las distintas opciones que ofrece el Modelo de las aplicaciones MVC, vamos a ver como implementar un modelo que nos permita leer la información referente a un conjunto de imágenes definidas en un archivo XML, y mostrarlas mediante una vista específica a la que, además, aplicaremos el efecto jQueryLightbox.

Inicialmente partimos de un proyecto de tipo ASP.NET MVC 2 Web Application llamado ImagesExample, y lo primero que hacemos es añadir las imágenes que queremos mostrar y el archivo que contiene los metadatos de las mismas. Para ello creamos una carpeta dentro de nuestro proyecto que se llamará Imagenes. En ella añadimos, las imágenes deseadas y un nuevo elemento de tipo XML file, llamado CaratulasMetaData, que en nuestro caso, contendrá el siguiente código de definición:

  1. <?xml version=1.0 encoding=utf-8?>
  2. <images>
  3.   <image>
  4.     <filename>Bunbury.jpg</filename>
  5.     <titulo>Las Consecuencias</titulo>
  6.     <cantante>Bunbury</cantante>
  7.     <año>2010</año>
  8.   </image>
  9.   <image>
  10.     <filename>MonicaNaranjo.jpg</filename>
  11.     <titulo>Adagio</titulo>
  12.     <cantante>Monica Naranjo</cantante>
  13.     <año>2009</año>
  14.   </image>
  15.   <image>
  16.     <filename>Rosario.jpg</filename>
  17.     <titulo>Cuentame</titulo>
  18.     <cantante>Rosario Flores</cantante>
  19.     <año>2009</año>
  20.   </image>
  21.   <image>
  22.     <filename>Shakira.jpg</filename>
  23.     <titulo>Loba</titulo>
  24.     <cantante>Shakira</cantante>
  25.     <año>2008</año>
  26.   </image>
  27. </images>

En dicho código definimos una lista de imágenes <images>, donde cada imagen corresponde con un elemento <image>, y cuyas propiedades son las siguientes:

  • filename (nombre de la imagen)
  • titulo
  • cantante
  • año

A continuación pasamos a definir el modelo que nos permitirá interactuar con nuestros datos. Dentro de nuestra carpeta Models, añadimos 2 clases: una llamada Image, que utilizaremos para definir nuestro objeto, y otra llamada ImageModel que utilizaremos para interactuar con dicho objeto.

La clase Image contendrá el siguiente código:

  1. public class Image
  2.     {
  3.         public Image(string filename, string titulo, string cantante, string año)
  4.         {
  5.             Archivo = filename;
  6.             Album = titulo;
  7.             Cantante = cantante;
  8.             Año = año;
  9.  
  10.         }
  11.  
  12.         public string Archivo { get; set; }
  13.         public string Album { get; set; }
  14.         public string Cantante { get; set; }
  15.         public string Año { get; set; }
  16.     }

 

 

 

 

La clase ImageModel contendrá el siguiente código:

  1. public class ImageModel : List<Image>
  2.     {
  3.         public ImageModel()
  4.         {
  5.  
  6.             string directoryOfImage = HttpContext.Current.Server.MapPath(“~/Imagenes/”);
  7.             XDocument imageData = XDocument.Load(directoryOfImage + @”/CaratulasMetaData.xml”);
  8.             var images = from image in imageData.Descendants(“image”) select new Image(image.Element(“filename”).Value, image.Element(“titulo”).Value, image.Element(“cantante”).Value,image.Element(“año”).Value);
  9.             this.AddRange(images.ToList<Image>());
  10.         }
  11.     }

Por último dentro de nuestro controlador HomeController, añadimos un resultado de acción llamado Music, a través del cual pasaremos a la vista el modelo que queremos mostrar:

  1. public ActionResult Music()
  2.         {
  3.             ImageModel cds = new ImageModel();
  4.             return View(cds);
  5.         }

A continuación creamos una vista vacía, que vamos a personalizar para que nos muestre los datos de nuestro modelo de la forma deseada.  Para ello hacemos clic con en botón derecho sobre el resultado de acción Music y seleccionamos Add View, creando una vista tal y como se observa en la siguiente imagen:

image 

En dicha vista, vamos a mostrar cada una de las imágenes y sus propiedades dentro de una tabla accediendo a los distintos valores a través de nuestro modelo. Para ello utilizamos el siguiente código:

  1.   <% foreach (var image in ViewData.Model) { %>
  2.  
  3. <table>
  4.     <tr>
  5.         <td rowspan=”3″>
  6.             <img alt=”” src=”/Imagenes/<%= image.Archivo %> height=”100″ width=”100″ />
  7.         </td>
  8.             
  9.         <td>
  10.             <b>Disco:</b> <%= image.Album %>
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.             <td>
  15.             <b>Cantante:</b> <%= image.Cantante%>
  16.         </td>
  17.     </tr>
  18.     <tr>
  19.         <td>
  20.             <b>Año:</b> <%= image.Año %>
  21.         </td>
  22.     </tr>          
  23. </table>
  24.  
  25. <% }%>

 

Si compilamos, vemos que obtenemos una lista estática de imágenes con sus propiedades :

image

 

Por último vamos a aplicar el efecto JqueryLightBox a dichas imágenes, de forma que cuando hagamos clic sobre cada una de ellas podamos verlas en tamaño real, y navegar por ellas. Para poder aplicar este efecto descargamos los archivos necesarios que podemos encontrar en la siguiente dirección:

http://leandrovieira.com/projects/jquery/lightbox/

Introducimos cada archivo en la carpeta correspondiente:

  • Dentro de la carpeta Scripts, añadimos el archivo jquery.lightbox-0.5.js,
  • Dentro de la carpeta Contenidos añadimos las imágenes que nos permiten navegar por la aplicación: lightbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif, lightbox-ico-loading.gif
  • Creamos una carpeta llamada css, donde añadiremos el archivo referente a los estilos jquery.lightbox-0.5.css

A continuación debemos referenciar, tanto el archivo donde se encuentra el código Javascript que vamos a utilizar, como el de estilo que vamos a aplicar. Por lo que vamos a nuestra página maestra Views > Shared> Site.Master, y dentro de la cabecera <head> añadimos el siguiente código:

 

  1. <script src=”/Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
  2. <script src=”/Scripts/jquery.lightbox-0.5.js” type=”text/javascript”></script>
  3. <link href=”/css/jquery.lightbox-0.5.css” rel=”stylesheet” type=”text/css” />

 

Por último vamos a llamar a la función lightbox desde la página en la que queremos aplicar dicho efecto, que en nuestro caso es Music.aspx. Para ello añadimos el siguiente código:

  1. <script type=”text/javascript”>
  2.         $(function ImageLB() {
  3.             $(‘#gallery a’).lightBox({
  4.                 imageLoading: ‘/Content/lightbox-ico-loading.gif’,
  5.                 imageBtnClose: ‘/Content/lightbox-btn-close.gif’,
  6.                 imageBtnPrev: ‘/Content/lightbox-btn-prev.gif’,
  7.                 imageBtnNext: ‘/Content/lightbox-btn-next.gif’,
  8.                 txtImage: ‘Álbum’,
  9.                 txtOf: ‘de’
  10.             });
  11.         });
  12.     </script>

Y modificamos la parte de nuestra vista en la que se cargaban las imágenes, para que dicho efecto funcione.

  1. Añadimos las imágenes que obtenemos de nuestro modelo dentro de un <div> cuyo id  sea gallery, ya que en el código javascript estamos indicando que vamos a aplicar este efecto a un elemento de tipo hipervínculo (<a>) cuyo identificador es gallery.
  2. Y añadimos una url (href) a nuestro hipervínculo, que será la dirección relativa en la que se encuentran nuestras imágenes dentro del sitio.

Teniendo en cuenta todo lo anterior, el código resultante será el siguiente:

  1. <div id=”gallery”>
  2.                 <a href=”/Imagenes/<%= image.Archivo %>“><img alt=”” src=”/Imagenes/<%= image.Archivo %> height=”100″ width=”100″ /></a>
  3.             </div>

De forma que si compilamos nuestra aplicación y accedemos a la página de música, que en nuestro caso, tal y como la hemos la hemos definido a través del controlador y la acción es: http://localhost:52361/Home/Music vemos que al hacer clic sobre cualquiera de nuestras imágenes se aplica el efecto lightbox deseado

image

 

 

Así que de forma sencilla, hemos conseguido que la aplicación presente una interfaz de usuario enriquecida y, por lo tanto sea más atractiva visualmente para el usuario.Y esto es todo por hoy 😉

Descargar el código aquí

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *