[jQuery] Galería de imágenes dinámica

Posted on


Hola a todos, existen miles de plugins para mostrar de una manera muy agradable una lista de imágenes, pero todos ellos tienen un pequeño problema y es que las imágenes que se muestran son fijas, entonces si se agregan o eliminan imágenes tendríamos que ir al HTML y modificarlo, lo cual no es la mejor opción.

Conociendo el problema anterior, vamos a crear una galería de imágenes que tome como fuente de datos las imágenes existente en una carpeta de nuestro sitio, así cuando se elimine o adicione una imagen nuestra aplicación seguirá funcionando sin problemas.

Ahora manos a la obra:

1. Vamos a utilizar un sencillo plugin de jQuery llamado jQuery Easy Slider, el cual es bonito y bastante sencillo de utilizar, luego de descargarlo referenciamos la librería core de jQuery, el plugin y la hoja de estilos:

   1:  <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
   2:  <script src="scripts/easySlider1.7.js" type="text/javascript"></script>
   3:  <link href="Style.css" rel="stylesheet" type="text/css" />

2. Creamos una carpeta en la cual vamos a tener las imágenes a mostrar, y le agregamos algunas; para el ejemplo la carpeta se llamará imagesUp:

Imagen4

3. Ahora, vamos a crear un webmethod el cual va a realizar la lectura de la carpeta y devolverá las imágenes, este webmethod va a devolver una lista genérica de tipo Imagenes, donde Imagenes es una clase con una propiedad que va a tener la ruta de la imágen:

   1:  'Definición Clase Imagenes
   2:  Public Class Imagenes
   3:      Public Property imagen As String
   4:      Public Sub New(ByVal sImagen As String)
   5:          imagen = sImagen
   6:      End Sub
   7:  End Class
   8:  'Definición WebMethod
   9:  <WebMethod()>
  10:  Public Shared Function Galeria() As List(Of Imagenes)
  11:      Dim listImagenes As New List(Of Imagenes)()
  13:      Dim dir As New System.IO.DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory & "imagesUp")
  14:      Dim fileList() As FileInfo = dir.GetFiles("*.*", SearchOption.AllDirectories)
  15:      Dim fileQuery = From file In fileList
  16:                      Where file.Extension = ".jpg"
  17:                      Order By file.Name
  18:                      Select file
  19:   
  20:      For Each file In fileQuery
  21:          listImagenes.Add(New Imagenes("imagesUp/" & file.Name))
  22:      Next
  23:   
  24:      Return listImagenes
  25:  End Function

Como se puede observar, lo que hace el webmethod es hacer una consulta a la carpeta imagesUp, lo importante acá es que el método devuelve un lista genérica de tipo Imagenes, que fue la clase que creamos.

4. Creamos un HTML sencillo que tiene un div y un elemento ul para contener las imágenes:

   1:  <div id="slider" class="slider">
   2:      <ul id="ulImages"></ul>
   3:  </div>

5. Llego el momento de nuestro código jQuery:

   1:  var iniciarEfecto;
   2:  $(function () {
   3:      var galeria = function () {
   4:          $("#ulImages").html('');
   5:          if ($("#controls").length > 0) {
   6:              $("#controls").html('');
   7:          }
   8:          $.ajax({
   9:              url: 'Home.aspx/Galeria',
  10:              dataType: 'json',
  11:              type: "POST",
  12:              contentType: "application/json; charset=utf-8",
  13:              error: function (obj, error) {
  14:                  alert('Se ha producido un error al traer las imágenes’);
  15:              },
  16:              success: CrearGaleria
  17:          });
  18:      }
  19:      galeria();
  20:      iniciarEfecto = function () {
  21:          $("#slider").easySlider({
  22:              auto: true,
  23:              continuous: true,
  24:              numeric: true,
  25:              pause: 1000
  26:          });
  27:      }
  28:  })
  29:  function CrearGaleria(data) {
  30:      var elem;
  31:      $.each(data.d, function (key, val) {
  32:          elem = "<li><a><img src=" + val.imagen + " /></a></li>";
  33:          $("#ulImages").append(elem);
  34:      })
  35:      iniciarEfecto();
  36:  }

Bueno un poco largo el código peor vamos a revisarlo:

Línea 1: Creación de variable.

Línea 2: Validamos que la página este lista.

Línea 3 – 18: A una variable llamada galeria le asignamos una función, dicha función lo que hace es: a) En la línea 4 eliminamos el contenido del elemento con id ulImages, es decir si existen ya imágenes en la lista las eliminamos. b) De la línea 5 – 7 verificamos si existe un elemento con id igual a controls, y si existe limpiamos su contenido, la validación la realizamos porque la primera vez que cargamos la página ese elemento no existe. c) De las líneas 8 – 17 hacemos un llamado ajax a nuestro webmethod el cual devuelve las imágenes (en un próximo post veremos como se trabaja con $.ajax), lo importante acá es que en el parámetro success llamamos la función CrearGaleria que será la encargada de generar todo el HTML con las imágenes.

Línea 19: Llamamos la variable galeria, y este caso se ejecuta la función a ella relacionada.

Línea 21 – 28: A la variable iniciarEfecto le asignamos una función que contiene la implementación del plugin (acá pueden ver las opciones del plugin).

Linea 29 – 36: Creamos la función CrearGaleria, dicha función recibe como parámetro los datos devueltos por el webmethod, pero que hace esta función? Primero se define una variable (línea 30) la cual va a tener el HTML de cada imagen, luego con $.each recorremos todos los ítems devueltos, ahora dentro del ciclo a la variable elem le asignamos el HTML correspondiente el cual es un elemento de lista (li), un elemento tipo link (a) y un elemento imágen (img) al cuál en la propiedad src le asignamos la url de nuestra imagen utilizando la propiedad imagen de la clase creada., y finalmente llamamos la variable iniciarEfecto que es la que contiene la implementación del plugin.

Finalmente la galería se verá así:

Imagen1

Espero les sea de utilidad, les dejo el código del ejemplo:

Descarga ejemplo en VB!

Descarga ejemplo en C#!

32 comentarios sobre “[jQuery] Galería de imágenes dinámica

    Felipe escribió:
    09/23/2011 en 23:32

    hola…..disculpa las molestia…..la otra vez pregunte por esto y me diste tu idea……te comento…..implemente tu idea en mi proyecto y me funciona el plugin todo lo demas…pero no me muestra las fotos que tengo en la base de datos sql server….tengo el procedimiento y todo…y el resultado es que funciona el plugin en su “totalidad” pero no me muestra las fotos…me podrias ayudar por favor

      Julio Avellaneda respondido:
      09/30/2011 en 22:46

      hola, ok dejame la otra semana le hecho un ojo.. he estado lleno de trabajo

    Andres escribió:
    06/25/2012 en 14:48

    Brother buenas tardes por que el metodo que trae las fotos debe ser estatico? y por que si uno lo quita genera un erro?

      Julio Avellaneda respondido:
      06/25/2012 en 14:52

      Andres, debe ser estatico para que pueda ser llamado desde el cliente, cuando lo quita genera error pq el método ya no es encontrado desde el cliente, pillese este post: https://julitogtu.wordpress.com/2011/07/04/asp-net-y-pagemethods/

        Andres escribió:
        06/25/2012 en 14:57

        a bien bueno brother es que esta funcionalidad me pareció muy buena para algo que estoy haciendo entonces lo implemente solo que traigo las imagines de la db entonces para esto tengo un método donde paso unos parámetros que mando por la url pero pues en web método no me los deja recibir por que me sale esto an object reference is required for the nonstatic field method or property tengo algo asi:

        [WebMethod()]
        public static List Galeria()
        {
        var lstImagenes = new List();

        var url = ConfigurationManager.AppSettings.Get(“UrlImagenes”);

        var contexto = new CmEntidades();

        var lstDocumento = (from item in contexto.OrdenFoto_Get_ByOrdenByTipo(parametro, “D”)
        select item).ToList();

        foreach (var item in lstDocumento)
        {
        lstImagenes.Add(new EImagenes(url + item.Directorio.Replace(“\\”, “/”) + “/” + item.Foto));
        }

        return lstImagenes;
        }

        la variable parámetro es donde estoy sufirendo no se si se pueda hacer algo ahí deferente alguna idea brother

        Gracias por la ayuda

        Julio Avellaneda respondido:
        06/25/2012 en 15:00

        Dentro de un método estatico solo es posible acceder a variables estaticas, en ese caso declare lo q necesite dentro de ese metodo estatico

        Andres escribió:
        06/25/2012 en 15:13

        si en eso estoy claro pero es que miparametro lo estoy recibiendo asi:

        if(!string.IsNullOrEmpty(Request.QueryString[“orden”]))
        {
        var orden = Convert.ToInt64(Request.QueryString[“orden”]).ToString();
        }

        osea dentro del método estático no puedo ver la variable orden para asignársela a la variable parámetro

        Julio Avellaneda respondido:
        06/25/2012 en 15:29

        pero esa parte de cpdigo la tiene detro del codigo estatico?? sino es asi deberia estar alli dentro

      Andres escribió:
      06/25/2012 en 15:37

      Brother este es mi código completo para que me entienda mejor:

      #region Propiedades

      public Int64 orden
      {
      get { return Convert.ToInt64(this.ViewState[“orden”]); }
      set { Convert.ToInt64(this.ViewState[“orden”] = value); }
      }

      #endregion

      protected void Page_Load(object sender, EventArgs e)
      {
      if(!IsPostBack)
      {
      if(!string.IsNullOrEmpty(Request.QueryString[“orden”]))
      {
      orden = Convert.ToInt64(Request.QueryString[“orden”]);

      }
      }
      }

      [WebMethod()]
      public static List Galeria()
      {

      var lstImagenes = new List();

      var url = ConfigurationManager.AppSettings.Get(“UrlImagenes”);

      var contexto = new CmEntidades();

      var lstDocumento = (from item in contexto.OrdenFoto_Get_ByOrdenByTipo(orden, “D”)
      select item).ToList();

      foreach (var item in lstDocumento)
      {
      lstImagenes.Add(new EImagenes(url + item.Directorio.Replace(“\\”, “/”) + “/” + item.Foto));
      }

      return lstImagenes;
      }

        Julio Avellaneda respondido:
        06/25/2012 en 15:42

        ok, si el problema es q la prpiedad orden esta declarada fuera del metodo y no es estatica, loi q debe hacer enel metodo estatico es volver a leer el querystring.

        Me cuenta, saludos!

      Andres escribió:
      06/25/2012 en 15:59

      brother luego esto orden = Convert.ToInt64(Request.QueryString[“orden”]); solo se puede leer en pageload de la pagina? por que si lo pongo dentro del método igual me sale el error

        Julio Avellaneda respondido:
        06/25/2012 en 16:01

        No, es lo puede leer donde quiera, supongo que el error lo obtiene donde dice Request.QueryString[“orden”]? q error le sale??

        Andres escribió:
        06/25/2012 en 16:06

        sale este jejeje object reference is required for the nonstatic field method or property pero ya lo solucione brother de otra forma solo declarando una variable estática

        private static Int64 orden;

        public static long Orden
        {
        get { return orden; }
        set { orden = value; }
        }

        y va tocar extender el post de esto con parámetros muchas Gracias Brother usted como siempre tan colaborador y poniendo buenas vainas para aprender

        Julio Avellaneda respondido:
        06/25/2012 en 16:08

        Que bueno, recuerde que el metodo tambien le peude recibir parametros q le puede enviar desde el cliente.

        Saludos!

    Andres escribió:
    06/25/2012 en 16:14

    Listo Brother Gracias por la ayuda

    Ignacio escribió:
    07/23/2012 en 11:01

    en la llamada $ajax
    esta linea
    url: ‘Home.aspx/Galeria’,
    a que hace referencia Galeria ????

      Julio Avellaneda respondido:
      07/23/2012 en 12:28

      Hola, esa linea lo que hacer es llamar el WebMethod que esta en el codebehind: Public Shared Function Galeria() As List(Of Imagenes)
      Saludos!

        Ignacio escribió:
        07/23/2012 en 14:37

        ahhh graciaasssss que lo estoy probando y no me funciona jajaja sale todo menos las imagenes no las muestra😦 xd

        Julio Avellaneda respondido:
        07/26/2012 en 13:09

        ok, cualquier cosa con gusto, ten presente que debe estar decorado con el atributo webmethod

        Saludos

    Caro escribió:
    09/04/2012 en 10:49

    Hola!! me gustaría que compartieran el código mostrando las imágenes conectando a la base de datos.

      Julio Avellaneda respondido:
      09/07/2012 en 08:08

      Hola Caro, deberías combinar mi ejemplo con este post http://ltuttini.blogspot.com/2010/03/aspnet-guardar-imagen-base-de-datos.html dekl master Leandro Tuttini, si no te funciona por favor avisame y te ayudo con un ejemplo completo, quedo pendiente.

      Saludos!

        Caro escribió:
        09/07/2012 en 15:54

        Estimado Julio!!!

        Te agradecería que publicaras un ejemplo completo, para tener una mejor base de conocimiento, pues tu lo haces muy fácil.

        Saludos,

        Caro

        Julio Avellaneda respondido:
        09/13/2012 en 09:03

        Hola Caro, perfecto dejame en estos días subo el ejemplo.. saludos

    Leccy escribió:
    03/30/2013 en 13:22

    Hola me gusto tu ejemplo, y me salio igual en un nuevo proyecto, pero si lo quiero poner en una pagina que ya tengo hecha no me sale, quiero colocarlo en la parte superior y me vota error.

      Julio Avellaneda respondido:
      04/09/2013 en 12:34

      Hola Leccy, que error te sale? tienes algo raro en la página?

      Saludos.

    pacpac escribió:
    10/22/2013 en 12:16

    no funciona, siempre marca error de carga de imagenes, y todo esta igual

    Jhed escribió:
    11/19/2013 en 08:56

    Una consulta en mi caso, si quiero ponerlo en el Master Pages, en ASP.net, el WebMethod lo estoy poniendo en codeBi, pero sale un error de que no puede mostarr la imagen, me parece que no lee lo sigueinte: url: ‘/Galeria’,

    Marco Antonio escribió:
    05/04/2014 en 20:57

    por mas que intento las imagenes me salen de un tamaño enorme ya probe reduciendo el tamaño de las imagenes alguna ayuda?

      Julio Avellaneda respondido:
      05/05/2014 en 18:38

      Hola Marco, has revisado los estilos? Firebug es.una buena opción para hacerlo, así podrias ver exactamente si es un problema de css.

      Saludos

    Marco Antonio escribió:
    05/05/2014 en 21:52

    Muchas gracias por tu ejemplo he solucionado con css y ahora en la imagen no puedo ponerte algún tipo de descripción asi como este ejemplo? Gracias q buen sitio! (Y)

    Marco Antonio escribió:
    05/08/2014 en 22:58

    lo he solucionado implemente el slider de ajax gracias!

Responder

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