Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
MarcosCS

JQuery - efeito flip em várias imagens

Recommended Posts

Boa tarde, pessoal!

Estou começando com HTML há pouco tempo e tenho que entregar um trabalho na faculdade. Na página que estou fazendo quero fazer um efeito flip com algumas imagens, sendo ao clicar nelas seja exibido um pequeno painel sobre cada uma delas, de forma independente.

Com o código que eu fiz não consigo fazer isso em todas as fotos, apenas na primeira imagem.

Segue o esboço do código:

<!Doctype html>
<html>
    <head>
        <title>TESTE</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <meta charset = 'utf=8'>
        <style type="text/css">
            body{
                background: gray;
                }
            #flip{
                cursor: pointer;
            }
            #panel{
                text-align: justify;
                padding: 5px;
                display: none;
                width: 25%;
                opacity: 0.4;
                background-color: #ffffff;
            }
        </style>
      
        <script>
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideToggle("slow");
                });
            });
        </script>
    </head>

    <body>
        
        <div align = 'left' >
            <img id = 'flip' src = 'foto1.jpg'>
            <div>Nome da Foto</div>
            <div id = 'panel'>Aqui foi reservado para que seja exposto
                            um pequeno texto referenete a imagem clicada.</div>
        </div>
        <div align = 'center' >
            <img id = 'flip' src = 'foto1.jpg'>
            <div>Nome da Foto</div>
            <div id = 'panel'>Aqui foi reservado para que seja exposto
                            um pequeno texto referenete a imagem clicada.</div>
        </div>
        <div align = 'right' >
            <img id = 'flip' src = 'foto1.jpg'>
            <div>Nome da Foto</div>
            <div id = 'panel'>Aqui foi reservado para que seja exposto
                            um pequeno texto referenete a imagem clicada.</div>
        </div>
    </body>
</html>

 

Editado por DiF
Botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@MarcosCS Olá,  Seja bem vindo em nosso Clube do Hardware.

 

Creio que o seu problema esteja em utilizar o mesmo ID nas outras imagens.

Experimente alterar de ID para  CLASS. 

 

id="flip"  para  class="flip"

id="painel" para  class="painel"

 

E no CSS de:

#flip{
       cursor: pointer;
   }
#panel{
       text-align: justify;
       padding: 5px;
       display: none;
       width: 25%;
       opacity: 0.4;
       background-color: #ffffff;
}

 

Para:

.flip{
       cursor: pointer;
   }
.panel{
       text-align: justify;
       padding: 5px;
       display: none;
       width: 25%;
       opacity: 0.4;
       background-color: #ffffff;
}

Lembre-se: somente CLASS pode ser repetido. ID são sempre únicos, usados para estruturas onde não se repetem.

 

Mas ainda assim, não iria funcionar como o esperado.. 

Para isso, precisas dizer qual o elemento ele está manipulando. Então entra  o $(this) na história!

 

Além disso, você tem erro na estrutura html.. então não vai funcionar como o esperado também.

Veja um exemplo do seu código corrigido.

 

https://jsfiddle.net/uwybr82h/

 

PS: Este não é o efeito de flip.  Mas sim efeito de Slide Toggle.  Se quiser um efeito flip (virada)

Veja este plugin: https://nnattawat.github.io/flip/

 

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • @DiF Boa noite.

     

    Cara, muito obrigado mesmo! Valeu demais a sua ajuda!!! Funcionou direitinho, exatamente como eu estava pensando!!! 

    Obrigado mesmo pela disponibilidade!

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @MarcosCS Legal!

    Uma sugestão:

     

    Ao invés de fazer um slidetoggle para fora,  experimente fazer um slidetoggle interno na imagem!

    O efeito é bem interessante quando combinado com  a cor branca e alfa 0.5  o comando   rgba(255,255,255, 0.5)

     

    Para isso, a dica que posso dar é você definir a imagem como posição relativa e o box do panel todo como posição absoluta delimitado pelos limites da imagem! 

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×