Ir para o conteúdo
brunoais

Apresentar imagens em linhas de tamanho igual

Mensagens Recomendadas

brunoais

Nota: Eu ainda não tenho código feito para isto porque ainda não faço ideia por onde começar.

Nota2: Estou interessado em soluções sem o uso de bibliotecas/frameworks.

Foi-me pedido recentemente para fazer um sistema para mostrar imagens que, em disposição de elementos, semelha-se ao do bing. Por exemplo:

http://www.bing.com/images/search?q=portugal+a+programar

jGqTUFoFmwjX9.jpg.

A parte que é mais complicada de se lidar é o ter as imagens em linhas de tamanhos exatamente iguais.

Isso é feito redimensionando imagens (com alterações muito pequenas de tamanho e algumas alterações de formato) e (aparentemente) alguma reordenação de imagens.

O meu problema baseia-se no seguinte:

Como é que isto é feito com sucesso? Que tipo de cálculos se fazem? Como é que garanto que tenho, no final, linhas com o mesmo tamanho?

Isto tem que passar por alguma matemática e outros pormenores importantes que simplesmente não estou a conseguir ver.

De qq modo, isto é feito com CSS e javascript.

Quero usar o máximo de CSS possível, e usar o javascript para o complementar para o que o CSS é incapaz.

P.S. Entretanto, agora mesmo, recebi uma indicação de quem me pediu isto. Ele quer que as imagens sejam reordenáveis mas não se importa que se tenha que reler a página para aplicar a reordenação.

Tendo em conta isto... Será que ainda é possível obter o efeito pedido?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

agora, se metes ordem obrigatória, acho que se torna impossível sem estragar rácios de tamanhos

Hum... O objetivo era até estragar um pouco (mesmo pouco) os rácios das imagens...

Talvez procurar por Responsive Layouts te ajude.

Em que parte desse paradigma? responsive layout contém mesmo muita coisa...


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
JoaoRBP

Sera isto?

<img src="http://radiomec.com.br/novidades/wp-content/uploads/2012/05/5155bola.jpg" />
<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Esquema_valvula_de_bola.jpg" />
<img src="http://i.ytimg.com/vi/7Vjf0-ZiUOQ/0.jpg" />
<img src="https://twimg0-a.akamaihd.net/profile_images/1498644003/RF1Bola.jpg" />
<img src="http://x.castroelectronica.com/Imgs/produtos/import/OPEN4.jpg" />

var images = document.getElementsByTagName('img'),
   lgth = images.length;

for( var i = 0; i < lgth; i++) {
   images[i].style.width = 'auto';
   images[i].style.height = '100px';
}

http://jsfiddle.net/h2wRJ/1/

Editado por Rui Carlos

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

@JoaoRBP

Não, nem de perto!

Viste sequer como é feito no Bing?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
JoaoRBP

@brunoais

Ok, então não percebi bem.

Pensava que o que querias era todas as imagens com o mesmo tamanho, mas que a largura da imagem podia ser diferente para não estragar a resolucão da imagem.

No exemplo do bing e isso que vejo, tudo com o mesmo tamanho, mas largura diferente.

Desculpa se não percebi e ignora o meu post.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

isto é uma ideia :

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>    
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <style type="text/css">
     #show {
       margin: 0 auto;
       width: 900px;
     }
     #show div {
       display: inline;
       overflow: hidden;
     }
     img {
       padding: 0;
       margin: 0;
       height: 100px;
     }
   </style>
   <script type="text/j&#097;v&#097;script">
     window.onload = function() {
       var show = document.getElementById('show');
       var maxsize = show.offsetWidth;
       var images = show.getElementsByTagName('div');

       var size = 0;
       var init = 0;

       for (var i = 0; i < images.length; i++) {
         size += images[i].offsetWidth;

         if (size > maxsize) {
           var screw = 1 - ((size / maxsize) - 1);

           for (var j = init; j <= i; j++)
             images[j].getElementsByTagName("img")[0].style.width = Math.floor(images[j].offsetWidth * screw) - 1;

           size = 0;
           init = i;
         }
       }

       if (size != 0) {
           var screw = 1 - ((size / maxsize) - 1);

           for (var j = init + 1; j < i; j++)
             images[j].getElementsByTagName("img")[0].style.width = Math.floor(images[j].offsetWidth * screw) - 1;
       }

     }
   </script>
 </head>
   <div id="show">
     <div><img src="http://netponto.org/Content/uploads/revista-programar/logo-portugal-a-programar.png" alt="image1" /></div>
     <div><img src="http://wiki.portugal-a-programar.pt/_media/pap_2011_only_logo_.png" alt="image2" /></div>
     <div><img src="http://static.portugal-a-programar.pt/images/tshirts/pap-tshirts.jpg" alt="image3" /></div>
     <div><img src="http://blog.webtuga.pt/imagens/image-import/img707/6571/logota.png" alt="image4" /></div>
     <div><img src="http://fc09.deviantart.net/fs47/f/2009/173/9/b/9b0070a08362db32bd1f81d79f983521.png" alt="image5" /></div>
     <div><img src="http://img.pho.to/img/thumbs/portugal-a-programar.pt/_medium.jpg" alt="image6" /></div>
     <div><img src="http://img339.imageshack.us/img339/7628/imagem13ob.jpg" alt="image7" /></div>
     <div><img src="http://www.wiki.portugal-a-programar.pt/lib/tpl/dokubook/images/dokuwiki-128.png" alt="image8" /></div>
     <div><img src="http://media.steampowered.com/steamcommunity/public/images/avatars/c4/c44d12e61730de57d34f13e95c700b6531207146_full.jpg" alt="image9" /></div>
     <div><img src="http://caioproiete.net/pt/wp-content/uploads/2011/05/banner-pap.jpg" alt="image10" /></div>
   </div>
 <body>
 </body>
</html>

ps : podes ainda , em vez de diminuir, verificar se é melhor aumentar e deixar a última para a linha seguinte

Editado por brunoais
O geshi estava estragado por causa da edição do post.

IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

@HappyHippyHippo

Parece ser algo interessante que tens aí.

Qd chegar a casa vou testar!


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Peço desculpa, mas há um pormenor que faltou mencionar que só fiquei a saber há pouco:

Todas as imagens a mostrar neste estado são thumbnails e esses thumbnails têm tamanhos (largura e altura) próximos.

Acho que isto deve ser uma grande ajuda para se conseguir obter este efeito. Não há necessidade de ter tanto cuidado para se parecer bem como no caso do Bing.

Tendo em conta esta indicação, acho que até poder-se-ia conseguir o que se quer só brincando com as margens dos elementos que não estão no limite esquerdo ou no limite direito do ecrâ. Com uma média de 5 imagens por linha (tenho 6 no meu e estou a meter em formato 1024x768), deve ser possível...

Tb tenho que tratar de outro requisito:

Ele tem que se adaptar ao tamanho do ecra (ser possível ver em dispositivo móvel, de ecrâ "considerável", sem ter de se fazer scroll horizontal). Mínimo 2 imagens por linha (a n ser que a sozinha seja a ultima imagem da lista), o máximo, é o máximo que couber.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
yoda

Tb tenho que tratar de outro requisito:

Ele tem que se adaptar ao tamanho do ecra (ser possível ver em dispositivo móvel, de ecrâ "considerável", sem ter de se fazer scroll horizontal). Mínimo 2 imagens por linha (a n ser que a sozinha seja a ultima imagem da lista), o máximo, é o máximo que couber.

Era aí que queria chegar. Chama-se ao markup desenhado para se adaptar a várias width's de dispositivos Responsive Layout, para esse caso em especial Responsive Images. É bastante simples o processo, basta que mal a resposta ao cliente seja recebida no browser, fazer com que o mais rápido possível seja criado um cookie com javascript que contenha as dimensões do dispositivo / ecrã, e fazer com que todos os requests a imagens passem por um filtro que devolva as versões adequadas das imagens ao dispositivo para apresentação. Escusado dizer que usar cache é uma boa ideia.

Existem alguns scripts para conseguir o pretendido que podes explorar na net, mas não sei de nenhum que não tenha dependências de bibliotecas.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

@yoda

Hum... Aí entra outra coisa :/. O servidor só tem 2 versões das imagens, para cada imagem. Isso não se vai alterar ("it's final").

De qq modo, posso alterar as dimensões das imagens usando CSS.

Vou procurar um pouco por ideias... Pode ser que encontre algo interessante.

De qq modo, o código do HappyHippyHippo é bem interessante.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
NunoDinis

Boa tarde,

Estava aqui em pesquisas e surgiram-me vários jquerys de responsive layouts. Como sei que andas às voltas com isto, deixo-te aqui o link: http://www.jqueryrain.com/category/jquery-responsive/page/2/

Espero que te ajude.


Estranha forma de vida que tem a capacidade de transformar comandos em mensagens de erro.

ndsotware.org

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Obrigado pela tentativa, @NunoDinis ... Mas nenhum dessa lista de 10 páginas serve para resolver este problema.


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
yoda

@yoda

Hum... Aí entra outra coisa :/. O servidor só tem 2 versões das imagens, para cada imagem. Isso não se vai alterar ("it's final").

De qq modo, posso alterar as dimensões das imagens usando CSS.

Podes executar o resultado com CSS, mas recebendo do servidor as dimensões a aplicar.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.