Aproveitando o artigo do Djonatas Tenfen, de 09/2009, o qual aborda os primeiros passos com JQuery e ASPNet, irei demonstar o plugin LightBox JQuery, que faz alguns efeitos bacanas em imagens. Vale ressaltar que existe um framework chamado LightBox 2 que é independente do JQuery e praticamente tem a mesma funcionalidade, entretanto, na minha opinião, o Lighbox traz um efeito mais interessante e é mais fácil de configurar.
Crie um novo WebSite no Visual Studio. Chame-o de JqueryLightBox.
Imagem 1 - Site
Clique em Get new version para obter a nova versão. Descompacte no diretório do seu projeto. Observe no arquivo descompactado o CSS, pois dará todo efeito no elemento div, que é usado para agrupar um ou mais elementos nível de bloco. Contém também as imagens dos botões, os arquivos JS e as fotos. Em soluction Explorer, clique em css e clique no arquivo. O mesmo será responsável pelo layout.(imagem 2)
Imagem 2( Folha de estilo encadeada -CSS)
Vamos criar um novo web form. Em soluction Explorer, no path do projeto com botão direito do mouse, selecione add new item. Selecione o objeto web form e chame-o de ListBox.aspx.(Imagem3)
Imagem 3
Em source logo acima da tag <html... vamos vincular o JQuery, o lightbox.(Listagem 1)
<script type ="text/jscript" src ="jquery-1.3.2.min.js"></script>
<script type ="text/jscript" src ="js/jquery.lightbox-0.5.js"></script>
Listagem 1
Precisamos informar em qual elemento estaremos aplicando o efeito do lightbox. Crie um outro script conforme listagem abaixo.(listagem 2)
<script type ="text/jscript">
$(document).ready(function()
{
$("#galeria a").lightBox();
});
</script>
Listagem 2(método para aplicar o efeito do lightbox)
O elemento galeria sera nosso div que conterão as fotos e o “a” representa o link de cada foto, isso mesmo, cada foto terá um link para sua ampliação.
Logo abaixo da tag <title.. vamos adicionar o css. É só clicar no pasta css e arrastar o arquivo para o local desejado .(Listagem 3)
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
Listagem 3( Css)
Adicione um id para o div(listagem 4)
<div id="galeria">
Listagem 4( identificando a div)
Vamos incrementar um estilo para a div galeria listagem 5.
<style type="text/css">
#galeria
{
width:500px;
height:300px;
background-color:#C0C0C0;
margin : auto;
}
Listagem 5
Observe que estamos alterando algumas propriedades da div galeria, tais como altura, largura , cor de fundo e a margem que foi centralizada.
Nosso script completo ficaram assim (Listagem 5):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListBoxaspx.aspx.cs" Inherits="ListBoxaspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type ="text/jscript" src ="jquery-1.3.2.min.js"></script>
<script type ="text/jscript" src ="js/jquery.lightbox-0.5.js"></script>
<script type ="text/jscript">
$(document).ready(function()
{
$("#galeria a").lightBox();
});
</script><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="galeria">
</div>
</form>
</body>
</html>
Listagem 5(script completo)
No nosso webform adicionei 5 hiperlinks na região do nosso div
Tenho 5 imagens e 5 miniaturas para as mesmas(thumbnail).
Para cada hiperlink na propriedade navigateurl, linkei com as fotos de imagens normais e linkei com a miniatura correspondente.
Só executar e verificar esse magnífico efeito que o plugin lightbox proporciona.
Veja o projeto em funcionamento( Imagem 4)
Imagem 4 – Imagens
Agora é só selecionar a imagem para carregar a sua correspondente(Imagem 5)
Imagem 5 – Imagem carregada
Finalizamos a primeira parte que é a manipulação de imagens. Vamos agora utilizar o TickBox com Jquery que substitui o ModalPopUpContainer do AjaxToolkit.
Vamos precisar fazer o download do script do Thickbox e neste exemplo irei utilizar o código css fornecedido no site do Thickbox: http://jquery.com/demo/thickbox/.
Faça o download do thickbox-compressed.js. Salve na pasta js do seu projeto.
Existe um link que abre um arquivo txt, chamado e ThickBox.css .Salve na pasta css do seu projeto com a extensão .css.
Criem dois webforms, um chamado TickBox .aspx e outro chamado Modal.aspx
No TickBox.aspx ,em source, após a tag Title do seu formulário adicione as referências aos scripts. Adicionam primeiro o CSS, depois o script do Jquery e por último o script do ThickBox.
Observe a listagem 6
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TickBox.aspx.cs" Inherits="TickBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="css/thickbox.css" rel="stylesheet" type="text/css" />
<script type ="text/jscript" src ="jquery-1.3.2.min.js"></script>
<script type ="text/jscript" src ="thickbox-compressed.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html
Listagem 6
Se você quiser abrir uma página com um link html basta adicionar a tag class especifica do ThickBox que já irá funcionar (Listagem 7)
<form id="form1" runat="server">
<div>
<a href="Modal.aspx?width=200&height=200" class="thickbox"">
Abrir Janela Modal
</a>
</div>
</form>
Listagem 7
Adicione um ScriptManager, um UpdatePanel e um botão no nosso formulário. E vamos fazer uma chama para uma janela modal no Evento do botão (Listagem 8)
protected void Button1_Click(object sender, EventArgs e)
{
string script = "tb_show('','Modal.aspx?height=420&width=550','');";
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "janela", script, true);
}
Listagem 8
Com o código acima será aberto formulário WebForm1 em uma janela modal de 320px de Height por 450px de Width. Nessas duas linhas de código escrevi o JavaScript que chama a janela e logo em seguida registra o mesmo no UpdatePanel . É importante que registre seu código JavaScript para que quando ocorra um PostBack em seu formulário o UpdatePanel mantenha a referência dos Scripts adicionados.
Veja o efeito final(Imagem 6)
Imagem 6
Vimos a utilização do poderoso JQuery com LightBox que cria um efeito incrível em imagens e vimos também a criação de um formulário modal utilizando o Thicket com JQuery. Sem dúvidas o maravilhoso JQuery podemos criar aplicaçãoes ricas para internet (RIA) sem perder performance.
Até a próxima!
|
