webmaster

Galeria De Imagens Espectacular Com Super Efeitos jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

Galeria De Imagens Espectacular Com Super Efeitos jQuery

Uma galeria de imagens dá outro estilo ao site e torna-o mais atraente. É uma montra de tudo o que você quer mostrar aos seus visitantes. Eu criei esta galeria de imagens baseada em jQuery com alguns efeitos animados. Usei a função animate() do jQuery para esta galeria e é simples de usar. Espero que você goste do tutorial. Outro efeito que eu usei é o efeito hover. Com o efeito hover, as imagens a preto a branco mudam para imagens a cor.

Veja aqui uma DEMO desta Galeria De Imagens Com Efeitos jQuery. Pode descarregar o código no fim do tutorial.

Código jQuery do Efeito Hover


$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Você precisa de 3 versões da mesma imagem: uma versão pequena a preto e branco, uma versão pequena a cores e uma versão maior a cores. Quando você passa o rato por cima da imagem pequena a preto e branco, a imagem muda para a imagem pequena a cores. Quando você clica na imagem pequena a preto e branco, a imagem grande a cores carrega no frame.

Código jQuery Para Criar As Animações

$( init );
var num =0;
function init() {

$('img.a').click( function() {

var num = Math.floor(Math.random()*15);

hideImage(num);

var id = $(this).attr("id");

$('#'+id+'image').animate( {
bottom: '0px',
width: '500px',
height: '302px',
opacity: 1,
},300 );

} );
}
function hideImage(num)
{
if(num%2 == 0)
{
$('img#1image').width(0).hide();
$('img#2image').width(0).hide();
$('img#3image').width(0).hide();
$('img#4image').width(0).hide();
$('img#5image').width(0).hide();
$('img#6image').width(0).hide();
}
else
{
$('img#1image').height(0).hide();
$('img#2image').height(0).hide();
$('img#3image').height(0).hide();
$('img#4image').height(0).hide();
$('img#5image').height(0).hide();
$('img#6image').height(0).hide();
}
}

Código HTML












1 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
2 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
3 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
4 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Image one.
5 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.
6 - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Shrek Images.

Download do código usado neste tutorial: Galeria De Imagens Espectacular Com Super Efeitos jQuery

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)

Deixe o seu comentário, participe!

8 Responses

  1. Olá
    Parabens pelo tutorial

    Você poderia explicar como faço pra usar esse código no wordpress?

  2. Muito bom. Eu gostaria de ser abusado o suficiente para perguntar onde posso conseguir um código pronto, de uma galeria similar à esta aqui, mas com paginação e área de administração para poder gerenciar as imagens/textos.

    Grato, Andrei – habigzang@gmail.com.

  3. Olá, uso o blogger e tentei colocar parte do codigo jQuery do Efeito Hover,mas não tive um resultado positivo, e gostaria muito de ter esse efeito em imagens que utilizo na web. Poderia me ajudar . Obrigado.

  4. parabénss muito showw..
    gostaria de saber se você tem algo desse tipo envolvendo o php. para o envio de fotos..
    obrigado aguardo resposta

  5. Esse efeito não funciona nas versões mais recenter do jQuery, tem como burlar este problema ou só na gambiarra msm? =p

  6. TEm como fazer isso e colocar dentro de uma pasta? Tipo varias pastas e quando abrirmos uma ficar essas fotos assim?

  7. Parabéns pelo excelente tutorial. Graças a ele consegui terminar meu trabalho. Precisava de uma galeria de fotos animada que pudesse ser vista em tablets, portanto não podia ser flash. Este foi o tutorial mais bem explicado que vi. Um grande abraço e sucesso. Príscila

  8. Muito foda, me deu ideia pra diagramar um layout que deveria ter 2 slides um na pg inicial e outro nas outras paginas. Com a variedade pude me decidir pelo mais adeguado a cada situação.

Leave a Reply to Príscila Cancel reply

Your email address will not be published. Required fields are marked *


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.