Galería Fotográfica

Introducción

Sucede que, teniendo la necesidad de crear una galería fotográfica, me puse a buscar en internet y encontré muchos artículos; bastantes en inglés. La programación estaba bastante complicada y en casi todas las ocasiones en ingles. Así que me dispuse a extraer lo mejor que encontré y aquí lo tenemos...

Estructura de directorios

Estaba trabajando sobre mi IIS de Windows Vista, y tenía la siguiente estructura de directorios:

Puse varias imágenes (jpg) dentro de las carpetas Rio y Reunion

Luego, agregué una página aspx con el nombre fotos.aspx y en la cual puse varios objetos organizados dentro de una tabla para asegurarme de que el formato quedara bien. A continuación el código para los objetos:

Código XHTML

<table>
    <tr>
        <td>
            Selecciona la galería que deseas ver:<br />
            <asp:DropDownList ID="cboGallery" runat="server" AutoPostBack="True"
 OnSelectedIndexChanged="cboGallery_SelectedIndexChanged">
            </asp:DropDownList>
            <asp:DataList ID="dlsGallery" runat="server" RepeatColumns="5">
            <ItemTemplate>
                <table>
                    <tr>
                        <td 
style="border-style:solid; border-width:1px; width:150px; height:150px; text-align:center;">
                         <a 
href="Images/Gallery/<%#Eval("GalleryID")%>/<%#Eval("FileName")%>" target="_blank">
                            <asp:Image ID="imgGallery" runat="server" Height="50px" Width="50px"
                            ImageUrl=
'<%#fnFilePath(DataBinder.Eval(Container.DataItem,"GalleryID").ToString(),
DataBinder.Eval(Container.DataItem,"FileName").ToString()) %>' />
                         </a>
                        <p style="text-align:center;">
                            <a 
href="Images/Gallery/<%#Eval("GalleryID")%>/<%#Eval("FileName")%>" target="_blank">
                            <asp:Label ID="lblFileDesc" 
                            runat="server" 
                            Text='<%#Eval("FileDescription")%>'></asp:Label>
                            </a>
                        </p>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
            </asp:DataList><br />
            <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
        </td>
    </tr>
</table>

Queda como se muestra:

El código:

Declaramos una variable:

string varGalleryFolder = "C:\\inetpub\\wwwroot\\soycristiano\\images\\Gallery";

Creamos los procedimientos que recuperarán los directorios (Galerías) y los archivos (Imágenes)

void GetFolders(string prmFolder) {
    try {
        if (Directory.Exists(prmFolder)) {
            string[] arrFolders;
            arrFolders = Directory.GetDirectories(prmFolder);
            foreach (string dir in arrFolders) {
                ListItem lst = new ListItem(dir.Substring(prmFolder.Length+1),
                    dir.Substring(prmFolder.Length + 1));
                cboGallery.Items.Add(lst);
            }
        }
        else {
            lblMessage.Text = 
                clsStrings.fnErrorMessage("No existe el directorio de imágenes");
        }
    }
    catch (Exception ex)
    {
        lblMessage.Text = clsStrings.fnErrorMessage(ex.Message);
    }
}
void GetFiles(string prmFolder) {
    try {
        string[] arrFiles;
        arrFiles = Directory.GetFiles(prmFolder, "*.jpg");

        DataSet dsGallery = new DataSet("dsGallery");
        DataTable taFile;
        DataRow rwFile;
        //DataColumn colFile;
        taFile = dsGallery.Tables.Add("Files");
        taFile.Columns.Add("GalleryID", varGalleryFolder.GetType());
        taFile.Columns.Add("FileName", varGalleryFolder.GetType());
        taFile.Columns.Add("FileDescription", varGalleryFolder.GetType());
        foreach (string file in arrFiles) { 
            //aqui llenamos el Dataset
            rwFile = taFile.NewRow();
            rwFile["GalleryID"] = prmFolder.Substring(varGalleryFolder.Length + 1); ;
            rwFile["FileName"] = file.Substring(prmFolder.Length + 1);
            rwFile["FileDescription"] = file.Substring(prmFolder.Length + 1);
            taFile.Rows.Add(rwFile);
        }
        dlsGallery.DataSource = dsGallery.Tables["Files"];
        if (dsGallery.Tables["Files"].Rows.Count == 0)
        {
            lblMessage.Text = clsStrings.fnErrorMessage("No se encontraron imágenes");
        }
        else
        {
            lblMessage.Text = clsStrings.fnInfoMessage("Se encontraron " + 
                dsGallery.Tables["Files"].Rows.Count.ToString() +
                " imágenes");
        }
        dlsGallery.DataBind();
        dsGallery.Dispose();
    }
    catch (Exception ex)
    {
        lblMessage.Text = clsStrings.fnErrorMessage(ex.Message);
    }
}
    
protected string fnFilePath(string prmPath, string prmFileName) {
    return ("Images/Gallery/" + prmPath +"/"+ prmFileName);
}

Ahora ponemos el código del Form_Load y del OnSelectedIndexChanged del DropDownList, que es el que se ejecuta cuando seleccionamos un elemento de la lista

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        if (!Page.IsPostBack)
        {
            GetFolders(varGalleryFolder);
            GetFiles(varGalleryFolder + "\\" + cboGallery.SelectedValue.ToString());
        }
    }
    catch (Exception ex) {
        lblMessage.Text = clsStrings.fnErrorMessage(ex.Message);
    }
}
protected void cboGallery_SelectedIndexChanged(object sender, EventArgs e)
{
    //GetPhotos(cboGallery.SelectedValue.ToString());
    GetFiles(varGalleryFolder + "\\" + cboGallery.SelectedValue.ToString());
}

Para hacerlo funcionar con AJAX, agregamos un ScriptManager y ponemos todo dentro de un UpdatePanel

Espacios de nombres usados en el código de este artículo:

System.Data;
System.IO;