ASP. Net – Usando os recursos do JQuery e do Fancybox para exibir imagens
Você já deve ter visto o recurso
usado pelo FancyBox ao navegar pela web. Neste recurso, o
conteúdo multimídia do site, como imagens e texto, é exibido
em uma janela flutuante, com ou sem efeito de zoom.
O recurso está presente geralmente
em lojas de 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) e 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 aqui: 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 última 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 ficarão
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á criado o website e na janela
Solution Explorer você vai ver 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:
- jquery.fancybox.131.js
- jquery.fancybox.131.css
Para incluir os arquivos, clique com
o botão direito do mouse sobre a pasta Scripts, 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><br /><script type="text/javascript" src='<%=Page.ResolveClientUrl("~/Scripts/jquery.fancybox-1.3.1.js")%>'></script><br /><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 está 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.
01. Exibindo texto
Podemos usar o FancyBox para exibir
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 online 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><br /> <span class="style1"><br /> <a id="linkTexto" href="#inlineConteudoID"><strong>ww.macoratti.net - Clique aqui para exibir o texto em uma janela flutuante !</strong></a></span><br /></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 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;"><br /><div id="inlineConteudoID" style="width:255px;height:200px;overflow:auto; background-color:yellow"><br /> <p><br /> Este é o texto que irá aparecer <b>Janela Flutuante</b>.<br /> </p><br /></div><br /></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() {<br /> $("#linkID").fancybox();<br />}); No nosso
exemplo, teremos:
$(document).ready(function () {<br /> $("#linkTexto").fancybox();<br />});Neste scripts temos a criação da
função $(document).ready, que é 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 irá exibir a janela
flutuante quando clicado. A chamada da função fancybox() 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 amarela.
02. Exibindo imagens
Para mostrar mais alguns recursos do
FancyBox, vamos incluir uma tabela com quatro 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><br /> <tr><br /><strong><td><br /><br /> <a href="Imagens/paisagem1Grande.jpg" <br />id="linkPaisagem1"><br /> <asp:Image ID="paisagem1" <br />runat="server" ImageUrl="~/Imagens/paisagem1.jpg" <br />AlternateText="Paisagem natural." <br />CssClass="picture"></asp:Image><br /> </a><br /><br /> </td></strong><br /> </tr><br /><br /><tr><br /> <td><br /> <a <br />href="Imagens/paisagem2.jpg" id="linkPaisagem2"><br /><br /><asp:Image ID="Image2" runat="server" <br />ImageUrl="~/Imagens/paisagem2.jpg" AlternateText="Paisagem natural." <br />CssClass="picture" Height="102px" <br /><br />Width="148px"></asp:Image><br /> </a> <br /><br /> </td><br /> </tr><br /> <tr><br /><br /> <td><br /> <a <br />href="Imagens/paisagem3.jpg" id="linkPaisagem3"><br /><br /><asp:Image ID="Image3" runat="server" <br />ImageUrl="~/Imagens/paisagem3.jpg" AlternateText="Paisagem natural." <br />CssClass="picture"></asp:Image><br /> </a> <br /><br /> </td><br /> </tr><br /><br /><tr><br /> <td><br /> <a <br />href="Imagens/paisagemGrande2.jpg" id="linkPaisagemGrande2"><br /><br /> <asp:Image ID="Image1" runat="server" <br />ImageUrl="~/Imagens/paisagemPequena2.jpg" AlternateText="Paisagem <br />natural." CssClass="picture"></asp:Image><br /><br /></a> <br /> </td><br /> </tr><br /><br /> </table>Para exibir imagens com o FancyBox, praticamente seguimos 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"><br /> <img src="Imagem_tamanho_pequeno.jpg" alt="titulo imagem" /><br /></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() {<br /> $("#linkID").fancybox();<br />}); Para o nosso exemplo, vejamos a
imagem da primeira célula da tabela onde temos o seguinte
código:
<br /><a href="<strong>Imagens/paisagem1Grande.jpg</strong>" <strong>id="linkPaisagem1"</strong>><br /><asp:Image<br /> ID="paisagem1" runat="server" ImageUrl="<strong>~/Imagens/paisagem1.jpg</strong>"<br /> AlternateText="Paisagem natural." <br />CssClass="picture"></asp:Image><br /></a>O código JavaScript que usa os
recursos do FancyBox é o seguinte:
$(document).ready(function () {<br /><br />$("#linkPaisagem1").fancybox();<br /> }); 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"><br /><br /><asp:Image ID="Image2" runat="server" <br />ImageUrl="~/Imagens/paisagem2.jpg" AlternateText="Paisagem natural." <br />CssClass="picture"></asp:Image><br /></a> A diferença é que no código
JavaScript usado não vamos exibir o título
da imagem:
$(document).ready(function () {<br /><br />$("#linkPaisagem2").fancybox( <br /> {<br /> 'titleShow': <br />false<br /> });<br /> });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"><br /> <asp:Image ID="Image3" runat="server" ImageUrl="~/Imagens/paisagem3.jpg" AlternateText="Paisagem natural." CssClass="picture"></asp:Image><br /></a> Já o código JavaScript está
exibindo o título no interior da janela (inside) e usando o
efeito para transição (fade):
$(document).ready(function () { <br /><br />$("#linkPaisagem3").fancybox(<br /> {<br /> 'titleShow': true,<br /><br /> 'titlePosition': 'inside',<br /> 'transitionIn': <br />'fade',<br /> 'transitionOut': 'fade'<br /> }<br /> );<br /><br />});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:
....<br /><a href="Imagens/paisagemGrande2.jpg" <br />id="linkPaisagemGrande2"><br /> <asp:Image ID="Image1" <br />runat="server" ImageUrl="~/Imagens/paisagemPequena2.jpg" <br />AlternateText="Paisagem natural." <br />CssClass="picture"></asp:Image><br /></a> O código JavaScript
exibe o título
e usa outros recursos de transição da imagem:
$(document).ready(function () {<br /><br />$("a#linkPaisagemGrande2").fancybox({<br /> 'titleShow': true,<br /><br /> 'transitionIn': 'elastic',<br /> 'transitionOut': 'elastic'<br /><br />});<br />});O resultado obtido é visto na
figura abaixo:
É claro que existem muitos mais
recursos do que eu mostrei aqui; meu objetivo foi apresentar o FancybBox, mostrando como é simples usar os seus recursos. Para ir mais longe, veja a documentação em FancyBox
HOWTO
page.
Pegue o projeto completo
aqui: UsandoFancyBox.zip
Eu sei, é apenas ASP .NET, mas eu gosto…
Referências:
é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
