Redimensionamento de imagem

Detalhes da questão

Endereço do fórum: http://rpg-narutoworld.forumeiros.com/forum
Versão do fórum: PunBB

Descrição

Atualmente as imagens redimensionam normalmente com o codigo:

Código:

/* redimensionamento */
.pun .postbody img {
          max-width: 640px;
          max-height: 480px;
        }


mas não há aquela opção de "clique para ver em tamanho original" e então abre uma nova janela para poder ver a imagem em seu tamanho original
gostaria de fazer que nem no da forumeiros, onde você clica e abre uma "janela sobreposta" na página, ou seja, sem abrir aba nova no navegador

Leia:

-> https://ajuda.forumeiros.com/t93872-tutorial-efeito-lightbox-para-imagens-nos-topicos

Até mais.

Agora ele abre em uma nova aba se eu clico, gostaria de que abrisse apenas na mesma página, deixando o fórum em segundo plano.

up

Olá.
Retire o JavaScript que lhe passei anteriormente.
Adicione este CSS (ao topo de sua folha de estilo):

Código:

.entry-content img:hover {
    cursor: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Start-Menu-Search-icon.png'), auto;
    max-width: 100%;
    }
    .entry-content img {
    max-width: 250px;
    transition: all ease-out .2s;
    }

Resulta?
Até mais.

Não resultou

Olá. Tente esse:

Código:

.pun .postbody img:hover {
    max-height: none!important;
    max-width: none!important;
    width: VALORpx!important;
    height: VALORpx!important;
}

Lembre-se de retirar o código que te passei anteriormente.

Com esse código, iremos "forçar" que quando a imagem esteja em modo hover, ela mude sua altura e largura.
Personalize à seu gosto os campos:
• "width" -> largura da imagem;
• "height" -> altura da imagem.

Este resulta? =p
Até mais.

Resultou, estamos quase lá!
O problema é que se a imagem for maior que o tamanho do tópico, ela fica cortada, como faço para ela abrir que nem aqui no fdf?

Em tese, era para ser o que diz neste tutorial:
-> https://ajuda.forumeiros.com/t93872-tutorial-efeito-lightbox-para-imagens-nos-topicos

Tente instalá-lo novamente.
(Com investimento em todas as páginas).

Resulta?
Até mais.

Não resulta, olha como está:

http://narutoworld.com.br/t498-teste-template#3148

Ok.
Retire o CSS que lhe passei anteriormente, bem como o JavaScript.

Adicione este CSS:

Código:

.pun .postbody .entry-content img:hover{
width:LARGURA;
height:ALTURA;
max-width:none!important;
max-height:none!important;
position:absolute!important;
left: 10%;
right: 10%;
}

.pun .postbody .entry-content img {transition:0.5s;}

---

Modificações no código:
width:LARGURA; -> Modifique "LARGURA" pelo valor que você quer que a largura da imagem em modo hover fique.
height:ALTURA; -> Modifique "ALTURA" pelo valor que você quer que a altura da imagem em modo hover fique.

Resulta?
Até mais.

Não resultou, pretendo deixar como está, obrigado.

A questão encontra-se resolvida?