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


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17735
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 na foto pequena para mostrar a foto grande jQuery

01-02-2016 17:28

Nesse post vou deixar um exemplo bem simples de como clicar na foto miniatura e exibir a foto maior.

Obs.: Nesse script você tem que ter a foto pequena e a foto grande.

<script src="jquery.js"></script> <script> $(document).ready(function() { $(".min").click(function() { $(".max").attr("src", $(this).attr("id")); $(".divmax").show(); }); }); </script> <style type="text/css"> .max{ width: 250px ; height:250px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color:#ccc; } .divmax{display:none;} </style> <img src="foto1_pequena.jpg" class="min" id="foto1_grande.jpg"> <img src="foto2_pequena.jpg" class="min" id="foto2_grande.jpg"> <div class="divmax" id="divmax"><img src="" class="max"></div>

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

Re: Clicar na foto miniatura para mostrar a foto grande jQuery

01-02-2016 17:43

Vou postar uma melhoria no código. Para clicar fora da foto para fechar a div com a foto grande.

Basta substituir o código jQuery acima por esse

<script> $(document).ready(function() { $(".min").click(function() { $(".max").attr("src", $(this).attr("id")); $(".divmax").show(); }); $("body").click(function(e){ if(e.target.className=="min") { return false; } else { $(".divmax").hide(); } }); }); </script>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]