(Resolvido) Passando as fotos horizontalmente

marvi · Outubro 21, 2008

Olá pessoal,

Estou tentando fazer com que as fotos de um banco fique passando de forma horizontal, mas não estou conseguindo, alguém tem como me ajudar?

É o seguinte:

Aqui tenho em ASP as informações, as fotos, que vem do banco de dados

Set rsfotos = Conexao.Execute(SQLnoticia)
if rsfotos.eof then
response.write("<p align=center><font face='Verdana' style='font-size: 10pt' color='#ffffff'>Aguardem os nossos projetos!</font></p>")
else
 do while not rsfotos.eof
fotos= rsfotos("fotos")[/codebox]

Funciona normal as exibições das fotos nesse loop, só que é estático, parado...

Mas quero fazer essas fotos ficar passando horizontalmente e esse script faz isso, mas o problema é como fazer um certo loop nesse script para ele exibir todas as fotos do banco e ficar passando horizontalmente? Pois ele faz isto, mas como fotos prontas, fixas e não dinâmicas.

[codebox]<script type="text/javascript">

var sliderwidth="300px"
var sliderheight="150px"
var slidespeed=1
slidebgcolor="#EAEAEA"

var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

var imagegap=" "

var slideshowgap=10

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

<p align="center"> </p>

Veja que é no array desse script que as fotos são exibidas... e nela que tento e não acerto

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'

leftrightslide[1]='<a href="http://"><img src="dynamicbook2.gif" border=1></a>'

leftrightslide[2]='<a href="http://"><img src="dynamicbook3.gif" border=1></a>'

leftrightslide[3]='<a href="http://"><img src="dynamicbook4.gif" border=1></a>'

leftrightslide[4]='<a href="http://"><img src="dynamicbook5.gif" border=1></a>'

Alguém sabe como resolver isso ou tem uma dica melhor?

Obrigado!

Marcelo

Rafael Spilki · Outubro 21, 2008

Pelo que entendi, no seu caso seria apenas colocar onde aparece a fonte da foto o campo do bd que tem o nome dela e numerar os objetos automaticamente atraves de um contador...

ou seja:

...
n=1
do while not rsfotos.eof
...
'trocar isso:
leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'
'por isso:
leftrightslide[<%n%>]='<a href="http://"><img src="<%response write rsfotos("foto")" border=1></a>'
...
'fecha loop e tal
n=n+1

Acho que isso deve resolver... você já havia tentado assim?

[]'s Rafael Spilki

marvi · Outubro 21, 2008

Tentei o que você falou, no caso fiz assim:

n=1
<% 
  do while not rsfotos.eof
fotos=  rsfotos("fotos")
  %> 
leftrightslide[<%n%>]='<a href="http://"><img src="<%=rsfotos("foto")%>" border=1></a>'
 <% 
  rsfotos.movenext 
  loop
   %> 
   n=n+1

Mas dar esse erro:

Tipos incompatíveis: 'n'

/roiz/fotofrente1.asp, line 52

A linha 52 é: leftrightslide[<%n%>]='<a href="http://"><img src="<%=rsfotos("foto")%>" border=1></a>'

Jonathan Queiroz · Outubro 21, 2008

Tenta isso aqui:

n=1
<% 
  do while not rsfotos.eof
fotos=  rsfotos("fotos")
  %> 
leftrightslide[<%=n%>]='<a href="http://"><img src="<%=rsfotos("foto")%>" border=1></a>'
<% 
  rsfotos.movenext 
  loop
   %> 
   n=n+1

Ao invés de:

leftrightslide[<%n%>]='<a href="http://"><img src="<%=rsfotos("foto")%>" border=1></a>'

Utilize:

leftrightslide[<%=n%>]='<a href="http://"><img src="<%=rsfotos("foto")%>" border=1></a>'

marvi · Outubro 21, 2008

Olá,

Mas usando o <%=n%> imprimindo não serve... ele fica sem mostrar nada na tela... não dar erro, não dar nada...

n=1
<% 
  do while not rsfotos.eof
fotos=  rsfotos("fotos")
  %> 
leftrightslide[<%=n%>]='<a href="<%=fotos%>"><img src="<%=fotos%>" border=0></a>'
<% 
  rsfotos.movenext 
  loop
   %> 
   n=n+1

Rafael Spilki · Outubro 21, 2008

você declarou a variavel "n" em dim?

De qualquer forma... acho que o problema é outro... pode ser por causa desse vetor em JS... tenta declarar... se não der me avisa... o jeito acho que vai ser tentar algo no forum de js porque o único problema vai ser nesse contador...

Enquanto você testa vou dar mais uma pensada por aqui!

[]'s Rafael Spilki

marvi · Outubro 21, 2008

Pessoal, resolvir uma parte, era o "n" que estava fora do asp <%

<% n=1
  do while not rsfotos.eof
fotos=  rsfotos("fotos")
  %> 

leftrightslide[<%=n%>]='<a href="<%=fotos%>"><img src="<%=fotos%>" border=0></a>'

<% 
  rsfotos.movenext 
  loop
   n=n+1 %>

Agora o problema é porque as fotos não aparecem?

Pois se coloco assim as fotos não exibe, fica com aquele "x"...

leftrightslide[<%=n%>]='<a href="<%=fotos%>"><img src="<%=fotos%>" border=0></a>'

mas se coloco assim fica mostrando a foto, contudo só mostra essa foto única

leftrightslide[<%=n%>]='<a href="teste.gif"><img src="teste.gif" border=0></a>'

alguém sabe por que?

Jonathan Queiroz · Outubro 21, 2008

Executa a página e depois olha o código-fonte

Vê se acha algum erro no HTML

Se encontrar, posta aqui.

Depois de observar o HTML, veja se o caminho para a imagem existe

marvi · Outubro 21, 2008

Resolvi também... foi que esquecir de colocar algumas figuras na pasta!!

Mas quando coloquei para rodar as imagens, ela não ficou legal... ficou uma mais alta que a outra, cortando tudo... tem como organizar isso nesse javascript? veja como ficou:

Ficou um mais alto que o outro... deveria está tudo no topo e corta em baixo e não em cima...

Atenção!

Vi que o controle de exibição é nessa div do script

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" width="100%"><td valign="top">')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

Só que coloquei o comando valign="top" e não fez as fotos exibirem no topo da tabela...

Editado Outubro 21, 2008 por marvi

Jonathan Queiroz · Outubro 21, 2008

Usa os atributos "height" (altura - tamanho de cima para baixo) e "width" (largura - tamanho da esquerda para a direita)

Exemplo:

<img src="imagem.jpg" border=0 height="600" width="600">

(só um exemplo, você vai mexendo aí até ficar do tamanho que você quer)

marvi · Outubro 21, 2008

Isso mesmo, funcionou! Mas tem fotos que são compridas e outras largas... sendo assim as compridas acabam ficando amassadas...

Ai deixei assim sem o width="600", por exemplo:

Pois assim ele só puxa de um ângulo a foto!

Valeu está ok!

Muito obrigado pessoal!!

Rafael Spilki · Outubro 21, 2008

beleza Marvi! Q. bom que deu certo... esse contador que te mostrei aí realmente é muito útil... simples mas útil... você pode fazer várias coisas com ele... mas sempre em asp né! rsssssssssssssssss...

Tinha ficado na dúvida por se tratar de um vetor JS, mas foi legal o seu retorno porque pude ter certeza que funciona tb ali!

Quanto as dimensões... realmente... um problemão... o jeito é setar uma só dimensão e depois deixar as outras no automático mesmo... OOOOOUUUU... você pode usar um componente de crop... mas nem sempre isso é bom e pode acabar cortando partes fundamentais das fotos, além de ser bem complicadinhio de fazer funcionar e só ter disponível mesmo em servidores proprios (raros servers que oferecem isso... é meio carinho)...

Mas era isso, qualquer coisa posta aí!

[]'s Rafael Spilki

marvi · Outubro 22, 2008

Valeu Rafael, sempre dando suporte ao pessoal! :)

Está na hora de virar moderador e deixar de ser Estagiário do fórum do script brasil risos rssrs

Abraço!

Entrar

(Resolvido) Passando as fotos horizontalmente

Pergunta

Link para o comentário

Compartilhar em outros sites

12 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns