[Tutorial] Opções na imagem (Ver em tamanho real,Baixar imagem)
Página 1 de 1 • Compartilhe
Informações:
Autor: While
Funcionalidade: Todas as versões
Acesse:
E Crie um novo Javascript com investimento em todas as paginas com esse código:Painel de Controle ☛ Modulos ☛ Html e Javascript ☛ Gestão dos codigos Javascript
- Código:
(function(){window.fa_img_resizer={max_width:400,max_height:250,selector:'.postbody > div:not(.user):not(.postprofile) img, .mod_news img, .message-text img',options:{bar:true,toggler:true,full_size:true,download:true,lightbox:true},lang:{full_size:'<i class="fa fa-external-link"></i> Ver em tamanho real',enlarge:'<i class="fa fa-search-plus"></i> Aumentar imagem',reduce:'<i class="fa fa-search-minus"></i> Reduzir a imagem',download:'<i class="fa fa-download"></i> Baixar imagem',tooltip:'Clique para ver a imagem no tamanho real'},resize:function(){for(var a=$(fa_img_resizer.selector),i=0,j=a.length;i<j;i++){if(!a[i].alt&&(a[i].naturalWidth>fa_img_resizer.max_width||a[i].naturalHeight>fa_img_resizer.max_height)){a[i].className+=' fa_img_reduced';if(fa_img_resizer.options.lightbox&&a[i].parentNode.tagName!='A'){a[i].style.cursor='pointer';a[i].title=fa_img_resizer.lang.tooltip;a[i].onclick=function(){fa_img_resizer.lightbox(this)}}if(fa_img_resizer.options.bar){(a[i].parentNode.tagName=='A'?a[i].parentNode:a[i]).insertAdjacentHTML('beforebegin','<div class="fa_img_resizer" style="width:'+(a[i].width-8)+'px;">'+(fa_img_resizer.options.toggler?'<a class="fa_img_enlarge" href="#" onclick="fa_img_resizer.toggle(this); return false;">'+fa_img_resizer.lang.enlarge+'</a>':'')+(fa_img_resizer.options.full_size?'<a class="fa_img_full" href="/viewimage.forum?u='+a[i].src+'" target="_blank">'+fa_img_resizer.lang.full_size+'</a>':'')+(fa_img_resizer.options.download&&!/Firefox/.test(navigator.userAgent)&&'download'in document.createElement('A')?'<a class="fa_img_download" href="'+a[i].src+'" target="_blank" download>'+fa_img_resizer.lang.download+'</a>':'')+'</div>')}}}},toggle:function(that){var img=that.parentNode.nextSibling;if(img.tagName=='A'){img=img.getElementsByTagName('IMG')[0]}if(/fa_img_reduced/.test(img.className)){that.innerHTML=fa_img_resizer.lang.reduce;that.className='fa_img_reduce';img.className=img.className.replace(/fa_img_reduced/,'fa_img_enlarged')}else{that.innerHTML=fa_img_resizer.lang.enlarge;that.className='fa_img_enlarge';img.className=img.className.replace(/fa_img_enlarged/,'fa_img_reduced')}that.parentNode.style.width=img.width-8+'px'},lightbox:function(that){var frag=document.createDocumentFragment(),overlay=$('<div id="fa_img_lb_overlay" />')[0],img=$('<img id="fa_img_lb_image" src="'+that.src+'" />')[0];overlay.onclick=fa_img_resizer.kill_lightbox;img.onclick=fa_img_resizer.kill_lightbox;frag.appendChild(overlay);frag.appendChild(img);document.body.appendChild(frag);document.body.style.overflow='hidden';img.style.marginTop='-'+(img.height/2)+'px';img.style.marginLeft='-'+(img.width/2)+'px'},kill_lightbox:function(){var overlay=document.getElementById('fa_img_lb_overlay'),img=document.getElementById('fa_img_lb_image');overlay&&document.body.removeChild(overlay);img&&document.body.removeChild(img);document.body.style.overflow=''}};document.write('<style type="text/css">'+fa_img_resizer.selector+', .fa_img_reduced { max-width:'+fa_img_resizer.max_width+'px; max-height:'+fa_img_resizer.max_height+'px; }'+'.fa_img_enlarged { max-width:100% !important; max-height:100% !important; }'+'.fa_img_resizer { font-size:12px; text-align:left; padding:3px; margin:3px 0; background:#FFF; border:1px solid #CCC; }'+'.fa_img_resizer a { margin:0 3px; }'+'.fa_img_resizer i { font-size:14px; vertical-align:middle; }'+'#fa_img_lb_overlay { background:rgba(0, 0, 0, 0.7); position:fixed; top:0; right:0; bottom:0; left:0; z-index:999999; cursor:pointer; }'+'#fa_img_lb_image { max-height:100%; max-width:100%; position:fixed; left:50%; top:50%; z-index:9999999; cursor:pointer; }'+'</style>'+(!$('link[href$="font-awesome.min.css"]')[0]?'<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />':''));$(window).load(fa_img_resizer.resize);if(window.resize_images){window.resize_images=function(){return false}}}())
Resultado pode ser visto no fórum do Best Web.
Tópicos semelhantes
Cria uma conta ou logue para postar uma mensagem.
Você precisa ser um membro, para poder postar uma resposta.
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|