Jump to content

  2. →
  3. →
  4. →
  5. →

Photo

Javascript

Started By operations, 11/04/2004, 01:35

  • Faça o login para participar
24 replies to this topic

#1 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 11/04/2004, 01:35

Olá pessoal,

Estou criando agora a galeria de fotos do meu site, mas queria usar java pra facilitar o trabalho sacoé, tipo quando vc clica na foto a foto abre em janelhinha java com o tamanho certo e tudo.. sei que se deve criar um arquivo .js mas naum sei como começar, será que vcs poderiam me ajudar?

vou dar um exemplo:

Exemplo de Galeria

nessa galeria ateh aparece uma pagina de redirecionamento com um "loading" mas nem quero issu se puderem me ajudar com o básico fico feliz, ok?

vlw

(y)

#2 Lucia

Lucia

    24 Horas

  • Usuários
  • 436 posts
  • Sexo:Feminino
  • Localidade:Campo Grande MS

Posted 11/04/2004, 09:13

(y) Use janelas pop up...
www.educamor.net
www.educamor.com.br

#3 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 11/04/2004, 13:50

obrigado pela atenção lucia, mas acho q eu naum soube me explicar direito, eu queria fazer uma galeria igual a esta q dei como exemplo vc deu uma olhadinha?

uma galeria q abra as fotos em janela pop up usando um arquivo ".js" q serve de base pra estas janelas definindo um padrão de tamanho e tudo sabe? eu sei q este arquivo fica na pasta raiz do site ai é so criar um link pra ele na hora de abriri as janelinhas...

será q poderia me ajudar?

obrigado

#4 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 11/04/2004, 14:20

javascript é meu forte. Eu uso uns scripts um pouco mais complexos quando quero fazer uma galeria de fotos em popup, com tamanho definido, mas vou mostrar como o webmaster fez essas. Não será igual, mas tem o mesmo efeito.


popup.js
<!--
function popup(i) {
var janela="window.open(i,'Galeria','scrollbar=yes,menubar=no,toolbar=no,resizable=no,width=500,height=400,location=no,fullscreen=no');";
eval(janela);
}
//-->

galeria.htm
<html>
<head>
<script language="javascript" type="text/javascript" src="popup.js"></script>
<title>Galeria de Fotos</title>
</head>

<body>
<img src="imagem.gif" width="250" height="100" onclick="popup('imagem_grade.gif');">
</body>
</html>


O script você não muda. Você só muda os links. A tag <img> pode ser posterior à tag <a>, ou usar o atributo onclick, como eu usei.

Intercalando os script na página:

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function popup(i) {
var janela="window.open(i,'Galeria','scrollbar=yes,menubar=no,toolbar=no,resizable=no,width=500,height=400,location=no,fullscreen=no');";
eval(janela);
}
//-->
</script>
<title>Galeria de Fotos</title>
</head>

<body>
<img src="imagem.gif" width="250" height="100" onclick="popup('imagem_grade.gif');">
</body>
</html>


O exemplo acima está em anexo.

Attached Files


Edição feita por: Without a Nick, 11/04/2004, 14:24.

#5 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 11/04/2004, 16:29

naum entendi muito bem a parte de intercalar, olha vou dizer exatamente o q eu fiz, eu copiei o codigo fonte da pagina galeria.html q vc enviou pra este post ai eu so alterei o link, funcionou a figura abriu na popup mas naum entendi muito bem a utilidade do popup.js e naum entendi pq a pagina popup q abre naum pode ter fundo, titulo, e link como a da galeria q eu te dei como exemplo tem, fiz alguma besterira né ?


como faço pra alterar a pagina em q a figura vai aparece, a pagina popup? queria colocar o fundo de outra cor, com uma figura dentro e tudo mais tipo um botao pra fexar a janela sabe como?

vlw mesmo (y) tu é fera em java mesmo cra

Edição feita por: operations, 11/04/2004, 17:00.

#6 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 11/04/2004, 19:27

Primeiro, agradeço os elogios.

Segundamente, uma nota: java num é javascript. Java é um aplicativo poderoso que faz outros programas. Javascript cria "aplicativos", se assim posso chamar, para a Web.

Segundamente e meio :lol: , o lance de intercalar é assim: você cria dois arquivos distintos (no caso, popup.js e galeria.html), e, na página galeria.html, você coloca assim na tag <head>, logo abaixo da <html>:

<script language="javascript" type="text/javascript" src="popup.js"></script>

Isso fará a conexão com o arquivo js.

Depois, você coloca as fotos. E nas fotos, você pode fazer assim, de dois modos:

1º modo:
<a href="javascript:popup('imagem.jpg');"><img src="imagem_pequena.gif" width="largura" height="altura" border="0"></a>

O segundo modo, a gente coloca um atributo handler na imagem.

O que é um atributo handler? Handler, ou eventos, são ações feitas em tags que são ligadas a scripts javascript. Existem dezenas de handlers, sendo os famosos:

onmouseover
onmouseout
onclick
onfocus
onblur
onerror
onresize
ondblclick
onload
onunload


Se um dia quiser uma explicação mais detalhada sobre eles, fale comigo por msn, ok?

Bem, continuando: Podemos usar o script criado [popup()] na imagem, através do atributo onclick, que será acionado quando a pessoa clicar na imagem:

2º modo:
<img src="imagem_pequena.gif" width="largura" height="altura" onclick="popup('imagem.jpg');">

Para você criar uma página padrão, você pode fazer de duas maneiras:

1. Com querystring (não usaremos);
2. Definindo no script (que é mais rápido e também funciona.)

Como eu disse, vamos usar o segundo método.

Assim, no script, faremos:


popup.js
<!--
function popup(i) {
janela=window.open('','Galeria','scrollbar=yes,menubar=no,toolbar=no,resizable=no,width=500,height=400,location=no,fullscreen=no');
janela.document.write("<title>Galeria de Fotos</title>");
janela.document.write("<body bgcolor='#000000' text='#FFFFFF'>");
janela.document.write("<center><img src='"+i+"' height='150' width='250'><br>");
janela.document.write("<a href='javascript:self.close();'>Fechar janela</a></center>");
}
//-->

Agora, colocarei novo arquivo popup.js para você ver, ok? Você baixa ele no seu pc. Entre em EXIBIR>CÓDIGO FONTE


E se não entender alguma coisa, dá um grito, tá?

Attached Files

  • Attached File  popup.js   465bytes   170 downloads

#7 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 11/04/2004, 22:47

obaaaaaaaaaaaaaa

vlw mesmo kra, acho q agora consegui pq FUNCIONOU!!! me amarrei nesse onclick muito legal mesmo.

oh quando quiser minha ajuda em design (o q sei fazer razoavelmte) pode contar comigo, ok?

(y)

#8 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 11/04/2004, 22:54

Obrigado, pois não sou aquelas maravilhas em design.

Mas qualquer outra dúvida, fala, ok? ;)

#9 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 13/04/2004, 19:10

qndo quiser é so falar...

ta dando tudo certo mas como faço pra ao invés de ter um texto escrito "fechar janela" colocar uma figurinha com a mesma intenção, fechar a janela...

vlw mais uma vez

#10 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 14/04/2004, 15:56

Veja esta linha:

janela.document.write("<a href='java script:self.close();'>Fechar janela</a></center>");



Substitua por:

janela.document.write("<a href='java script:self.close();'><img src='fechar.gif' width=50 height=25></a>");


Crie uma imagem chamada fechar.gif ou mude o nome da imagem na tag <img>.

#11 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 14/04/2004, 19:48

vlw mais uma vez :)

#12 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 14/04/2004, 22:22

Se precisar, já sabe.

#13 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 15/04/2004, 20:49

vou te pedir só mais uma coisinha hehehe
olha sabe o cursor usado neste site: http://www.sectionintel.net/main.htm então isso é algum javascript? como faço pra ter esse cursor?

vlw de novo (y)

#14 Without a Nick

Without a Nick

    Sem culpa no cartório

  • Usuários
  • 2378 posts
  • Sexo:Não informado
  • Localidade:Guarulhos

Posted 15/04/2004, 22:03

Isso é CSS.

<style type="text/css">
<!--
body {cursor:crosshair;}
//-->
</style>


Aí eu coloquei como para exibir na página toda, aí vc adapta para as tags, ids, e classes que você quiser.

#15 operations

operations

    Novato no fórum

  • Usuários
  • 19 posts
  • Sexo:Não informado

Posted 17/04/2004, 22:54

ah tah é css

fiz o modelo do meu site usando css mas nao sabia q o cursor tbm envolvia isso, olha mandei em anexo o meu arquivo.css como faço pra incluir essa tag do cursor nele todo ai vai servir pra todas as paginas.

(y)

Attached Files


Edição feita por: operations, 17/04/2004, 22:56.

Voltar para FrontPage


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → Editores HTML
  5. → FrontPage
  6. Privacy Policy
  7. Regras ·
IPB Skin By Virteq