Redimensionador de imagens
+3
LucasChaotic
Dury
juninho_xd
7 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Redimensionador de imagens
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.
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:
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 19.08.11 3:51, editado 1 vez(es)
Re: Redimensionador de imagens
Olá Juninho.
A qual imagem se refere? Se for redirecionador de fórum, podemos usar esse código:
Até mais!
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!
Re: Redimensionador de imagens
Desculpe, confundi as palavras rss.
é redimensionar.
Obrigado desde já.
é redimensionar.
Obrigado desde já.
Re: Redimensionador de imagens
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
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
Re: Redimensionador de imagens
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.
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.
Re: Redimensionador de imagens
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.
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.
Re: Redimensionador de imagens
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.
Mais com efeito javascript.
E somente do subforum.
Obrigado desde já.
Desculpe a demora.
Re: Redimensionador de imagens
Como assim somente do subfórum? Aonde exatamente você quer aplicar o efeito?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.
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.
Re: Redimensionador de imagens
Olá, gostaria que funcionasse somente nos tópicos e no widget (Novidades)
Att.
Att.
Re: Redimensionador de imagens
Olá!
Veja este tutorial:
Melhores cumprimentos,
seender
Veja este tutorial:
- Spoiler:
- 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.
Como utilizar efeito Lightbox --> Tutoriais, Dicas e Astúcias <--
Como utilizar efeito Lightbox
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>
- 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'
});
});
});
2º - 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
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;
}
3º - 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 HTMLTítulo - Pode colocar o título que quiser para a página, não irá afetar em nada. 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. 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.
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.Código HTML - Coloque aqui o código que trabalhamos no item anterior.
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).© Fórum dos Fóruns & muryllodantas
Melhores cumprimentos,
seender
Re: Redimensionador de imagens
Olá, deu certo mais na hora de colocar na descrição, não esta cabendo la.
O que eu faço?
O que eu faço?
Re: Redimensionador de imagens
Olá,
O que não deu? O que tentou colocar lá? Script?
O que não deu? O que tentou colocar lá? Script?
Re: Redimensionador de imagens
Sim coloquei sim, deu tudo certo, só na hora de:
Não esta dando para colocar:
Att.
- 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.
Re: Redimensionador de imagens
Claro que cabe, o que lhe é exibido? acabo de testar em meu fórum e funciona na descrição...
Re: Redimensionador de imagens
Seender codico fez nem um efeito.
Re: Redimensionador de imagens
Olá, acho que seria isso que você esta procurando...
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.
- 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.
Re: Redimensionador de imagens
seender escreveu:Olá!
Veja este tutorial:Resolve?
- Spoiler:
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.
Como utilizar efeito Lightbox --> Tutoriais, Dicas e Astúcias <--
Como utilizar efeito Lightbox
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çõesOu (Para usar a segunda hipótese temos de criar uma pagina HTML para isso siga o passo 3.)
- Código:
<script src=http://bit.ly/e4TWhG></script>
- 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'
});
});
});
2º - 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
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;
}
3º - 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
Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
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.
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. 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.
Código HTML - Coloque aqui o código que trabalhamos no item anterior.
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).© Fórum dos Fóruns & muryllodantas
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.
Convidad- Convidado
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos