ASP .NET - Exibindo textos e imagens com o recurso FancyBox

Você com certeza já viu o recurso usado pelo FancyBox ao navegar pela web. Neste recurso o conteúdo multimídia do site como imagens e texto são exibidos em uma janela flutuante com ou sem efeito de zoom.

O recurso esta presente geralmente em lojas e-commerce onde a imagem em miniatura de um produto é apresentada e quando o usuário clica na imagem ela é aumentada e exibida em uma janela flutuante.

E por que FancyBox ?

Porque FancyBox é o nome dado pelos criadores desta library que usa JQuery para exibir, textos , imagens e outros conteúdos multimídia em uma janela flutuante.

Pois bem, neste artigo eu mostro como podemos usar este recurso em páginas ASP .NET usando o Visual Studio 2010 Professional (Podemos usar o Visual Web Developer 2010 Express Edition também).

A primeira coisa a fazer é baixar o arquivo JavaScript (jquery.fancybox-version.js) eu incluí-lo em seu website. Além disso o download do FancyBox irá incluir arquivos JavaScripts adicionais para implementar funcionalidades extras como rolagem de imagem com o mouse e também um arquivo CSS (jquery.fancybox-version.css). Você pode fazer o download dos arquivos em : FancyBox Homepage.

Obs: Ao fazer o download você receberá também um demo mostrando os recursos do FancyBox.

Como o FancyBox usa os recursos do JQuery o seu projeto ASP .NET também deverá conter a library do JQuery. A ultima versão do JQuery pode ser obtida no site oficial : jQuery.com

Dando os primeiros passos com o FancyBox

Para usar o FancyBox em sua página ASP .NET você precisa referenciar os arquivos JavaScripts no elemento <head> da página. (Se você usar uma Master Page pode incluir a referência nela e os recursos ficaram disponíveis para todas as páginas que herdaram da Master Page).

Abra o VS 2010 ou o Visual Web Developer 2010 Express  e no menu File selecione New Web Site;

A seguir selecione a linguagem Visual Basic e o template ASP .NET Web SIte e informe o nome usandoFancyBox na pasta local de seus projetos:

Será criada o web site e na janela Solution Explorer você vai ver na janela Solution Explorer o projeto contendo a pasta Scripts e os arquivos Default.aspx e web.config;

A pasta Scripts já vai conter os arquivos do JQuery; Vamos aproveitar e criar a pasta Imagens no projeto e incluir na pasta Scripts os arquivos do FancyBox:

Para incluir os arquivos clique com o botão direito do mouse sobre a pasta Scripts e selecione Add Existing Item e procure pelos arquivos onde você descompactou a library do FancyBox;

Na pasta Imagens eu vou colocar algumas imagens que vamos usar no exemplo.

Agora vamos abrir a página Default.aspx e incluir a referência as bibliotecas do JQuery e ao arquivo .css e .js da FancyBox e FancyBox na seção <head> da página:

<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery-1.3.2.min.js")%>'></script>
<script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery.fancybox-1.3.1.js")%>'></script>
<link href="Scripts/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />

Observe que estamos referenciando os arquivos existente na pasta Scripts. O método Page.ResolveClienteUrl esta sendo usado para evitar que quando usado em uma Master Page haja problemas de localização.

Com as referências definidas corretamente vamos começar a usar os recursos do FancyBox:

1- Exibindo Texto

Podemos usar o FancyBox para exibir em uma janela Flutuante que contém um conteúdo inline. Este conteúdo inline pode ser definido em qualquer lugar da página e pode incluir textos , imagens e tudo o que você quiser exibir com HTML.

Para usar o FancyBox para exibir o conteúdo inline em uma janela flutuante quando um elemento for clicado pelo usuário vamos começar incluindo a seguinte marcação na página para definir a região que pode ser clicada pelo usuário:

<div>
    <span class="style1">
      <a id="linkTexto" href="#inlineConteudoID"><strong>ww.macoratti.net - Clique aqui para exibir o texto em uma janela flutuante !</strong></a></span>
</div>

O texto que aparece no interior do elemento link quando clicado irá exibir a janela FancyBox para mostrar o outro conteúdo na janela flutuante. Este conteúdo será o conteúdo existente no interior de um elemento cujo atributo ID coincidir com o valor inlineConteudoID definido no atributo href do elemento link;

<div style="display: none;">
<div id="inlineConteudoID" style="width:255px;height:200px;overflow:auto; background-color:yellow">
    <p>
         Este é o texto que irá aparecer <b>Janela Flutuante</b>.
    </p>
</div>
</div>

Para poder exibir o texto basta incluir o código JavaScript na página entre as tags <script type="text/javascript">:

$(document).ready(function() {
   $("#linkID").fancybox();
});

Onde no nosso exemplo teremos:

$(document).ready(function () {
    $("#linkTexto").fancybox();
});

Neste scripts temos a criação da função $(document).ready a qual é uma função JavaScript que o JQuery executa uma única vez quando a página é carregada.

A sintaxe $("linkID") retorna a referência ao elemento HTML denominado LinkID que no nosso exemplo é o identificador "linkTexto" que o valor do id do elemento link que quando clicado irá exibir a janela flutuante. A chamada da função funcybox() neste elemento faz com que a library FancyBox abra janela flutuante e exiba o texto.

Neste exemplo teremos a página Default.aspx contendo o link definido que quando clicado exibir o texto em uma janela flutuante de cor de fundo amarelo:

2- Exibindo Imagens

Para mostrar mais alguns recursos do FancyBox vamos incluir uma tabela com 4 linhas e em cada célula da tabela incluir uma imagem conforme a figura abaixo:

O código fonte desta tabela é dado a seguir:

   <table>
        <tr>
            <td>
             <a href="Imagens/paisagem1Grande.jpg" id="linkPaisagem1">
             <asp:Image ID="paisagem1" runat="server" ImageUrl="~/Imagens/paisagem1.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
            </a>
            </td>
        </tr>
        <tr>
            <td>
             <a href="Imagens/paisagem2.jpg" id="linkPaisagem2">
             <asp:Image ID="Image2" runat="server" ImageUrl="~/Imagens/paisagem2.jpg" AlternateText="Paisagem natural." CssClass="picture" Height="102px" 
                    Width="148px"></asp:Image>
            </a>            
           </td>
        </tr>
        <tr>
            <td>
             <a href="Imagens/paisagem3.jpg" id="linkPaisagem3">
             <asp:Image ID="Image3" runat="server" ImageUrl="~/Imagens/paisagem3.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
            </a>            
            </td>
        </tr>
        <tr>
            <td>
             <a href="Imagens/paisagemGrande2.jpg" id="linkPaisagemGrande2">
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/paisagemPequena2.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
            </a>            
         </td>
        </tr>
    </table>

Exibir imagens com o FancyBox praticamente sigamos as mesmas etapas usadas para exibir texto. Primeiro definimos o código com a marcação HMTL e então incluímos o código JavaScript que vai realizar o serviço. A seguir temos o modelo padrão para o código de marcação usado:

<a id="linkID" href="Imagem_tamanho_grande.jpg">
   <img src="Imagem_tamanho_pequeno.jpg" alt="titulo imagem" />
</a>

Obs: as imagens podem ser do mesmo tamanho também;

Após esta definição basta incluir o código JavaScript que faz a chamada a fancybox() na função $(document).ready:

$(document).ready(function() {
   $("#linkID").fancybox();
});

Para o nosso exemplo, vejamos a imagem da primeira célula da tabela onde temos o seguinte código:


<a href="Imagens/paisagem1Grande.jpg" id="linkPaisagem1">
<asp:Image ID="paisagem1" runat="server" ImageUrl="~/Imagens/paisagem1.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
</a>

O código JavaScript que usa os recursos do FancyBox é o seguinte:

 
$(document).ready(function () {
        $("#linkPaisagem1").fancybox();
 });

onde #linkPaisagem1" é o id do elemento href definido. Executando a página e clicando na primeira imagem teremos:

Para a imagem da segunda célula temos o seguinte código html:


<a href="Imagens/paisagem2.jpg" id="linkPaisagem2">
  <asp:Image ID="Image2" runat="server" ImageUrl="~/Imagens/paisagem2.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
</a>

A diferença é que no código JavaScript usado não vamos exibir o título da imagem:

   $(document).ready(function () {
      $("#linkPaisagem2").fancybox(  
      {
          'titleShow': false
      });
  });

Observe que definimos : 'titleShow': false e dessa forma não vamos exibir o título da imagem:

Na terceira célula da tabela temos a declaração a seguir:


<a href="Imagens/paisagem3.jpg" id="linkPaisagem3">
    <asp:Image ID="Image3" runat="server" ImageUrl="~/Imagens/paisagem3.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
</a>

Já o código JavaScript estamos exibindo o título no interior da janela (inside) e usando o efeito para transição(fade):

  $(document).ready(function () {       
      $("#linkPaisagem3").fancybox(
      {
          'titleShow': true,
          'titlePosition': 'inside',
          'transitionIn': 'fade',
          'transitionOut': 'fade'
      }
   );
  });

Executando a página teremos:

Na última célula temos a declaração onde exibimos uma imagem menor que quando clicada exibirá a imagem maior:

....
<a href="Imagens/paisagemGrande2.jpg" id="linkPaisagemGrande2">
   <asp:Image ID="Image1" runat="server" ImageUrl="~/Imagens/paisagemPequena2.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image>
</a>

O código JavaScript exibe o título e usa outros recursos de transição da imagem:

 
$(document).ready(function () {
  $("a#linkPaisagemGrande2").fancybox({
      'titleShow': true,
      'transitionIn': 'elastic',
      'transitionOut': 'elastic'
  });
});

O resultado obtido é visto na figura abaixo:

É claro que existem muitos mais recursos do que eu mostrei aqui; meu objetivo foi apresentar o recurso mostrando como é simples usar os recursos do FancyBox para ir mais longe veja documentação em : FancyBox HOWTO page.

Pegue o projeto completo aqui: UsandoFancyBox.zip

Eu sei é apenas ASP .NET, mas eu gosto...

Referências:

José Carlos Macoratti