Tecla de atalho com jquery

Sunday 6 September 2009 às 18:12

O script abaixo faz com que o browser acesse a URL contida no elemento com id="next" ao ser solta uma determinada tecla.

Esse recurso pode ser adicionado em sites que tem diversas página como por exemplo, google imagens, ao inves de clicarmos em cima do link para próxima página simplemente pressionamos a seta para direita ( Key Code = 39 ).

$(document).ready(function(){
	$('document').keyUp(function(e){
	e.keyCode == 39;
	window.location = $('#next').atrr('href');
	});
});

Depois inserimos  id="next" no elemento em que queremos aplicar.

<a href="http://www.meusite.com.br/page/2/" id="next">Próxima Página</a>

Qual é o código da tecla?

Cada tecla tem seu próprio código, portanto, você tera que consulta-los para descobrir qual o código que a representa. Em Key Code Javascript você encontra um lista completa delas.

4xhp9t7f5u

Bookmarks

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', '');
}
);

Bookmarks