album horizontal

[marvi 0]

Pessoal, tenho uma dúvida e queria tirar...

 

Eu obtive vários script interessante para exibir figuras de um banco de dados... mas queria saber se há algo em script possível para exibir as fotos dessa forma: com duas setas para um lado e para o outro para que possam ir clicando e vendo o restante das fotos e com a opção de zoom, existe algo desse tipo?

 

Eu tinha criado isso em flash, mas quero agora em javascript..., veja o exemplo:

 

 

 

Obrigado!

[Maujor 144]

Desenvolvi uma primeira aproximação para o slideshow solicitado.

Testado nas últimas versões do FireFox, IE, Opera, Safari/windows.

Bug no IE6.

A partir dela vou introduzir (quando sobrar um tempinho aqui :-) aperfeiçoamentos que considero

indispensáveis.

tarefas por fazer:

1. Resolver bug no IE6.
   
2. Tornar o slideshow personalizável, permitindo a definição de dimensões
   de imagens e thumbs, pelo usuário, no script.
   
3. Eliminar o aparecimento de barras de rolagem na tira dos thumbs
   quando a página é carregada.
   
4. Desenvolver uma versão com jQuery.
   
5. Substituir window.onload pela função addLoadEvent.
   
6. Passar o script e as CSS para um arquivo externo.
   

 

Visite este link para ver o slideshow em ação.

Disponibilizei o slideshow para download no link acima.

Fique à vontade para baixar a página e melhorar o script.

Poste suas modificações e/ou sugestões aqui.

[eibon 2]

Leia sobre jQuery,mais especificamente sobre "o animate".

http://docs.jquery.com/Effects/animate

No caso,você apenas alteraria as propriedades left e right do css(dentro do bloco animate).

Abraço!

[marvi 0]

Olá Maujor,

 

Vou baixar seu script... logo de cara vi que ele não roda legal no FireFox só no IE, isso?

[Maujor 144]

Olá Maujor,

Vou baixar seu script... logo de cara vi que ele não roda legal no FireFox só no IE, isso?

Não, não é isso.

Por favor! Leia meu post com atenção (Bug no IE6)

[marvi 0]

Pois no Firefox não roda ok.... eu estou tentando personalizar mas meu plano de fundo não consegue ser exibido como quero:

 

#inner-tira li {

background-image: url('fundo.jpg');

float:left;

width:118px;

height:180px;

text-align:center;

padding:10px 10px 0 10px;

margin:0 10px 10px 0;

 

O meu:

 

Adaptando para o seu:

[marvi 0]

Como fazer para ampliar horizontalmente o campo de fotos? Pois veja pelas fotos que só exibe 3 fotos, sendo que a 3 é cortada...

Também queria ampliar o campo de visão para baixo para pegar as letras ali escondida... é um iframe essas coisas?

[William Bruno 1501]

Cara... marvi ai basta ver no código fonte ne?!..

tá tudo lá... não tem iFrame não. O Maujor usou um UL LI, e uma DIV para fazer o campo das fotos em miniatura.

 

Se você quer aumentar a largura, vai lá no width do container e altera o valor. No caso o #slide, pq ele está englobando a rolagem de fotos tb.

[marvi 0]

Sei disso... mas ja rodei todo o CSS e nada fez com que ampliasse a leteral para exibir o resto das fotos... já coloquei background-image: url('fundo.jpg'); e etc... mas não vi isso

 

<style type="text/css" media="all">
html {background:#999;}


body {
	width:779px;
	height:700px;
	font:11px Arial, Helvetica, sans-serif;
	margin:10px auto;
	border: 1px solid #888;
	padding:10px 0;
	background:#ffffff;
	}
#galeria {
	/* regras CSS para posicionar a galeria na página */
	width:800px;
	margin:0 auto;
	}
#outer-palco {
	 height:375px;
	 width:500px;
	 margin-bottom:5px;
	 border:0px solid #999;
	}
#slide { 
	background:#F4F3F1;
	position:relative;
	width:590px;
	height:300px;
	overflow: auto;
	}
#tira { 
	float:left;
	position:absolute;
	left:30px;
	top:0;
	padding-top:8px;
	}
#inner-tira {
 	width:1400px;
 	height:200px;
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	left:0;
	}
#inner-tira li { 
	background-image: url('fundo.jpg');
	float:left;
	width:px;
	height:1000px;
	text-align:center;
	padding:10px 10px 0 10px;
	margin:0 20px 20px 0;
	}
#tira li a { 
	display:block;
	width:121px;
	height:90px;
	}
#tira img {	
	border:0px solid #666;
	display:block;
	width:116px;
	height:87px;
	}
span#seta-esq, span#seta-dir { 
	display:block;
	width:140px;
	height:132px;
	float:left;
	}
span#seta-esq { 
	background-position: 10px 50px; cursor:pointer;
	background-color:transparent; background-repeat:no-repeat; background-attachment:scroll
	}
span#seta-dir { 
	background-position: 10px 50px; float:right;
	cursor:pointer;
	background-color:transparent; background-repeat:no-repeat; background-attachment:scroll
	}
img { border:none; }
</style>

[marvi 0]

E sobre o slide... ele só amplia a parte cinza, mas a foto ainda continua cortada

 

#slide {

background:#F4F3F1;

position:relative;

width:700px;

height:300px;

overflow: auto;

[William Bruno 1501]

Veja que tem mais elementos lá englobando a listagem das fotos...

você tem que alterar todos eles... mas bom... o dificil ai, era o javascript, e isso tá perfeitinho.. pq não desenvolve o teu HTML?

 

o fórum é lugar de idéias... não de códigos prontos.

[marvi 0]

Pode deixar William...

 

Encontrei os problemas dos códigos... estou conseguindo ampliar as exibição das imagens perfeitamente... e quando estiver ok posto o código aqui...

 

Ha, aproveitando que Maujor solicitou, vou implementar uns efeitos e disponibilizá-lo... vou postar as minhas modificações quando estiver ok...

 

Era só questão de entender a lógica dele... mas agora já entendi...

 

Vai ser um cógido pronto no fim das contas, mas vou deixar para quem passsou por mesma dificuldade que passei e deixar a minha participação no código, tudo bem... http://forum.imasters.com.br/public/style_emoticons/default/coolio.gif

 

Mesmo assim obrigado.

[Maujor 144]

Atualizado para o fundo em degradê.

Faça o download dos arquivos com a atualização.

No meu Firefox está funcionando normalmente.

Qual a versão do Firefox que você está usando?

 

Nota: A largura da tira de thumbs é controlada pela propriedade CSS clip que foi definida no script.

[marvi 0]

Agora está ok no FireFox... reiniciei e está ok aqui também!

 

Estou vendo a opção das setas rodarem por dois lados e não para um lado só e depois o outro... tipo desse site www.tecnisa.com.br