Redimensionador de imagens

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

Resolvido Redimensionador de imagens

Mensagem por juninho_xd em 18/08/11, 11:46 pm

Qual é minha questão:
Olá pessoal, gostaria de saber se tem algum redimensionar de imagem JavaScript / jQuery.

Claro sem ser o padrão que vem nos fórums.

E se tem como alterar aquele, e por um superior.

Tentei usar esse código, mais nada feito.

Código:
(function($) {
    $.fn.resize = function(options) {
 
        var settings = $.extend({
            scale: 1,
            maxWidth: null,
         maxHeight: null
        }, options);
 
        return this.each(function() {
         
         if(this.tagName.toLowerCase() != "img") {
            // Only images can be resized
            return $(this);
         }

         var width = this.naturalWidth;
         var height = this.naturalHeight;
         if(!width || !height) {
            // Ooops you are an IE user, let's fix it.
            var img = document.createElement('img');
            img.src = this.src;
            
            width = img.width;
            height = img.height;
         }
         
         if(settings.scale != 1) {
            width = width*settings.scale;
            height = height*settings.scale;
         }
         
         var pWidth = 1;
         if(settings.maxWidth != null) {
            pWidth = width/settings.maxWidth;
         }
         var pHeight = 1;
         if(settings.maxHeight != null) {
            pHeight = height/settings.maxHeight;
         }
         var reduce = 1;
         
         if(pWidth < pHeight) {
            reduce = pHeight;
         } else {
            reduce = pWidth;
         }
         
         if(reduce < 1) {
            reduce = 1;
         }
         
         var newWidth = width/reduce;
         var newHeight = height/reduce;
         
         return $(this)
            .attr("width", newWidth)
            .attr("height", newHeight);
         
        });
    }
})(jQuery);

Obrigado desde já.

Medidas que eu tomei para corrigir o problema:
Tentei procurar no google.

Imagens do meu problema:


Endereço do meu fórum:
http://high-tech.livreforum.com/

Versão do meu fórum:


Última edição por juninho_xd em 18/08/11, 11:51 pm, editado 1 vez(es)
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por Dury em 18/08/11, 11:49 pm

Olá Juninho.

A qual imagem se refere? Se for redirecionador de fórum, podemos usar esse código:
Código:
<meta http-equiv=refresh content=3;URL=ENDEREÇO_DA_PAGINA />

Até mais!
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 18/08/11, 11:52 pm

Desculpe, confundi as palavras rss.

é redimensionar.

Obrigado desde já.
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por LucasChaotic em 19/08/11, 12:00 am

Seria Isso ?
Painel de Controle > Geral > Mensagens e E-mails > Configuração
Vá em Redimensionamento de imagens
Lá Terá a Altura e A Largura Para Definir o Redimensionamento Automático do Fórum..

Ajudou?Se Sim clique em Obrigado
avatar

LucasChaotic
Nível 6

Masculino
Inscrito dia : 13/03/2011
Mensagens : 79
Pontos Ativos : 114

Ver perfil do usuário http://narutostorm-online.forumeiros.com/forum

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 19/08/11, 12:50 am

Sim sim, isso eu ja sei maninho.

Eu quero um redimensionador de imagens em javascript.

Tipo, não precisa ser muito perfeito.

Que nem esse código acima. Queria fazer ele funcionar, se alguém poder me ajudar eu agradeço, desde já muito obrigado.
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por Luciano98 em 19/08/11, 06:30 pm

Olá!

Você quer um simples código que redimensiona todas as imagens para uma certa resolução? Você quer aplicar esse código aos posts, ao fórum todo ou a outro local.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 21/08/11, 02:03 pm

Tipo, quero que quando clica na foto, ela expande para o tamanho real.

Mais com efeito javascript.

E somente do subforum.

Obrigado desde já.

Desculpe a demora.
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por Luciano98 em 27/08/11, 10:48 pm

@juninho_xd escreveu:Tipo, quero que quando clica na foto, ela expande para o tamanho real.

Mais com efeito javascript.

E somente do subforum.

Obrigado desde já.

Desculpe a demora.
Como assim somente do subfórum? Aonde exatamente você quer aplicar o efeito?
Creio que as imagens dos fóruns e subfóruns não são grandes o suficiente para ter de receber esse efeito.

Até mais.
avatar

Luciano98
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 01/09/2010
Mensagens : 7648
Pontos Ativos : 11045

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 27/08/11, 11:42 pm

Olá, gostaria que funcionasse somente nos tópicos e no widget (Novidades)

Att.
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por seender em 29/08/11, 02:02 am

Olá!

Veja este tutorial:
Spoiler:
Como utilizar efeito Lightbox
O efeito LightBox oferece-nos essa vantagem de possuir uma série de alternativas, para dar um toque interessante às imagens nas mensagens, como molduras ou outros modelos disponíveis.


--> Tutoriais, Dicas e Astúcias <--
Como utilizar efeito Lightbox



- Instalar o jQuery:
Esse código poderá ser utilizado apena em "Widgets Personalizados" (apenas se aparecer o pé dos tópicos), e na "Descrição do fórum":

Caso queria por na descrição siga: Painel de Controle -> Geral -> Fórum -> Configurações
Código:
<script src=http://bit.ly/e4TWhG></script>
Ou (Para usar a segunda hipótese temos de criar uma pagina HTML para isso siga o passo 3.)
Código:
$(function() {
    $.getScript('http://forum-script.googlecode.com/files/jquery.lightbox-0.5.min.js', function() {
        $('.postbody img').lightBox({
            overlayBgColor: '#000',
            overlayOpacity: 0.6,
            imageLoading: 'http://i55.tinypic.com/rgx950.jpg', //Imagem de quando a imagem carrega
            imageBtnClose: 'http://i52.tinypic.com/30c9f2a.jpg', //Imagem para fechar a janela
            imageBtnPrev: 'http://i52.tinypic.com/zkfztu.jpg', //Imagem "Próxima"
            imageBtnNext: 'http://i56.tinypic.com/30lmdzo.jpg', //Imagem "Anterior"
            containerResizeSpeed: 350,
            txtImage: 'Imagem',
            txtOf: 'de'
        });
    });
});


- Adicionar o código à Folha de estilo CSS:
Para adicionar o código aceda a:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


(carregue na imagem para aumentar)

E deverá adicionar este código CSS, no seu fórum:
Código:
.postbody img {
    max-width: 500px;
}
#jquery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#jquery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
#lightbox-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    width: 49%;
    height: 100%;
    zoom: 1;
    display: block;
}
#lightbox-nav-btnPrev {
    left: 0;
    float: left;
}
#lightbox-nav-btnNext {
    right: 0;
    float: right;
}
#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}
#lightbox-container-image-data {
    padding: 0 10px;
    color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
    width: 70%;
    float: left;
    text-align: left;
}   
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
    display: block;
    clear: left;
    padding-bottom: 1.0em;   
}           
#lightbox-secNav-btnClose {
    width: 66px;
    float: right;
    padding-bottom: 0.7em;   
}


- Caso escolha a segunda hipótese :
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)






© Fórum dos Fóruns & muryllodantas




Resolve?

Melhores cumprimentos,
seender
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 30/08/11, 06:54 pm

Olá, deu certo mais na hora de colocar na descrição, não esta cabendo la.

O que eu faço?
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por Dury em 30/08/11, 08:07 pm

Olá,

O que não deu? O que tentou colocar lá? Script?
avatar

Dury
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 21/01/2009
Mensagens : 6708
Pontos Ativos : 8827

Ver perfil do usuário

Resolvido Re: Redimensionador de imagens

Mensagem por juninho_xd em 31/08/11, 12:46 am

Sim coloquei sim, deu tudo certo, só na hora de:

Código:

1º - Instalar o jQuery:
Esse código poderá ser utilizado apena em "Widgets Personalizados" (apenas se aparecer o pé dos tópicos), e na "Descrição do fórum":

Caso queria por na descrição siga: Painel de Controle -> Geral -> Fórum -> Configurações

Código:

    <script src=http://bit.ly/e4TWhG></script>

Não esta dando para colocar:
<script src=http://bit.ly/e4TWhG></script>

Att.
avatar

juninho_xd
Usuário destaque

Masculino
Inscrito dia : 25/06/2010
Mensagens : 809
Pontos Ativos : 1263

Ver perfil do usuário http://tech-world.forumeiros.com

Resolvido Re: Redimensionador de imagens

Mensagem por seender em 31/08/11, 12:51 am

Claro que cabe, o que lhe é exibido? acabo de testar em meu fórum e funciona na descrição...
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Resolvido Re: Redimensionador de imagens

Mensagem por Lucas2122 em 31/08/11, 07:31 pm

Seender codico fez nem um efeito.
avatar

Lucas2122
Usuário destaque

Masculino
Inscrito dia : 16/08/2011
Mensagens : 774
Pontos Ativos : 1348

Ver perfil do usuário http://moldentec.forumeiros.com/forum

Resolvido Re: Redimensionador de imagens

Mensagem por CaiqueNWX em 03/09/11, 09:14 am

Olá, acho que seria isso que você esta procurando...

Código:
<img src="ENDEREÇO DA IMG" widht="ALTURA DESEJADA" height="LARGURA DESEJADA">

Bem, acho que e so isso ae, basta você fazer isso em qualquer imagem que queira redimensionar, mas os HTML do seu forum tem que estar ativado. caso não esteja siga a seguinte instrução:

~ HTLM Codes é a opção que lhe permite ver os codigos HTML's do fórum. É concelhavel ativar esta opção já que os fórum contêm alguns registros para redimencionar imagens. Para ativar esta opção, vá em Perfil em seguida clique em Preferências, então procure pela opção Sempre permitir HTML e clique em Sim, após isso salve e pronto.

Espero ter Ajudado, Atenciosamente CaiqueNWX.
avatar

CaiqueNWX
Nível 1

Masculino
Inscrito dia : 01/09/2011
Mensagens : 4
Pontos Ativos : 6

Ver perfil do usuário http://narutowx.forumeiros.com/

Resolvido Re: Redimensionador de imagens

Mensagem por Convidad em 05/09/11, 05:07 pm

@seender escreveu:Olá!

Veja este tutorial:
Spoiler:
Como utilizar efeito Lightbox
O efeito LightBox oferece-nos essa vantagem de possuir uma série de alternativas, para dar um toque interessante às imagens nas mensagens, como molduras ou outros modelos disponíveis.


--> Tutoriais, Dicas e Astúcias <--
Como utilizar efeito Lightbox



- Instalar o jQuery:
Esse código poderá ser utilizado apena em "Widgets Personalizados" (apenas se aparecer o pé dos tópicos), e na "Descrição do fórum":

Caso queria por na descrição siga: Painel de Controle -> Geral -> Fórum -> Configurações
Código:
<script src=http://bit.ly/e4TWhG></script>
Ou (Para usar a segunda hipótese temos de criar uma pagina HTML para isso siga o passo 3.)
Código:
$(function() {
    $.getScript('http://forum-script.googlecode.com/files/jquery.lightbox-0.5.min.js', function() {
        $('.postbody img').lightBox({
            overlayBgColor: '#000',
            overlayOpacity: 0.6,
            imageLoading: 'http://i55.tinypic.com/rgx950.jpg', //Imagem de quando a imagem carrega
            imageBtnClose: 'http://i52.tinypic.com/30c9f2a.jpg', //Imagem para fechar a janela
            imageBtnPrev: 'http://i52.tinypic.com/zkfztu.jpg', //Imagem "Próxima"
            imageBtnNext: 'http://i56.tinypic.com/30lmdzo.jpg', //Imagem "Anterior"
            containerResizeSpeed: 350,
            txtImage: 'Imagem',
            txtOf: 'de'
        });
    });
});


- Adicionar o código à Folha de estilo CSS:
Para adicionar o código aceda a:

Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


(carregue na imagem para aumentar)

E deverá adicionar este código CSS, no seu fórum:
Código:
.postbody img {
    max-width: 500px;
}
#jquery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
}
#jquery-lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
}
#lightbox-nav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
    width: 49%;
    height: 100%;
    zoom: 1;
    display: block;
}
#lightbox-nav-btnPrev {
    left: 0;
    float: left;
}
#lightbox-nav-btnNext {
    right: 0;
    float: right;
}
#lightbox-container-image-data-box {
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%;
    padding: 0 10px 0;
}
#lightbox-container-image-data {
    padding: 0 10px;
    color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
    width: 70%;
    float: left;
    text-align: left;
}   
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
    display: block;
    clear: left;
    padding-bottom: 1.0em;   
}           
#lightbox-secNav-btnClose {
    width: 66px;
    float: right;
    padding-bottom: 0.7em;   
}


- Caso escolha a segunda hipótese :
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)






© Fórum dos Fóruns & muryllodantas




Resolve?

Melhores cumprimentos,
seender


Por favor autor, siga o tutorial passado pelo staffer Seender. A única coisa a ser mudada em todos os passos, é que você não precisa colocar nada na descrição do fórum...

Ao invés de criar uma página HTML, crie uma página JS e selecione aonde o código deve surtir efeitos.

Piscada

Convidad
Convidado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum