A galeria de imagem é um recurso cada vez mais utilizado em páginas da web. Muitos de nossos usuários fazem questão de ter em seus sites, devido à praticidade e ainda ao diferencial e beleza que incorpora a sua página. Mas a pergunta que fica a nós desenvolvedores, como fazer?
Neste artigo iremos ver como implementar uma galeria de imagens utilizando C#, Asp.NET e jQuery.
Para iniciarmos o artigo vamos baixar a versão mais recente do jQuery (até a conclusão do artigo é a versão 1.3.2). Para fazer o efeito da modal utilizaremos o plugin do jQuery chamado nyromodal que pode ser baixado aqui.
Mais dois plugins são necessários para auxiliar os efeitos da modal. Primeiro o Color, acesse o link e salve o texto num bloco de notas com o nome de “jquery.color.js”. E em seguida faça o download do Mouse Wheel.
Agora é a hora de colocarmos a mão na massa! Vamos abrir o Visual Studio e criar um projeto do tipo Web Site.
Em seguida vamos selecionar o tipo do projeto que será um Asp.NET Web Site, iremos chamá-lo de “Galeria” e definir o local onde ficará o projeto.
Criado nosso projeto vamos agora criar uma estrutura de pastas para separarmos os arquivos de javascript, os arquivos de estilo e as imagens dos demais. Este passo (com exceção da pasta de img que deve ser criada) é mais questão de organização, quem quiser poderá avançar a próxima etapa.
Para adicionar uma nova pasta, clique com o botão direito do mouse e em seguida na opção “New Folder”. Crie duas pastas “css” e “JavaScript”. A solution deve ficar como a figura a seguir:
Após criarmos as pastas vamos adicionar os arquivos do jQuery e do nyroModal na solution. Primeiramente vamos adicionar os arquivos de estilo do nyroModal à pasta “css”. Para tal vamos clicar sobre a pasta “css” com o botão direito e em seguida em “Add Existing Item”, localize onde você descompactou os arquivos do nyroModal, vá à pasta “styles” selecione todos os arquivos e clique em “Add”. Repita este passo agora para pasta “JavaScript” indo até a pasta “js” selecionando o arquivo “jquery.nyroModal-1.5.2.min.js” e clicando em Add. Em seguida, faça o mesmo para a pasta “img” adicionando as imagens que estão na pasta “img”.
Agora adicione na pasta “JavaScript” o arquivo js do jQuery , o arquivo js do Color e o arquivo “jquery.mousewheel.min.js” do Mouse Wheel (pode-se adicionar quaisquer dos js presentes na pasta descompactada do Mouse Wheel, indico o min porque ele contém o que é necessário para funcionar a modal, porém caso queira estudar o completo funcionamento fique à vontade para ver os demais.) seguindo a mesma orientação do parágrafo anterior.
Terminada a inclusão dos arquivos necessários para a galeria, adicione uma nova pasta chamada “Imagens” e adicione algumas imagens nela a seu gosto. Serão as imagens que irão aparecer na galeria.
Estamos quase lá! Neste passo vamos adicionar os scripts e o estilo na nossa página Default.aspx. No meu exemplo fica da seguinte maneira:
<!-- Código HTML -->
<script type="text/javascript"
src="JavaScript/jquery-1.3.2.min.js"> </script>
<script type="text/javascript"
src="JavaScript/jquery.color.js"></script>
<script type="text/javascript"
src="JavaScript/jquery.mousewheel.min.js"> </script>
<script type="text/javascript"
src="JavaScript/jquery.nyroModal-1.5.2.min.js"></script>
<link href="css/nyroModal.css" rel="stylesheet" type="text/css" />
Agora vamos adicionar uma imagem para primeiro vermos a modal:
<!-- Código HTML --> <img alt="Pôr-do-sol" src="Imagens/Pôr-do-sol.jpg" />
Agora vamos executar a aplicação com F5 e ao clicar sobre a imagem veremos a modal abrir-se com a imagem respectiva. Mas como isso?
O segredo está em adicionar a imagem o class=”nyroModal” será ele o responsável a dizer para o javascript do nyroModal que a imagem será aberta numa modal.
E para finalmente chegarmos a nossa galeria, vamos adicionar alguns links “<a>” para podermos fazer nossa galeria, conforme o código a seguir:
<!-- Código HTML -->
<a rel="gal" href="Imagens/Inverno.jpg"
title="Inverno" >Galeria</a>
<a rel="gal" href="Imagens/Montanhas azuis.jpg"
title="Montanhas Azuis"></a>
<a rel="gal" href="Imagens/Ninféias.jpg"
title="Ninféias" ></a>
Agora basta executarmos a aplicação e clicar no link “Galeria” que veremos nossa galeria de imagens pronta, inclusive com a navegação pelo teclado.
Antes de finalizarmos pode-se notar algumas coisas:
• O rel=”gal” indica que o link faz parte de uma galeria.
• O class=”nyroModal” como havia citado antes indica que o link será aberto em modal.
• O title=”Ninféias” indica a legenda que será exibida no topo da modal/galeria.
• E por fim o href=”Imagens/Ninféias.jpg” indica o caminho onde está a imagem.
A utilização de links com os caminhos de imagens ao invés de imagens, deve-se ao fato da navegação da modal/galeria que se torna mais simples.
Maiores informações de como funciona o nyroModal podem ser vistas no site do nyroModal.
Bom é isso, espero que tenham gostado. Quaisquer dúvidas fico a disposição.
Até a próxima!
Posts Relacionados:
August 23rd, 2009 at 12:09 PM
[...] [...]