HTML Como clicar em um palavra e abrir uma imagem HTML CSS

[Pablo H]

Gostaria de saber como fazer para clicar em uma palavra e abrir uma imagem (mas sem ir pra outra página ou sair da página atual), tipo abrir na mesma pagina, como uma mini janela, acho que deu pra entender SAHUHSUAHSUSSUAHAU 

[Felipe Merklein Martins]

47 minutos atrás, Pablo H disse:

Gostaria de saber como fazer para clicar em uma palavra e abrir uma imagem (mas sem ir pra outra página ou sair da página atual), tipo abrir na mesma pagina, como uma mini janela, acho que deu pra entender SAHUHSUAHSUSSUAHAU 

Teria como você linkar uma imagem usando esse código : 

<a href=”endereço”>

<img src=”endereço da imagem” alt=”Descrição da imagem”/>

</a>

 

Mas, aí no caso ele iria para a página da imagem, acho que uma pequena tela é algo meio incerto de se acontecer!

[DiF]

@Pablo H Tem diversas formas de fazer isso!

Com jQuery, Javascript puro, Frameworks como Bootstrap, angular... e etc

 

HTML:

<a href="#" class="ver"> Ver esta foto</a>
<div class="img">
   <img src="https://i1.wp.com/gamelogia.com.br/wp-content/uploads/2016/11/gamer.jpg?resize=1280%2C640&ssl=1" alt="teste" />
   <a href="#" class="fechar">Fechar</a>
</div>

jQuery: 

$(".ver").on("click", function(){
    $(".img").show();
});

$(".fechar").on("click", function(){
    $(".img").hide();
});

 

Podes conferir funcionando aqui: https://jsfiddle.net/rmr5mkm4/

 

[groutmoustache]

 

@DiF

 

Em 5/11/2018 às 18:10, DiF disse:

Frameworks como Bootstrap

 

Usaria o carousel, nesse caso?

[DiF]

@Joao_Lucaas

 

3 minutos atrás, Joao_Lucaas disse:

Usaria o carousel, nesse caso?

Sim usaria.   O Bootstrap possui o carousel 

https://getbootstrap.com/docs/4.0/components/carousel/