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:


<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="scripts/easySlider1.7.js" type="text/javascript"></script>
<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:


'Definición Clase Imagenes
Public Class Imagenes
    Public Property imagen As String

    Public Sub New(ByVal sImagen As String)
        imagen = sImagen
    End Sub

End Class

'Definición WebMethod

<WebMethod()>
Public Shared Function Galeria() As List(Of Imagenes)
    Dim listImagenes As New List(Of Imagenes)()
    Dim dir As New System.IO.DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory & "imagesUp")
    Dim fileList() As FileInfo = dir.GetFiles("*.*", SearchOption.AllDirectories)

    Dim fileQuery = From file In fileList
                    Where file.Extension = ".jpg"
                    Order By file.Name
                    Select file

    For Each file In fileQuery
        listImagenes.Add(New Imagenes("imagesUp/" & file.Name))
    Next

    Return listImagenes

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:


<div id="slider" class="slider">
    <ul id="ulImages"></ul>
</div>

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


var iniciarEfecto;
$(function () {
    var galeria = function () 
    {
        $("#ulImages").html('');
        if ($("#controls").length > 0) 
        {
            $("#controls").html('');
        }

        $.ajax({
            url: 'Home.aspx/Galeria',
            dataType: 'json',
            type: "POST",
            contentType: "application/json; charset=utf-8",
            error: function (obj, error) {
                alert('Se ha producido un error al traer las imágenes’);
            },
            success: CrearGaleria
        });
    }

    galeria();

    iniciarEfecto = function () {
        $("#slider").easySlider({
            auto: true,
            continuous: true,
            numeric: true,
            pause: 1000
        });
    }
})

function CrearGaleria(data) {
    var elem;
    $.each(data.d, function (key, val) {
        elem = "<li><a><img src=" + val.imagen + " /></a></li>";
        $("#ulImages").append(elem);
    })

    iniciarEfecto();
}

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#!