Galeria com troca de imagem

Thursday 9 July 2009 às 18:07

Esse post é baseado no Image replacement gallery e nele mostrarei como otimizar o exemplo da WebDesignerWall. Vejam o que acrescentarei nessa galeria.

• Loop: Quando chega na última retorna-se para primeira
• Selecionar automaticamente a primeira imagem
• Tornar a imagem maior (largeImg) clicável
• Contornando bug IE6:  hover em div

Aplicando-se as correções ficara como na imagem abaixo. Confira o demo

Capturar a primeira imagem

Vamos capturar o href do primeiro link que se encontra dentro do div=”thumbs”.

$("#thumbs a:first").addClass("ativo");

var largePath = $("#thumbs a:first").attr('href');
var largeAlt = $("#thumbs a:first").find('img').attr('alt');

$("#largeImg").attr({src: largePath, alt: largeAlt});
$("h2 em").html(" (" + largeAlt + ")");

1. Definimos a class=’ativo’ para o primeiro link dentro do div=’thumbs’
2. Armazenamos os atributos alt e href, respectivamente img e link, nas variáveis largePath e largeAlt
3. Atribuimos essas duas variáveis a imagem com id=”largeImg”
4. Acrescentamos dentro do <em> a variável largeAlt (veja depois a explicação do WebDesignWall)

Imagem frontal clicável

Agora definimos que quando a imagem com id=” largeImg” for clicada devesse pegar o próximo link.

$("#largeImg").click(function(){
$(".ativo").toggleClass("ativo").next("#thumbs a").addClass("ativo");

var largePath = $(".ativo").attr('href');
var largeAlt = $(".ativo").find('img').attr('alt');

$("#largeImg").attr({src: largePath, alt: largeAlt});}
$("h2 em").html(" (" + largeAlt + ")");

});

1. Localiza-se a class=”ativo’, remove e acrescenta ao próximo link a class= ‘ativo’
2. Armazenamos os atributos href e alt em variáveis.
3. Atribuimos ao #largeImg essas variáveis

Imagem frontal clicável: Definindo loop

Agora devemos definir um condicional para dizer ao script o que fazer quando chegar no último link descendente do div com id=’thumb’ .

$("#largeImg").click(function(){
if ($("#thumbs a:last-child").is(".ativo")){
    $("#thumbs a:first").addClass("ativo");
    $("#thumbs a:last").removeClass("ativo");

    var largePath = $(".ativo").attr('href');
    var largeAlt = $(".ativo").find('img').attr('alt');

    $("#largeImg").attr({src: largePath, alt: largeAlt});
    $("h2 em").html(" (" + largeAlt + ")");

} else{

$(".ativo").toggleClass("ativo").next("#thumbs a").addClass("ativo");

var largePath = $(".ativo").attr('href');
var largeAlt = $(".ativo").find('img').attr('alt');

$("#largeImg").attr({src: largePath, alt: largeAlt});}
$("h2 em").html(" (" + largeAlt + ")"); 

});

Se (if) o último link descendente de id=”thumbs” possuir a class=”ativo”

1. Adiciona-se a class=’ativo’ no primeiro link
2. Remove a class=’ativo’ do último link
3. Armazena nas variáveis href e alt e depois atribui eles pro largeImg

Caso o ultimo link NÃO possuir a class=’ativo’, ele executa o que já fora dito ‘Imagem frontal clicável’

Acrescentado hover no IE6

Vamos usar deste hack para emular o efeito hover no IE6. Notem que não há problema em usar desta pratica, desde que, não obstrua o site.

$('#hold-largeImg').hover(function(){
	$(this).css('border-color', 'ff9900');
}, function(){
	$(this).css('border-color', '');
}
);

Related posts:

1. Tecla de atalho com jquery
2. Atalhos, como podem melhorar o site

Bookmarks