Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Meriteiro

Outubro de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» Últimos temas no fórum
Hoje à(s) 1:38 por giancamposm

» Personalizar widget "Últimos assuntos'
Ontem à(s) 20:51 por iScroll

» [Assinatura] Pedido
Ontem à(s) 18:15 por Gabrieel_.

» Diminuir espaço de comentários
Ontem à(s) 15:29 por Cream

» Mudar URLs padrões do fórum
Ontem à(s) 15:23 por Cream

» Conteúdo permitido no fórum
Ontem à(s) 15:23 por Cream

» Problemas nos tópicos do fórum
Ontem à(s) 15:22 por Cream

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
97 usuários online :: 5 usuários cadastrados, Nenhum Invisível e 92 Visitantes :: 2 Motores de busca

Alexandr Martynov, giancamposm, GTA_Gameron, HouseG4E, Sowisker

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Zoom Na imagem

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

Resolvido Zoom Na imagem

Mensagem por Vitor-Vicente em Seg 30 Mar 2015 - 3:31

Detalhes da dúvida


Versão do fórum : phpBB3
Nível de acesso : Administrador
Navegador usado : Opera
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://mastergz.forumbrasil.net

Descrição do problema

Olá como faz pra por um efeito de zoom ao passar o mouse em cima da imagem

http://prntscr.com/6n3up1

http://mastergz.forumbrasil.net/t33-como-dar-reputacao-e-obrigado-ao-membro-que-te-ajudou


Última edição por Vitor-Vicente em Ter 31 Mar 2015 - 4:53, editado 1 vez(es)

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

Resolvido Re: Zoom Na imagem

Mensagem por Shaman em Seg 30 Mar 2015 - 21:45

Olá, achei um sistema bacana, veja se gosta:

1º: crie um javascript sem investimento (Não marque caixa nenhuma, desmarque todas) e coloque este código:
Código:
jQuery(function(){(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.8,fixedNavigation:false,imageLoading:"http://i51.tinypic.com/wsnrjt.jpg",imageBtnPrev:"http://i33.servimg.com/u/f33/16/63/75/54/backwa10.png",imageBtnNext:"http://i33.servimg.com/u/f33/16/63/75/54/forwar10.png",imageBtnClose:"http://i33.servimg.com/u/f33/16/63/75/54/close10.png",imageBlank:"//http://i53.tinypic.com/1e1fex.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Imagem",txtOf:"dentre as",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a("embed, object, select").css({visibility:"hidden"});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute("href"),v.getAttribute("title")))}else{for(var t=0;t<u.length;t++){p.imageArray.push(new Array(u[t].getAttribute("href"),u[t].getAttribute("title")))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute("href")){p.activeImage++}l()}function c(){a("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+p.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+p.imageBtnClose+'"></a></div></div></div></div>');var t=f();a("#jquery-overlay").css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a("#jquery-lightbox").css({top:u[1]+(t[3]/10),left:u[0]}).show();a("#jquery-overlay,#jquery-lightbox").click(function(){b()});a("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){b();return false});a(window).resize(function(){var v=f();a("#jquery-overlay").css({width:v[0],height:v[1]});var w=h();a("#jquery-lightbox").css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a("#lightbox-loading").show();if(p.fixedNavigation){a("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}else{a("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}var t=new Image();t.onload=function(){a("#lightbox-image").attr("src",p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a("#lightbox-container-image-box").width();var y=a("#lightbox-container-image-box").height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a("#lightbox-container-image-box").animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&&(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a("#lightbox-container-image-data-box").css({width:w});a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:z+(p.containerBorderSize*2)})}function g(){a("#lightbox-loading").hide();a("#lightbox-image").fadeIn(function(){k();s()});q()}function k(){a("#lightbox-container-image-data-box").slideDown("fast");a("#lightbox-image-details-caption").hide();if(p.imageArray[p.activeImage][1]){a("#lightbox-image-details-caption").html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length>1){a("#lightbox-image-details-currentNumber").html(p.txtImage+" "+(p.activeImage+1)+" "+p.txtOf+" "+p.imageArray.length).show()}}function s(){a("#lightbox-nav").show();a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+p.imageBlank+") no-repeat"});if(p.activeImage!=0){if(p.fixedNavigation){a("#lightbox-nav-btnPrev").css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}else{a("#lightbox-nav-btnPrev").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a("#lightbox-nav-btnNext").css({background:"url("+p.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}else{a("#lightbox-nav-btnNext").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnNext+") right 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key=="x")||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)>p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage>0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a("#jquery-lightbox").remove();a("#jquery-overlay").fadeOut(function(){a("#jquery-overlay").remove()});a("embed, object, select").css({visibility:"visible"})}function f(){var v,t;if(window.innerHeight&&window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t<w){pageHeight=w}else{pageHeight=t}if(v<u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u<v)}return this.unbind("click").click(r)};a(function(){a("div.postbody img[src]").not(a(".postbody .signature_div img,.postbody .topic-title img,.postbody .profile-icons img,.postbody p.author img,.postbody .postprofile img, .postbody .postdetails img ,div.postbody a img[src],div.postbody img[src][longdesc]")).each(function(){a(this).wrap("<a />").parent().attr("href",a(this).attr("src"))}).parent().lightBox()})})(jQuery)});


Depois criei outro java script com investimento nos tópicos com este código:

Código:
jQuery(function(){
jQuery.getScript("LINK_DO_JAVASCRIPT_ANTERIOR");
});

Cole o link do JS anterior onde está escrito: "LINK_DO_JAVASCRIPT_ANTERIOR".

Em seguida, cole no final de seu CSS:

Código:

#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: 999;
    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;   
}

Valide. Depois vá em algum de seus tópicos com as imagens e clique em alguma delas para ver o resultado.

Melhores cumprimentos Feliz

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3486

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Seg 30 Mar 2015 - 23:31

Só que nao aumentou, ficou o mesmo tamanho

http://prntscr.com/6nh7ee

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

Resolvido Re: Zoom Na imagem

Mensagem por Shaman em Seg 30 Mar 2015 - 23:40

Olá, apague todo código que lhe passei e faça isso:

Crie um JavaScript com investimento nos tópicos e com este código:
Código:
$(function() {
  $('.entry-content img, .post-entry div img, .content div img, td .postbody div img').each(function () {
    var title = $(this).attr("src");
    var parts = title.split('/');
    title = parts[parts.length-1];
    $(this).not('a>img').not('img[src*="/smiles/"]').wrap('<a href="'+$(this).attr('src')+'" title="'+title+'" rel="lightbox"></a>');
  });
});
(function(){var b,d,c;b=jQuery;c=(function(){function b(){this.fadeDuration=500;this.fitImagesInViewport=true;this.resizeDuration=700;this.showImageNumberLabel=true;this.wrapAround=false}b.prototype.albumLabel=function(b,c){return"Image "+b+" of "+c};return b})();d=(function(){function c(b){this.options=b;this.album=[];this.currentImageIndex=void 0;this.init()}c.prototype.init=function(){this.enable();return this.build()};c.prototype.enable=function(){var c=this;return b('body').on('click','a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]',function(d){c.start(b(d.currentTarget));return false})};c.prototype.build=function(){var c=this;b("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(b('body'));this.$lightbox=b('#lightbox');this.$overlay=b('#lightboxOverlay');this.$outerContainer=this.$lightbox.find('.lb-outerContainer');this.$container=this.$lightbox.find('.lb-container');this.containerTopPadding=parseInt(this.$container.css('padding-top'),10);this.containerRightPadding=parseInt(this.$container.css('padding-right'),10);this.containerBottomPadding=parseInt(this.$container.css('padding-bottom'),10);this.containerLeftPadding=parseInt(this.$container.css('padding-left'),10);this.$overlay.hide().on('click',function(){c.end();return false});this.$lightbox.hide().on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$outerContainer.on('click',function(d){if(b(d.target).attr('id')==='lightbox'){c.end()}return false});this.$lightbox.find('.lb-prev').on('click',function(){if(c.currentImageIndex===0){c.changeImage(c.album.length-1)}else{c.changeImage(c.currentImageIndex-1)}return false});this.$lightbox.find('.lb-next').on('click',function(){if(c.currentImageIndex===c.album.length-1){c.changeImage(0)}else{c.changeImage(c.currentImageIndex+1)}return false});return this.$lightbox.find('.lb-loader, .lb-close').on('click',function(){c.end();return false})};c.prototype.start=function(c){var f,e,j,d,g,n,o,k,l,m,p,h,i;b(window).on("resize",this.sizeOverlay);b('select, object, embed').css({visibility:"hidden"});this.$overlay.width(b(document).width()).height(b(document).height()).fadeIn(this.options.fadeDuration);this.album=[];g=0;j=c.attr('data-lightbox');if(j){h=b(c.prop("tagName")+'[data-lightbox="'+j+'"]');for(d=k=0,m=h.length;k<m;d=++k){e=h[d];this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});if(b(e).attr('href')===c.attr('href')){g=d}}}else{if(c.attr('rel')==='lightbox'){this.album.push({link:c.attr('href'),title:c.attr('title')})}else{i=b(c.prop("tagName")+'[rel="'+c.attr('rel')+'"]');for(d=l=0,p=i.length;l<p;d=++l){e=i[d];this.album.push({link:b(e).attr('href'),title:b(e).attr('title')});if(b(e).attr('href')===c.attr('href')){g=d}}}}f=b(window);o=f.scrollTop()+f.height()/10;n=f.scrollLeft();this.$lightbox.css({top:o+'px',left:n+'px'}).fadeIn(this.options.fadeDuration);this.changeImage(g)};c.prototype.changeImage=function(f){var d,c,e=this;this.disableKeyboardNav();d=this.$lightbox.find('.lb-image');this.sizeOverlay();this.$overlay.fadeIn(this.options.fadeDuration);b('.lb-loader').fadeIn('slow');this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();this.$outerContainer.addClass('animating');c=new Image();c.onload=function(){var m,g,h,i,j,k,l;d.attr('src',e.album[f].link);m=b(c);d.width(c.width);d.height(c.height);if(e.options.fitImagesInViewport){l=b(window).width();k=b(window).height();j=l-e.containerLeftPadding-e.containerRightPadding-20;i=k-e.containerTopPadding-e.containerBottomPadding-110;if((c.width>j)||(c.height>i)){if((c.width/j)>(c.height/i)){h=j;g=parseInt(c.height/(c.width/h),10);d.width(h);d.height(g)}else{g=i;h=parseInt(c.width/(c.height/g),10);d.width(h);d.height(g)}}}return e.sizeContainer(d.width(),d.height())};c.src=this.album[f].link;this.currentImageIndex=f};c.prototype.sizeOverlay=function(){return b('#lightboxOverlay').width(b(document).width()).height(b(document).height())};c.prototype.sizeContainer=function(f,g){var b,d,e,h,c=this;h=this.$outerContainer.outerWidth();e=this.$outerContainer.outerHeight();d=f+this.containerLeftPadding+this.containerRightPadding;b=g+this.containerTopPadding+this.containerBottomPadding;this.$outerContainer.animate({width:d,height:b},this.options.resizeDuration,'swing');setTimeout(function(){c.$lightbox.find('.lb-dataContainer').width(d);c.$lightbox.find('.lb-prevLink').height(b);c.$lightbox.find('.lb-nextLink').height(b);c.showImage()},this.options.resizeDuration)};c.prototype.showImage=function(){this.$lightbox.find('.lb-loader').hide();this.$lightbox.find('.lb-image').fadeIn('slow');this.updateNav();this.updateDetails();this.preloadNeighboringImages();this.enableKeyboardNav()};c.prototype.updateNav=function(){this.$lightbox.find('.lb-nav').show();if(this.album.length>1){if(this.options.wrapAround){this.$lightbox.find('.lb-prev, .lb-next').show()}else{if(this.currentImageIndex>0){this.$lightbox.find('.lb-prev').show()}if(this.currentImageIndex<this.album.length-1){this.$lightbox.find('.lb-next').show()}}}};c.prototype.updateDetails=function(){var b=this;if(typeof this.album[this.currentImageIndex].title!=='undefined'&&this.album[this.currentImageIndex].title!==""){this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast')}if(this.album.length>1&&this.options.showImageNumberLabel){this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn('fast')}else{this.$lightbox.find('.lb-number').hide()}this.$outerContainer.removeClass('animating');this.$lightbox.find('.lb-dataContainer').slideDown(this.resizeDuration,function(){return b.sizeOverlay()})};c.prototype.preloadNeighboringImages=function(){var c,b;if(this.album.length>this.currentImageIndex+1){c=new Image();c.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){b=new Image();b.src=this.album[this.currentImageIndex-1].link}};c.prototype.enableKeyboardNav=function(){b(document).on('keyup.keyboard',b.proxy(this.keyboardAction,this))};c.prototype.disableKeyboardNav=function(){b(document).off('.keyboard')};c.prototype.keyboardAction=function(g){var d,e,f,c,b;d=27;e=37;f=39;b=g.keyCode;c=String.fromCharCode(b).toLowerCase();if(b===d||c.match(/x|o|c/)){this.end()}else if(c==='p'||b===e){if(this.currentImageIndex!==0){this.changeImage(this.currentImageIndex-1)}}else if(c==='n'||b===f){if(this.currentImageIndex!==this.album.length-1){this.changeImage(this.currentImageIndex+1)}}};c.prototype.end=function(){this.disableKeyboardNav();b(window).off("resize",this.sizeOverlay);this.$lightbox.fadeOut(this.options.fadeDuration);this.$overlay.fadeOut(this.options.fadeDuration);return b('select, object, embed').css({visibility:"visible"})};return c})();b(function(){var e,b;b=new c();return e=new d(b)})}).call(this);

Logo em seguida, cole isto no final de seu CSS:
Código:
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
.lightbox .lb-image {
  width: auto;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.lightbox a img {
  border: none;
}
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  min-width: 250px;
  min-height: 130px;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-container {
  padding: 4px;
}
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(http://i56.servimg.com/u/f56/18/07/42/17/loadin10.gif) no-repeat;
}
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.lb-container > .nav {
  left: 0;
}
.lb-nav a {
  outline: none;
}
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}
.lb-prev {
  left: 0;
  float: left;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  background: url(http://i56.servimg.com/u/f56/18/07/42/17/prev11.png) left 48% no-repeat;
}
.lb-next {
  right: 0;
  float: right;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  background: url(http://i56.servimg.com/u/f56/18/07/42/17/next11.png) right 48% no-repeat;
}
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  min-width: 250px;
  width: 100%;
  background: white;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-data {
  padding: 0 4px;
  color: #666;
}
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
.lb-data .lb-close {
  display: block;
  float: right;
  width: 66px;
  height: 30px;
  background: url(http://i56.servimg.com/u/f56/18/07/42/17/closel10.gif) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

Valide e clique em alguma imagem ne alguma de suas postagens com imagens!

Abs.

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3486

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Seg 30 Mar 2015 - 23:54

Olaá
apaguei o outro na final do css e coloquei esse que me pediu, mas nao aumentou, mas o resultado foi o mesmo pro 2.  o outro o visual é mais bonito, a versao desse forum é PhpBB3

http://prntscr.com/6nhnwo

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

Resolvido Re: Zoom Na imagem

Mensagem por Shaman em Ter 31 Mar 2015 - 2:34

Olá @Vitor-Vicente como estou voltando a ter problemas com a internet vou responder pelo celular mesmo. Não era so apagar o CSS, era apagar todo o código, tanto os JavaScripts quanto o CSS, e depois fazer o que pedi acima. Mesmo assim vi em seu fórum, e o código está funcionando corretamente. Se não for o que deseja, poderia explicar melhor sua dúvida? Quando a internet melhorar tentarei executar.

Abs.

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3486

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts
  • 0

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Ter 31 Mar 2015 - 2:44

Ola, Nao é isso, eu gostaria que a imagem aparecesse maior , pra poder enxegar o que sta escrito, a imagem fica do mesmo tamanho ae nao adiantou nada

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

Resolvido Re: Zoom Na imagem

Mensagem por Shaman em Ter 31 Mar 2015 - 3:24

Olá, pode fazer assim também:



Acede a seu Painel de Controle:
Painel de Controle Seta Geral Seta Mensagens e e-mails Seta Configuração
Procura por Redimensionamento de imagens :
Largura :
Altura :


e dentro dos campos "Largura e Altura" você coloca os pixeis que você deseja por exemplo 800 600. assim irá aparecer, "Expandir esta imagem"


Até amanha, pôs hoje não da mais para responder, a internet não deixa Desacordo slap

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3486

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Ter 31 Mar 2015 - 3:30

blz, mas nao fucionou nao.

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

Resolvido Re: Zoom Na imagem

Mensagem por Shaman em Ter 31 Mar 2015 - 3:39

@Vitor-Vicente escreveu:blz, mas nao fucionou nao.

Estranho huh Pensativo Todas as dicas que passei funcionaram perfeitamente com efeito de zoom em fóruns de testes que utilizo. Amanha vejo outra forma de aplicar este zoom para você.


#InternetLenta '-'

Shaman
Membro do Fórum

Masculino
Inscrito dia : 30/01/2014
Mensagens : 1784
Pontos Ativos : 3486

http://www.nexplorer.tk https://www.facebook.com/https://www.facebook.com/pages/Nexplorer/857666487628799?fref=ts

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Ter 31 Mar 2015 - 3:53

ok, vlw pelas tentativas

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net
  • 0

Resolvido Re: Zoom Na imagem

Mensagem por First em Ter 31 Mar 2015 - 4:05

Olá,

Senhor, peço que remova todos os códigos passado por nossos amigos, e adicione este código em sua folha de estilo css.
Lembra-se que você alterar o valor do width.
Código:
.inner .content img {
width: 50%;
transition: all 0.4s ease 0s;
}
.inner .content img:hover {
width: 100%;
}


Até! Piscada

First
Membro do Fórum

Masculino
Inscrito dia : 13/07/2013
Mensagens : 1288
Pontos Ativos : 3085

http://www.ajuda.forumeiros.com https://www.facebook.com//victor.jagata

Resolvido Re: Zoom Na imagem

Mensagem por Vitor-Vicente em Ter 31 Mar 2015 - 4:29

Olá , é pra por no incio ou no final da css ?

coloquei no final, funcionou vlw agradecido

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1428

http://mastergz.forumbrasil.net

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5