Ir para conteúdo
Fórum Script Brasil
  • 0

Galeria de Imagens

Jonathan Queiroz

Perguntado por Jonathan Queiroz,

 Share

Pergunta

Jonathan Queiroz

Jonathan Queiroz

Postado
Postado

Fiz esse script me baseando em um post de dúvida sobre como fazer uma galeria de imagens

O funcionamento é bem simples !

Código:

<html>
<head>
<title>Galeria de Imagens</title>
<style type="text/css">
#pagina {position: absolute ; left ; z-index: 1}
#div_imagem {border-style: inset ; background-color: black}
#imagem {border-style: inset}
#msg_imagem {background-color: white ; color: black ; width: 350 ;
border-style: ridge ; border-color: gray}
#controles {background-color: red}

#div_ampliar {position: absolute ; z-index: 2 ; visibility: hidden}
#imagem_ampliar {height: 466 ; width: 466 ; background-color: black}

.botao {width: 130}
</style>
<script type="text/javascript">
// Declara as imagens
var imagem = new Array();
imagem[0] = new Array();
imagem[1] = new Array();
var numero;
var numero2;
var imagem_atual;
var zoom;

//Coloca o nome (título) de cada uma das imagens
imagem[0][1] = "Minha Primeira imagem"
imagem[0][2] = "Foto número 2"
imagem[0][3] = "Minha terceira imagem"
imagem[0][4] = "Essa é a imagem de número 4"
imagem[0][5] = "Esta é a última imagem !!"
//Coloca a URL (caminho) de cada imagem
imagem[1][1] = "/imagem/001.jpg"
imagem[1][2] = "/imagem/imagem2.jpg"
imagem[1][3] = "/imagem/terceira-imagem.jpg"
imagem[1][4] = "/imagem/img004.jpg"
imagem[1][5] = "/imagem/5.jpg"
function MudaImagem(numero) {function AtualizaDados() {
zoom = 3/2
div1 = document.getElementById("pagina")
div2 = document.getElementById("div_ampliar")

div1.style.top = 100
div1.style.left = 440

div2.style.top = parseInt(parseInt(div1.style.top)*1/zoom)
div2.style.left = parseInt(parseInt(div1.style.left)/zoom)
div2.style.height = div1.style.height*zoom
div2.style.width = div2.style.width*zoom
}
imagem_atual = numero
numero = parseInt(numero)

img = document.getElementById("imagem")
img.src = imagem[1][numero]
img.title = imagem[0][numero]
msg_img = document.getElementById("msg_imagem")
msg_img.innerHTML = imagem[0][numero]
}
function ProximaImagem() {
if (imagem_atual>=imagem[0].length-1) {
MudaImagem(1)
}else{
MudaImagem(parseInt(imagem_atual)+1)
}
}
function VoltaImagem() {
if (imagem_atual<=1) {
MudaImagem(imagem[0].length-1)
}else{
MudaImagem(parseInt(imagem_atual)-1)
}
}
function Ampliar() {
img1 = document.getElementById("imagem")
img2 = document.getElementById("imagem_ampliar")
div2 = document.getElementById("div_ampliar")

img2.src = img1.src
img2.title = img1.title
div2.style.visibility = "visible"
}
function Reduzir() {
img2 = document.getElementById("imagem_ampliar")
div2 = document.getElementById("div_ampliar")
img2.src = ""
img2.title = ""
div2.style.visibility = "hidden"
}
function AtualizaDados() {
zoom = 170/100
div1 = document.getElementById("pagina")
div2 = document.getElementById("div_ampliar")
img = document.getElementById("imagem")
img2 = document.getElementById("imagem_ampliar")
ctrl2 = document.getElementById("controles2")
cmdReduzir = document.getElementById("reduzir")

// Atributos da página (sem zoom)
div1.style.height = 400
div1.style.width = 400
div1.style.top = 100
div1.style.left = 440
// Atributos da imagem (sem zoom)
img.style.height = parseInt(div1.style.height)-50
img.style.width = parseInt(div1.style.height)-50
img.style.position = "relative"
img.style.top += 3
// Atributos da div que mostra a imagem com zoom
div2.style.top = parseInt(parseInt(div1.style.top)/zoom)
div2.style.left = parseInt(div1.style.left) - parseInt(parseInt(img.style.width)*zoom - parseInt(img.style.width))/2
div2.style.height = parseInt(parseInt(img.style.height)*zoom)
div2.style.width = parseInt(parseInt(img.style.width)*zoom)
ctrl2.style.position = "relative"
cmdReduzir.style.height = 20
ctrl2.style.top = parseInt(cmdReduzir.style.height)*-1-5
// Atributos da imagem com zoom
img2.style.height = parseInt(div2.style.height)
img2.style.width = parseInt(div2.style.width)
img2.style.borderStyle = "ridge"
}
</script>
</head>
<center>
<body onload="AtualizaDados();MudaImagem(1)">
<div id="pagina">
<div id="div_imagem">
<img src="---" id="imagem" title="">
<br>
<div id="msg_imagem">A descrição da imagem ficará aqui</div>
</div>
<div id="controles">
<input type="button" class="botao" value="<" id="voltar" onclick="VoltaImagem()">
<input type="button" class="botao" value="Ampliar" id="ampliar" onclick="Ampliar()">
<input type="button" class="botao" value=">" id="avancar" onclick="ProximaImagem()">
</div>
</div>
<div id="div_ampliar">
<img src="---" id="imagem_ampliar" title="">
<div id="controles2">
<input type="button" value="Reduzir" id="reduzir" onclick="Reduzir()">
</div>
</div>
</center>
</body>
</html>

Espero ter ajudado !

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
  • Autor
Postado

Sim, você utilizaria o evento "setInverval" do JavaScript !

Ficaria assim:

<body onload="AtualizaDados();setInterval('ProximaImagem()', 5000)">

Obs.:

Aqueles 5.000 representam o tempo em milésimos de segundo (equivalente a 5 segundos)

Qualquer coisa, posta aí !

Link para o comentário
Compartilhar em outros sites
  • 0
vini_loock

vini_loock

Postado
Postado

muito bom. eu tava procurando isso a muito tempo, cheguei a postar aqui no formum, mas me disseram que tinha que usar banco de dados e outras coisas que esqueci o nome.

eu coloquei para trocar sozinho e funcionou, mas deppois da primeira imagen aparece sómente a tela preta e em baixo esta escrito undefined, porque iss?

eu acho que é por que eu tenho que colocar mais uma imagen, mas como eu faço isso?

vlw

Link para o comentário
Compartilhar em outros sites
  • 0
Jonathan Queiroz

Jonathan Queiroz

Postado
  • Autor
Postado

Em que navegador você testou ?

Tente adcionar outra imagem então e ver se funciona, aí se o problema estiver realmente na quantidade de imagens eu corrijo e posto aqui. Infelizmente não vai ter como fazer isso agora, mas se o problema for esse dá pra editar amanhã.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...