Scroll em html5 e imagem

Sunscreen · 5 de novembro de 2014

Bom dia pessoal !

Preciso fazer um site e achei um modelo que atende minhas necessidades: http://html5up.net/parallelism

O problema é que algumas das imagens que irei usar são muito grandes e ficam difícil de se visualizar da forma que são apresentadas. Há alguma forma de exibir essas imagens com um scroll ou talvez no tamanho original para se ter uma melhor visualização ?

Obrigado !

emailpublico3 · 5 de novembro de 2014

Idependente da forma como for adicionar a Imagem, se for de forma manual, ou através de algum gerenciador, eu recomendo você a redimensionar suas Imagens.

Ajuste na tela, pois cada imagem que estorar a tela não vai ficar legal, e outra, dependendo da resolução a imagem ficar com tamanho grande, por exemplo, 5mb , seu site vai ficar lento. Fica mais legal se não exagerar!!!

DiF · 5 de novembro de 2014

@Sunscreen

Como você tentou usar esse plugin? No site diz que ele é responsivo, seja independente do tamanho ele ajusta o tamanho quando redimensiona a janela.

Posta aqui o código como tentou utilizar.

Sunscreen · 5 de novembro de 2014

@Sunscreen

Como você tentou usar esse plugin? No site diz que ele é responsivo, seja independente do tamanho ele ajusta o tamanho quando redimensiona a janela.

Posta aqui o código como tentou utilizar.

Gostei do fato de ser responsivo, porém no momento usaria apenas a parte "desktop". Estou usando conforme o modelo, e o problema esta sendo justamente esse redimensionamento.

Redimensionar as imagens não seria viável no meu caso, pois são planilhas com dados feitas no excel, e gostei da forma como seriam apresentadas nesse modelo de site, mas na proporção que teria que ser ajustadas ficaria complicado ler, pois algumas ocupariam cerca de 150% da página.

____

Mudando um pouco o rumo, também gostei desse outro modelo: http://html5up.net/miniport

Mas teria que fazer um menu dropdown pra acessar algumas coisas como queria, mas não estou conseguindo. Alguém tem alguma ideia ?

Desculpe as perguntas mas é que sou novo nessa parte web, e iria me ajudar muuuuito aqui no trabalho conseguir implementar algumas coisas do tipo. Queria dar uma repaginada em um site que usamos para exibir algumas imagens, vida de estagiário hehe.

DiF · 5 de novembro de 2014

Para usar o primeiro plugin você precisa que as imagens seja enviadas ao servidor via upload, não carregadas do arquivo do excel. também elas não podem ser gigantes..é aí que entra a função do PHP para que possas redimensionar as imagens respeitando sua proporção e encaixando no plugin que quer.

Sobre o segundo, precisas pesquisar um pouco mais sobre criação de menus responsivos.

Gostaria de deixar claro que não somos um "suporte técnico", mas tiramos suas dúvidas! Mas isso não quer dizer que faríamos o seu "trabalho"

Para podermos ajudar, precisa nos ajudar também postando seus códigos que tens dúvidas.. ainda mais como estagiários onde é a fase de aprendizado!

att,

Dif

Sunscreen · 5 de novembro de 2014

Sobre as imagens e o upload no servidor já fiz um programa em vba que faz isso, elas estão sendo carregadas no site em png e em sua maioria não são muito grandes apenas uma que tem 1240px de height, olhando nesse site que deixei como modelo fucei todo o js e não encontrei nenhum lugar pra tirar esse redimensionamento que faz onde limita a imagem apenas para tela cheia.

Sobre o menu, pesquisei bastante antes de postar aqui e não consegui encontrar nenhum lugar com algum modelo que aliasse o menu dropdown com esses sites (não sei dizer ao certo como se chama esse estilo, suspeito que landing pages ou bootstrap), cheguei a ler em alguns lugares que é inviável esse tipo de "mistura", tentei fazer manualmente mas também não consegui.

Amanhã pela manhã volto ao dilema ver se consigo fazer funcionar e posto aqui caso tenha algum resultado.

Muito obrigado pela ajuda.

DiF · 5 de novembro de 2014

Sobre o plugin parallelism, pesquisando sobre ele, não precisa que sejam redimensionadas as imaginas como havia dito.

em um teste que fiz aqui, utilizei todas as imagens em 1920 x 1080 ambas em suas devidas pastas como a "fulls" e "thumbs". Respectivamente são para armazenar a imagem no tamanho original e tamanho reduzido.

Só que tens que ver que como utilizei todas as imagens na mesma proporção, mas no exemplo exibiu tamanhos diferenciados.. isso quer dizer que o tamanho das imagens estão sendo redimensionadas por CSS justamente para não ter aquele problema de tamanhos diferentes para não quebrar o layout

Veja os prints do exemplo. ( usei alguns de meus papeis de parede )

Sobre menu responsivo dropdown, aqui um exemplo em funcionamento: http://jsfiddle.net/e9w8zop1/

só precisas redimensionar a divisória na vertical para a direita e ver como se comporta. ( se quiser saber mais sobre isso, pesquise sobre Médias queries do CSS3 )

Sunscreen · 5 de novembro de 2014

Belos papeis de parede xD

Então, no caso eu tenho uma planilha por exemplo, como essa que coloquei em anexo (apaguei as letras, mas ficam meio ruim de ler em "full screen"), gostaria que tivesse algum jeito de ativar o scroll ou algo do tipo pra ver a imagem sem ser redimensionada. Sobre os thumbs não tenho problemas em ficarem mal dimensionadas, mas as fulls tinham que realmente ficar full. E não achei a parte no css que faz isso

Vou tentar implementar esse exemplo do menu que postou no "miniport", mas acho bem difícil funcionar direito, ainda mais no layout que já esta pronto tão bem feito hehe. Vou dar uma lida sobre essas médias queries depois.