ASP .NET - Galeria de Imagens usando jQuery (PrettyPhoto.js)

Hoje eu vou mostrar como usar o jQuery para criar uma galeria de imagens usando o recurso do plugin PrettyPhoto.

O PrettyPhoto é um clone do lightbox jQuery, sendo que ele não dá suporte somente a imagens, ele também dá suporte a vídeos, flash, YouTube, iframe e ajax, sendo assim uma completa coleção de mídia lightbox.

Outra vantagem é que ele é muito fácil de configurar e muito flexível, se você quiser personalizá-lo.

Além disso, o script é compatível em todos os principais navegadores, mesmo o IE6. Ele vem com APIs úteis de forma que o PrettyPhoto pode ser  acessado a partir de praticamente qualquer lugar.

Você pode baixar o plugin e conferir os exemplos no site: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

Neste artigo eu vou mostrar como usar o plugin PrettyPhoto com uma aplicação ASP .NET usando o Visual Web Developer 2010 Express Edition.

Abra o Visual Web Developer 2010 Express Edition e no menu File clique em New Project e selecione o template Visual Basic -> Web -> ASP .NET Empty Web Application informando o nome jQuery_GaleriaImagens e clique no botão OK;

Vamos incluir em nosso projeto Web 3 pastas com os seguintes nomes:

  1. Imagens - local onde iremos colocar as imagens a serem exibidas;
  2. Styles - local onde iremos colocar o arquivo de estilo PrettyPhoto.cs;
  3. Scripts - local onde iremos colocar os arquivos javascript do jQuery e do PrettyPhoto;

Para criar as pastas clique com o botão direito sobre o nome do projeto e a seguir clique em Add->New Folder e informe os nomes indicados.

Vamos incluir também um Web Form a partir do menu Project -> Add New Item escolhendo o template Web Form e informando o nome Default.aspx;

Abra o arquivo Default.aspx no modo Design e defina o código abaixo no arquivo:

Pronto ! Agora vamos testar executando o projeto:

Usando um controle de dados vinculado : DataList

Vamos agora tornar o nosso exemplo mais dinâmico exibindo as imagens armazenadas em um controle DataList.

No menu Project clique em Add New Item e escolha o template Web Form informando o nome Imagens.aspx.

Abra o arquivo Imagens.aspx no modo Design e defina o código abaixo neste arquivo:

Agora no arquivo code-behind Imagens.aspx.vb inclua o código abaixo no evento Load da página:

Imports System.IO
Public Class Imagens
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then
            Dim minhaPastaImagens As New DirectoryInfo(MapPath("~/Imagens/"))
            Try
                galeriaDataList.DataSource = minhaPastaImagens.GetFiles()
                galeriaDataList.DataBind()
            Catch generatedExceptionName As System.IO.DirectoryNotFoundException
                Response.Write("<script language =Javascript> alert('Erro!');</script>")
            End Try
        End If

    End Sub

End Class

Antes de executar clique com o botão direito do mouse sobre o arquivo Imagens.aspx e selecione Set As Start Page;

Executando o projeto agora iremos obter:

Clicando na imagem teremos:

Vimos assim como é simples criar uma galeria de imagens usando os recursos jQuery.

Pegue o projeto completo aqui: jQuery_GaleriaImagens.zip

Mar 1:35 De madrugada, ainda bem escuro, levantou-se, saiu e foi a um lugar deserto, e ali orava.

Mar 1:36 Foram, pois, Simão e seus companheiros procurá-lo;

Mar 1:37 quando o encontraram, disseram-lhe: Todos te buscam.

Mar 1:38 Respondeu-lhes Jesus: Vamos a outras partes, às povoações vizinhas, para que eu pregue ali também; pois para isso é que vim.

Referências:

José Carlos Macoratti