Colocar pré-visualização nos tópicos

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

Resolvido Colocar pré-visualização nos tópicos

Mensagem por IsmaelS. em 13/05/15, 04:01 pm

Olá!

Gostaria de realizar um pequeno efeito em algumas categorias, que era colocar uma pré-visualização, ou seja algo como isto:
- http://artelib.forumeiros.com/f3-assinaturas

Se repararem à frente de cada tópico, tem a imagem de pré-visualização, eu desejava realizar esse efeito, nestas seções:
- http://suportedesign.forumeiros.com/f59-temas-para-foruns-forumeiros
- http://suportedesign.forumeiros.com/f67-temas-que-nao-estao-no-hitskin-com

Caso seja possível agradecia!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por Rafael em 13/05/15, 04:19 pm

Olá amigo!

Como vai?

Adiciona um javascript com investimento em todas as páginas:

Código:
jQuery(function(){var sCSS='<style>'+'.bim_mainThumb {'+'opacity: 1;'+'visibility: visible;'+'max-width: none;'+'max-height: none;'+'width: 100%;'+'height: 100%;'+'display: block;'+'image-rendering: auto'+'}'+'.bim_thumbPreview {'+'float: right;'+'position: relative;'+'left: -20px;'+'margin-right: 20px;'+'z-index: 0;'+'overflow: hidden;'+'}'+'.bim_img_container {'+'height: 64px;'+'width: 128px;'+'}'+'.bim_thumbPreview span {'+'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);'+'margin-left: 84px;'+'margin-top: -68px;'+'position: absolute;'+'visibility: hidden;'+'z-index: 2500;'+'}'+'.bim_thumbPreview:hover span {'+'z-index: 2500;'+'visibility: visible;'+'position: fixed;'+'top: 25%;'+'left: 45%;'+'padding: 25px;'+'box-shadow: inset 0 3px 5px 5px #111, 0 3px 5px 1px #010101;'+'background-color: #090909'+'}'+'.bim_thumbPreview span img {'+'border: none;'+'max-width: 300px;'+'}'+'</style>';document.head.insertAdjacentHTML('beforeEnd',sCSS);var sHtml='<a class="bim_thumbPreview">'+'<div style="padding: 1px; border: 1px solid #d5d5d5;">'+'<div class="thumbIMG">'+'<div class="bim_img_container" style="overflow: hidden; background-image: none;">'+'<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">'+'</div>'+'</div>'+'</div>'+'<span class="previewIMG"><img src="http://s5.postimg.org/tlg9puyjn/no_prev.png"></span>'+'</a>';var oTarget=0,sFound='td:eq(2)',sInsert='',sCommon='a.topictitle',sOverflow='auto',sGetIMG='';var phpBB2=jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")');var phpBB3=jQuery('.topiclist.topics.bg_none li:not(":empty")');var punbb=jQuery('.statused tr:not(":empty")');var invision=jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');if(phpBB2.length){oTarget=phpBB2;sInsert='div.topictitle';sGetIMG='.postbody:first div:eq(0) img'}else if(phpBB3.length){oTarget=phpBB3;sFound='dd.dterm';sInsert='div.topic-title-container';sOverflow='inherit';sGetIMG='.postbody:first .content img'}else if(punbb.length){oTarget=punbb;sFound='.tcl.tdtopics';sInsert='span.status';sGetIMG='.entry-content:first img'}else if(invision.length){oTarget=invision;sInsert=sCommon;sGetIMG='.post-entry:first img'};oTarget.each(function(index){var oFound=jQuery(this).find(sFound);if(oFound.length){var oInsert=oFound.find(sInsert);var sUrl=oFound.find(sCommon).attr('href');var ID='Udyat_'+index;oFound.attr('id',ID);oFound.css('overflow',sOverflow);jQuery(sHtml).insertAfter(oInsert);var elem=document.getElementById(ID);if(isInViewPort(elem)){jQuery.get(sUrl,function(data){var oImg=jQuery(sGetIMG,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oFound.find('.bim_img_container img').attr('src',sImg);oFound.find('.previewIMG img').attr('src',sImg)}else{oFound.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}else{jQuery(window).on('scroll.'+sUrl,showImage(sUrl,elem,oFound,sGetIMG))}}})});function isInViewPort(elem){var rect=elem.getBoundingClientRect();return(rect.top>=0&&rect.left>=0&&rect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&rect.right<=(window.innerWidth||document.documentElement.clientWidth))}function showImage(event,elem,oBject,sString){return function(){if(isInViewPort(elem)){jQuery(window).off('scroll.'+event);jQuery.get(event,function(data){var oImg=jQuery(sString,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oBject.find('.bim_img_container img').attr('src',sImg);oBject.find('.previewIMG img').attr('src',sImg)}else{oBject.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}}}

Abraços.

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre JavaScript & jQuery'
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

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

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por Rafael em 13/05/15, 05:40 pm

Olá amigo!

Após alguns minutos de reflexão cheguei a isto:

Código:
$('a[href*="f57-"],a[href*="f58-"],a[href*="f72-"],a[href*="f73-"],a[href*="f70-"],a[href*="f71-"],a[href*="f74-"]').ready(function() {jQuery(function(){var sCSS='<style>'+'.bim_mainThumb {'+'opacity: 1;'+'visibility: visible;'+'max-width: none;'+'max-height: none;'+'width: 100%;'+'height: 100%;'+'display: block;'+'image-rendering: auto'+'}'+'.bim_thumbPreview {'+'float: right;'+'position: relative;'+'left: -20px;'+'margin-right: 20px;'+'z-index: 0;'+'overflow: hidden;'+'}'+'.bim_img_container {'+'height: 64px;'+'width: 128px;'+'}'+'.bim_thumbPreview span {'+'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);'+'margin-left: 84px;'+'margin-top: -68px;'+'position: absolute;'+'visibility: hidden;'+'z-index: 2500;'+'}'+'.bim_thumbPreview:hover span {'+'z-index: 2500;'+'visibility: visible;'+'position: fixed;'+'top: 25%;'+'left: 45%;'+'padding: 25px;'+'box-shadow: inset 0 3px 5px 5px #111, 0 3px 5px 1px #010101;'+'background-color: #090909'+'}'+'.bim_thumbPreview span img {'+'border: none;'+'max-width: 300px;'+'}'+'</style>';document.head.insertAdjacentHTML('beforeEnd',sCSS);var sHtml='<a class="bim_thumbPreview">'+'<div style="padding: 1px; border: 1px solid #d5d5d5;">'+'<div class="thumbIMG">'+'<div class="bim_img_container" style="overflow: hidden; background-image: none;">'+'<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">'+'</div>'+'</div>'+'</div>'+'<span class="previewIMG"><img src="http://s5.postimg.org/tlg9puyjn/no_prev.png"></span>'+'</a>';var oTarget=0,sFound='td:eq(2)',sInsert='',sCommon='a.topictitle',sOverflow='auto',sGetIMG='';var phpBB2=jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")');var phpBB3=jQuery('.topiclist.topics.bg_none li:not(":empty")');var punbb=jQuery('.statused tr:not(":empty")');var invision=jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');if(phpBB2.length){oTarget=phpBB2;sInsert='div.topictitle';sGetIMG='.postbody:first div:eq(0) img'}else if(phpBB3.length){oTarget=phpBB3;sFound='dd.dterm';sInsert='div.topic-title-container';sOverflow='inherit';sGetIMG='.postbody:first .content img'}else if(punbb.length){oTarget=punbb;sFound='.info';sInsert='.topic-title';sGetIMG='.entry-content:first img'}else if(invision.length){oTarget=invision;sInsert=sCommon;sGetIMG='.post-entry:first img'};oTarget.each(function(index){var oFound=jQuery(this).find(sFound);if(oFound.length){var oInsert=oFound.find(sInsert);var sUrl=oFound.find(sCommon).attr('href');var ID='Udyat_'+index;oFound.attr('id',ID);oFound.css('overflow',sOverflow);jQuery(sHtml).insertAfter(oInsert);var elem=document.getElementById(ID);if(isInViewPort(elem)){jQuery.get(sUrl,function(data){var oImg=jQuery(sGetIMG,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oFound.find('.bim_img_container img').attr('src',sImg);oFound.find('.previewIMG img').attr('src',sImg)}else{oFound.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}else{jQuery(window).on('scroll.'+sUrl,showImage(sUrl,elem,oFound,sGetIMG))}}})});function isInViewPort(elem){var rect=elem.getBoundingClientRect();return(rect.top>=0&&rect.left>=0&&rect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&rect.right<=(window.innerWidth||document.documentElement.clientWidth))}function showImage(event,elem,oBject,sString){return function(){if(isInViewPort(elem)){jQuery(window).off('scroll.'+event);jQuery.get(event,function(data){var oImg=jQuery(sString,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oBject.find('.bim_img_container img').attr('src',sImg);oBject.find('.previewIMG img').attr('src',sImg)}else{oBject.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}}}});

Abraços Feliz
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

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

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por IsmaelS. em 13/05/15, 05:59 pm

Olá!

Seria possível retirar esse efeito nesta parte?
- http://suportedesign.forumeiros.com/f45-recursos

Apenas deixar como está, menos nessa parte dos Regulamentos amigo, percebeu? De resto está perfeito! Muito feliz

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por Rafael em 13/05/15, 06:08 pm

Olá!

Tente trocar por este:

Código:
$('a[href*="f57-"],a[href*="f58-"],a[href*="f72-"],a[href*="f73-"],a[href*="f70-"],a[href*="f71-"],a[href*="f74-"]').ready(function() {jQuery(function(){var sCSS='<style>'+'.bim_mainThumb {'+'opacity: 1;'+'visibility: visible;'+'max-width: none;'+'max-height: none;'+'width: 100%;'+'height: 100%;'+'display: block;'+'image-rendering: auto'+'}'+'.bim_thumbPreview {'+'float: right;'+'position: relative;'+'left: -20px;'+'margin-right: 20px;'+'z-index: 0;'+'overflow: hidden;'+'}'+'.bim_img_container {'+'height: 64px;'+'width: 128px;'+'}'+'.bim_thumbPreview span {'+'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);'+'margin-left: 84px;'+'margin-top: -68px;'+'position: absolute;'+'visibility: hidden;'+'z-index: 2500;'+'}'+'.bim_thumbPreview:hover span {'+'z-index: 2500;'+'visibility: visible;'+'position: fixed;'+'top: 25%;'+'left: 45%;'+'padding: 25px;'+'box-shadow: inset 0 3px 5px 5px #111, 0 3px 5px 1px #010101;'+'background-color: #090909'+'}'+'.bim_thumbPreview span img {'+'border: none;'+'max-width: 300px;'+'}'+'</style>';document.head.insertAdjacentHTML('beforeEnd',sCSS);var sHtml='<a class="bim_thumbPreview">'+'<div style="padding: 1px; border: 1px solid #d5d5d5;">'+'<div class="thumbIMG">'+'<div class="bim_img_container" style="overflow: hidden; background-image: none;">'+'<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">'+'</div>'+'</div>'+'</div>'+'<span class="previewIMG"><img src="http://s5.postimg.org/tlg9puyjn/no_prev.png"></span>'+'</a>';var oTarget=0,sFound='td:eq(2)',sInsert='',sCommon='a.topictitle',sOverflow='auto',sGetIMG='';var phpBB2=jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")');var phpBB3=jQuery('.topiclist.topics.bg_none li:not(":empty")');var punbb=jQuery('.statused tr:not(":empty")');var invision=jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');if(phpBB2.length){oTarget=phpBB2;sInsert='div.topictitle';sGetIMG='.postbody:first div:eq(0) img'}else if(phpBB3.length){oTarget=phpBB3;sFound='dd.dterm';sInsert='div.topic-title-container';sOverflow='inherit';sGetIMG='.postbody:first .content img'}else if(punbb.length){oTarget=punbb;sFound='.info';sInsert='.topic-title';sGetIMG='.entry-content:first img'}else if(invision.length){oTarget=invision;sInsert=sCommon;sGetIMG='.post-entry:first img'};oTarget.each(function(index){var oFound=jQuery(this).find(sFound);if(oFound.length){var oInsert=oFound.find(sInsert);var sUrl=oFound.find(sCommon).attr('href');var ID='Udyat_'+index;oFound.attr('id',ID);oFound.css('overflow',sOverflow);jQuery(sHtml).insertAfter(oInsert);var elem=document.getElementById(ID);if(isInViewPort(elem)){jQuery.get(sUrl,function(data){var oImg=jQuery(sGetIMG,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oFound.find('.bim_img_container img').attr('src',sImg);oFound.find('.previewIMG img').attr('src',sImg)}else{oFound.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}else{jQuery(window).on('scroll.'+sUrl,showImage(sUrl,elem,oFound,sGetIMG))}}})});function isInViewPort(elem){var rect=elem.getBoundingClientRect();return(rect.top>=0&&rect.left>=0&&rect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&rect.right<=(window.innerWidth||document.documentElement.clientWidth))}function showImage(event,elem,oBject,sString){return function(){if(isInViewPort(elem)){jQuery(window).off('scroll.'+event);jQuery.get(event,function(data){var oImg=jQuery(sString,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oBject.find('.bim_img_container img').attr('src',sImg);oBject.find('.previewIMG img').attr('src',sImg)}else{oBject.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png')}}})}}}});
if (location.href = "\\f45-") {
    $( ".bim_thumbPreview" ).hide();
}

Funciona?

Até mais.
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

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

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por IsmaelS. em 13/05/15, 06:20 pm

Olá!

Se o ativar amigo dá este erro no fórum como link:
- http://suportedesign.forumeiros.com//\f45-

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por IsmaelS. em 15/05/15, 04:37 am


IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/
  • 0

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por Rafael em 15/05/15, 03:48 pm

Olá amigo!

Desculpe a demora! Bem, da maneira que eu havia feito não iria funcionar nunca. Por isso dediquei meu tempo a aprender um pouco sobre uma função que ira solucionar o nosso problema.

Aqui tem:

Código:
var a = "/f71-renders-stocks";
var b = "f58-brushes";
var c = "f72-c4d-s";
var d = "f73-psd-s";
var e = "f70-padroes-styles-gradientes";
var f = "f57-fontes";
var g = "f74-outros-recursos";
var x = window.location.pathname;
if (x === a || x === b || x === c || x === d || x === e || x === f || x === g ) {
  jQuery(function(){var sCSS='<style>'+'.bim_mainThumb {'+'opacity: 1;'+'visibility: visible;'+'max-width: none;'+'max-height: none;'+'width: 100%;'+'height: 100%;'+'display: block;'+'image-rendering: auto'+'}'+'.bim_thumbPreview {'+'float: right;'+'position: relative;'+'left: -20px;'+'margin-right: 20px;'+'z-index: 0;'+'overflow: hidden;'+'}'+'.bim_img_container {'+'height: 64px;'+'width: 128px;'+'}'+'.bim_thumbPreview span {'+'box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);'+'margin-left: 84px;'+'margin-top: -68px;'+'position: absolute;'+'visibility: hidden;'+'z-index: 2500;'+'}'+'.bim_thumbPreview:hover span {'+'z-index: 2500;'+'visibility: visible;'+'position: fixed;'+'top: 25%;'+'left: 45%;'+'padding: 25px;'+'box-shadow: inset 0 3px 5px 5px #111, 0 3px 5px 1px #010101;'+'background-color: #090909'+'}'+'.bim_thumbPreview span img {'+'border: none;'+'max-width: 300px;'+'}'+'</style>';document.head.insertAdjacentHTML('beforeEnd',sCSS); var sHtml='<a class="bim_thumbPreview">'+'<div style="padding: 1px; border: 1px solid #d5d5d5;">'+'<div class="thumbIMG">'+'<div class="bim_img_container" style="overflow: hidden; background-image: none;">'+'<img src="http://illiweb.com/fa/empty.gif" class="bim_mainThumb">'+'</div>'+'</div>'+'</div>'+'<span class="previewIMG"><img src="http://s5.postimg.org/tlg9puyjn/no_prev.png"></span>'+'</a>'; var oTarget=0,sFound='td:eq(2)',sInsert='',sCommon='a.topictitle',sOverflow='auto',sGetIMG='';var phpBB2=jQuery('.three-col td:eq(1) > table.forumline:last tbody tr:not(":empty")'); var phpBB3=jQuery('.topiclist.topics.bg_none li:not(":empty")');var punbb=jQuery('.statused tr:not(":empty")');var invision=jQuery('.borderwrap table.ipbtable tbody tr:not(":empty")');if (phpBB2.length){oTarget=phpBB2;sInsert='div.topictitle';sGetIMG='.postbody:first div:eq(0) img';}else if(phpBB3.length){oTarget=phpBB3;sFound='dd.dterm';sInsert='div.topic-title-container';sOverflow='inherit';sGetIMG='.postbody:first .content img';}else if(punbb.length){oTarget=punbb;sFound='.info';sInsert='.topic-title';sGetIMG='.entry-content:first img';}else if(invision.length){oTarget=invision;sInsert=sCommon;sGetIMG='.post-entry:first img';}oTarget.each(function(index){var oFound=jQuery(this).find(sFound);if(oFound.length){var oInsert=oFound.find(sInsert);var sUrl=oFound.find(sCommon).attr('href');var ID='Udyat_'+index;oFound.attr('id',ID);oFound.css('overflow',sOverflow);jQuery(sHtml).insertAfter(oInsert);var elem=document.getElementById(ID);if(isInViewPort(elem)){jQuery.get(sUrl,function(data){var oImg=jQuery(sGetIMG,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oFound.find('.bim_img_container img').attr('src',sImg);oFound.find('.previewIMG img').attr('src',sImg);}else{oFound.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png');}}});}else{jQuery(window).on('scroll.'+sUrl,showImage(sUrl,elem,oFound,sGetIMG));}}});});function isInViewPort(elem){var rect=elem.getBoundingClientRect();return(rect.top>=0&&rect.left>=0&&rect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&rect.right<=(window.innerWidth||document.documentElement.clientWidth));}function showImage(event,elem,oBject,sString){return function(){if(isInViewPort(elem)){jQuery(window).off('scroll.'+event);jQuery.get(event,function(data){var oImg=jQuery(sString,data);var sImg='';if(oImg!==undefined){sImg=oImg.attr('src');if(sImg!==undefined){oBject.find('.bim_img_container img').attr('src',sImg);oBject.find('.previewIMG img').attr('src',sImg);}else{oBject.find('.bim_img_container img').attr('src','http://s5.postimg.org/tlg9puyjn/no_prev.png');}}});}}}
}else {
  console.log('Não foi possível carregar a pré-visualização');
}

Ao mudar os nomes das categorias deverá igualmente modificar os links do código para que não deixe de funcionar.

Abraços Feliz
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

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

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por IsmaelS. em 15/05/15, 04:47 pm

Olá!

Amigo resultou perfeitamente, tive que colocar algo que se esqueceu:
Código:
var a = "/f71-renders-stocks";

Ou seja nos outros link's faltava o "/" atrás de cada para funcionar, mas já resolvi obrigado!!

IsmaelS.
Usuário experiente

Masculino
Inscrito dia : 24/11/2012
Mensagens : 2956
Pontos Ativos : 4096

Ver perfil do usuário http://suporte-design.forumeiros.com/

Resolvido Re: Colocar pré-visualização nos tópicos

Mensagem por Rafael em 15/05/15, 04:50 pm

Saudações!

Desculpa não fiz atenção Louco!

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
avatar

Rafael
Hiperativo

Masculino
Inscrito dia : 26/04/2014
Mensagens : 3118
Pontos Ativos : 4029

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

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