3

Estou me aproveitando de um sistema de galerias que achei na web onde, dependendo da proximidade da imagem do mouse, ele amplia proporcionalmente.

Link: Galeria de imagens

Bom, adaptei o código para ser responsivo (e como podem ver está em construção) e não há nenhum problema aparente. O meu problema começa quando se muda a resolução (seja usando o zoom do navegador, seja 'girando' o tablet ou celular). Ao passar o mouse ou clicar (com touchs) em cima de qualquer imagem, na sua resolução cuja página foi carregada, com a descrição nada acontece, mas quando se dá um pequeno zoom, já é possível ver todo o desalinhamento da descrição com as imagens. A altura da imagem é igual à largura. A largura é relativa.

Imaginei uma única solução para meu problema: usar jQuery. Programo com um nível básico - intermediário nesse framework e consigo fazer boas coisas. Mas não faço ideia de como, ao alterar a resolução, alterar o tamanho da descrição automaticamente. Até o momento, uso esse código para deixar ambos iguais:

$(document).ready(function(){
$(".gallery-description").height( $(".gallery-thumbs li a img").height());
})

Espero que alguém possa me ajudar melhorando a função ou dando outra sugestão! Obrigado. :)

1 Resposta 1

2

Você pode utilizar a função jQuery .resize():

$(window).resize(function(){
    $(".gallery-description").height( $(".gallery-thumbs li a img").height());
});

Exemplo: FIDDLE

O que esta função faz é disparar um evento a cada vez que for detectado uma diferença da resolução da janela do navegador. O lado ruim é que caso você dispare alguma função pesada, ela vai ser executada a cada pixel mudado no tamanho da tela, o que pode afetar a performance.

1
  • Me responderam no SO internacional exatamente a mesma coisa. Obrigado pela atenção! (faço as perguntas em ambos pois sabe como é né xD) 7/09/2014 às 2:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .