Categoria: HardTutoriais

Tudo certo pessoal?
Sexta-feira chegou e hoje é dia de mais um tutorial.

Esse tutorial fica mais como uma dica também para quem ainda não conhece o fancybox2.
Você já teve ter acessado algum site que tenha aqueles álbuns de fotos onde ao clicar o site escurece e a  imagem ampliada aparece em primeiro plano. E por mais complexo que possa parecer é algo muito simples e fácil de fazer.

Primeiro o download da biblioteca que iremos utilizar pode ser feito em:
http://fancyapps.com/fancybox/

Agora mãos a obra?
Primeiro passo é adicionar a biblioteca Jquery, o CSS e a biblioteca Fancybox.
Depois definimos os links, imagens e criamos o script para gerar a galeria de imagens.

<!-- Carregamos a biblioteca Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  
<!-- Carregamos a Fancybox e seu CSS -->
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script src="http://fancyapps.com//fancybox/source/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
    	// Todos os itens que usarem a classe fancybox vão abrir como galeria
        $(".fancybox").fancybox();
	});
</script>

<!-- O atributo href serve para informar o link da imagem ampliada -->
<!-- O atributo rel serve para informar que as imagens fazem parte do mesmo álbum -->
<a href="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_2.jpg" rel="album" class="fancybox">
    <img src="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_2.jpg" height="70" alt="HQ" />
</a>
&nbsp;-&nbsp;
<a href="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_1.jpg" rel="album" class="fancybox">
    <img src="http://hardcodigo.com.br/wp-content/uploads/2013/05/hardcomics_1.jpg" height="70" alt="HQ" />
</a>

E para visualizar funcionando:

JS Bin

O Fancybox2 também funciona com vídeos, HTML e outros sites. Muitas vezes podemos usá-lo para abrir cadastros assim o usuário pode realizar outras atividades sem sair da página atual.

Espero que a dica seja útil para vocês nos próximos projetos!
Na semana que vem vamos falar sobre atualizar o HTML usando AJAX, assim podemos mudar o conteúdo sem recarregar a página.

Até a próxima!

Tudo certo galera?

O primeiro tutorial do hardcódigo acabou de sair!
Coisa bem simples mas que pode ajudar a acelerar o desenvolvimento quando o site fizer uso do efeito de imagem on e off.

Nesse tutorial vamos usar o Jquery que você pode baixar no link:
http://code.jquery.com/jquery-1.9.1.min.js

Para quem não conhece o Jquery é uma biblioteca que reúne diversos recursos que são uma mão na roda para todo desenvolvedor WEB.

E então vamos ao código:

<!-- Biblioteca Jquery -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    // comando para inicialização do código após o carregamento do HTML
    $(document).ready(function(){
        
		// Evento acionado quando o mouse entrar em uma classe on_off
		$(".on_off").mouseenter(function(){
			// Define a variável img como o objeto que o mouse está em cima atualmente
			img = this;
			// O comando replace() substitui o texto de _off por _on realizando a troca da imagem
			img.src = img.src.replace(/_off\./, "_on.");
		});
        
		// Evento acionado quando o mouse sair de uma classe on_off		
		$(".on_off").mouseleave(function(){
			// Define a variável img como o objeto que o mouse está em cima atualmente
			img = this;
			// O comando replace() substitui o texto de _on por _off realizando a troca da imagem			
			img.src = img.src.replace(/_on\./, "_off.");
		});		
	});
</script>

<img src="botao_off.jpg" alt="Botão" width="181" height="181" class="on_off" />
<br />
<img src="like_off.jpg" alt="Botão 2" width="181" height="181" class="on_off" />

No caso todas as imagens com recurso de on e off devem ter a classe “on_off” e no nome devem ser identificadas com o nome_on e nome_off.

Na linha “$(document).ready(function(){” iniciamos o jquery informando que o código deve ser executado após o carregamento do HTML.

Logo após isso definimos 2 eventos:
“$(‘.on_off’).mouseenter()” e “$(‘.on_off’).mouseleave()”.

E usando o codigo:
img = this;
img.src = img.src.replace(/_off\./, “_on.”);
E
img = this;
img.src = img.src.replace(/_on\./, “_off.”);

Trocamos a url da imagem substituindo o texto de _on e _off e isso faz a mudança da imagem.

Simples, prático e fácil!

Link para download dos arquivos do tutorial:
https://www.dropbox.com/s/bxayhex0r0yxkxc/tutorial_1.zip

Valeu e até a próxima!
Dúvidas e sugestões fiquem a vontade para comentar!