Redimensionamento de imagem

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Redimensionamento de imagem

Mensagem por Appoloz 18.01.17 11:50

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


Última edição por Appoloz em 20.01.17 0:08, editado 1 vez(es)
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta
  • 0

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 18.01.17 13:13

Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 18.01.17 14:55

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.
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 19.01.17 15:04

up
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 19.01.17 16:23

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. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 19.01.17 17:39

Não resultou
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 19.01.17 17:44

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. Feliz
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 19.01.17 18:45

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?
Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 19.01.17 18:56

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. De bem com a vida
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 19.01.17 19:48

Appoloz

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 19.01.17 19:53

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? Piscada
Até mais.
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Appoloz 19.01.17 20:30

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

Appoloz
*****

Membro desde : 14/02/2012
Mensagens : 413
Pontos : 640

http://rpg-narutoworld.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Luiz 19.01.17 20:37

A questão encontra-se resolvida?
Luiz

Luiz
Membro Entusiasta
Membro Entusiasta

Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451

https://luizfelipe.dev

Ir para o topo Ir para baixo

Tópico resolvido Re: Redimensionamento de imagem

Mensagem por Kyo Panda 20.01.17 10:18

Redimensionamento de imagem Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos