Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS

Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

06-10-2012 17:59

Estou postando um script bem simples em jQuery para que quando um a href / link seja clicado, carregue a imagem do href dentro de uma div.

<script src="jquery.js"></script> <script> $(document).ready(function() { $(".imagem").click(function(event) { event.preventDefault(); $("#imagem").html($("<img>").attr("src", this.href)); }); }); </script> <a href="1.gif" class="imagem">imagem</a> <a href="2.gif" class="imagem">imagem</a> <div id="imagem"></div>

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 09:10

Parabéns pelo exemplo!


Web eu gostaria de saber como fazer uma imagem aparecer dentro de uma DIV a partir de um atributo. Por exemplo, no meu site tenho vários usuários que escrevem para o site, e toda vez tenho que fazer um link, dentro de uma DIV, para a foto do usuário. Minha dúvida é a seguinte, é possível fazer a imagem aparecer na DIV de acordo com o nome do usuário?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 09:28

Mas seu sistema usa banco de dados? Porque é possível definir o endereço da imagem que vai aparecer em determinado img src.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 09:47

infelizmente a empresa não tem hospedagem com banco de dados (é complicado).Como seria o código sem um banco de dados?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 09:52


<script src="jquery.js"></script> <script> $(document).ready(function() { $("#img").attr("src", "imagemtal.jpg"); }); </script> <img id="img" src="">

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 10:22

cara não querendo ser chato mas... ainda estou com uma dúvida.


Por exemplo: Vamos supor que tenho várias pessoas que escrevem artigos para o site (de forma totalmente aleatória). Em uma determinada DIV com nome "autor" coloco o nome da pessoa que escreveu o artigo. Minha pergunta é a seguinte, como faço para aparecer a foto da pessoa a partir da DIV "autor". Ou seja, é possível que sem um banco de dados, eu possa carregar a foto do autor dentro de uma DIV a partir do nome?

Explicando um pouco mais. Com jquery ou javascript posso fazer uma imagem aparecer em uma DIV a partir daquilo que está escrito dentro de uma outra DIV? O jquery ou javascript, pode chamar a foto a partir da leitura do nome da pessoa dentro da DIV "autor"?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 11:31

Mas de onde vem esse artigo? O artigo deve estar armazenado em algum lugar. Para obter também a imagem.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 11:45

Ocorre o seguinte, tenho um modelo de página para colocar os artigos, coloco os artigos nessa página via html.


Para melhor exemplificar coloco o link: http://www.franciscanosrondinha.com.br/ ... 2/072.html.


Como pode ver cada página tem um autor diferente. Como faço para carregar a imagem do autor - via javascript - dentro de uma DIV ao lado do nome do autor. Ou seja, ao invés de correr sempre atrás da foto do autor, eu gostaria que o script carregasse a foto pelo nome do autor do texto.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 11:53

Esse artigo é colocado manualmente, correto?

Com o script que indiquei, você define a imagem que irá ser carregada em determinada img que está posicionada já no HTML.

Sendo assim, você vai pegar o script que indiquei, e colocar o nome da imagem relativa ao autor.

Agora, você quer carregar a foto pelo nome do autor, qual a relação entre o nome e a foto?
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 12:01

A relação entre a foto e o autor é a seguinte.

O nome de cada foto é o nome do autor, ou seja, a foto de Roberto, tem o nome de Roberto, correto?

Cada artigo tem um autor (vide exemplo), onde está escrito: "Por: Frei Roberto....", é uma DIV. Então eu penso que, se é possível o script reconhecer o nome que está dentro da DIV e através disso carregar a foto respectivo autor.

Compreendeu?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 12:33

Eu dei uma olhada na div que tem o nome do autor e encontrei o seguinte:

<div id="autor"><!-- InstanceBeginEditable name="EditRegion4" --> <p>Por: Fr. Roberto Aparecido Pereira, OFM.</p> <!-- InstanceEndEditable --></div>

Se você tivesse algo como:

<div id="autor">Joao pedro</div>

E a seguinte foto: Joao pedro.jpg

Dá para fazer a relação.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 12:44

Ok! Compreendi.

Vou mudar e como fica o código então?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 12:51

Veja esse exemplo

<script src="jquery.js"></script> <script> $(document).ready(function() { // aqui é adicionado no final da div autor // a imagem vai ser composta do valo da div após o p + .gif $("#autor").append("<img src='"+$("#autor div").html()+".gif'>"); }); </script> <div id="autor"> <p>Por: Fr. Roberto Aparecido Pereira, OFM.</p> <div style="">Roberto Aparecido Pereira</div> </div>

Obs.: Adiciona o display:none; dentro do style da div acima.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 13:06

eu não compreendi onde coloco o link da foto
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 13:09

Você falou que a foto era o nome do autor. Baseado nisso eu coloquei uma div só com o nome do autor.

<div style="">Roberto Aparecido Pereira</div>

No carregamento da página, esse nome é pego de dentro da div, e usado como nome para colocar a imagem após o p

$("#autor").append("<img src='"+$("#autor div").html()+".gif'>");

A imagem ficará: Roberto Aparecido Pereira.gif
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 13:17

Perdão a última pergunta foi mal formulada!

Eu quis perguntar onde deixo as imagens, se é na raiz ou em uma pasta de imagens?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 13:18

Fica mais organizado se colocar uma pasta só para as imagens, por exemplo: fotos/

O script ficará

$("#autor").append("<img src='fotos/"+$("#autor div").html()+".gif'>");

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 13:32

:clap: Cara valeu vou montar o script!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 14:26

;)
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 14:42

Cara surgiu uma dúvida aqui.... é possível colocar a imagem em outra DIV? Tipo uma DIV preparada para receber a foto do autor?

é que eu achei que ficou meio estranho tudo em uma mesma div.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 14:48

Sim. Você pode fazer assim

$("#suadiv").html("<img src='imagem.jpg'>");

0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 15:03

Vamos ver se eu entendi

O script fica assim?

<script src="jquery.js"></script> <script> $(document).ready(function() { // aqui é adicionado no final da div autor // a imagem vai ser composta do valo da div após o p + .gif $("#autor").append("<img src='fotos/"+$("#autor div").html()+".gif'>"); }); </script>

Dai dentro da DIV que eu quero que a imagem apareça eu coloco isso:

$("#autor").html("<img src='imagem.jpg'>");

Está correto? Lembrando que as fotos estarão em uma pasta!
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 16:12

Esse código

$("#autor").append("<img src='fotos/"+$("#autor div").html()+".gif'>");

É para anexar a imagem no final da div #autor

Se você colocou uma div só para imagem, tem que fazer assim

$("#suadiv").html("<img src='fotos/"+$("#autor div").html()+".gif'>");

Onde suadiv é o id da div que vai receber a foto.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:
 
Mais de 75 postagens
Mais de 75 postagens
Mensagens: 75
Sexo: Masculino

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 16:46

na DIV que irá receber a foto preciso colocar alguma coisa?
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17238
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Clicar no link para carregar imagem dentro da div jQuery

11-10-2012 16:51

Não, porque com esse código que passei ele vai ficar como conteúdo da div.
0
Criar site grátis Wix
Hospedagem de sites Hostgator
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum
:rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado