Widget ultimo assuntos com avatar
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Widget ultimo assuntos com avatar
Detalhes da questão
Endereço do fórum: http://ismaels.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Olá!
Nesta versão é possível colocar avatar nos últimos assuntos? Como aqui na FdF
Última edição por IsmaelS. em 11.10.17 13:34, editado 1 vez(es)
Re: Widget ultimo assuntos com avatar
Utilize esse código:
E ao CSS:
- Código:
/***
* Application: Avatar in Recent Topics Widget!
* Description: This application can displays the members avatar.
* Version: 1.03172014-jq1.9.1 - Narmer (Menés, Meni)
* Made and Optimizations by JScript - 2014/03/17
* View more in: http://ajuda.forumeiros.com
* Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
* This work is free. You can redistribute it and/or modify it
* under the terms of the WTFPL, Version 2
*/
jQuery(function () {
/***
* User Definition Variables
***/
/* Put here the widget title for your native language!!! */
var sWidgetTitle = 'Últimos assuntos';
/***
* System Defined Variables - Do not edit if you don't know!
***/
var oConfig = {
sInfo:
'<!--' +
'* Application: Avatar in Recent Topics Widget!' +
'* Description: This application can displays the members avatar.' +
'* Version: 1.03172014-jq1.9.1 - Narmer (Menés, Meni)' +
'* Made and Optimizations by JScript - 2014/03/17' +
'* View more in: http://jscript.forumeiros.com/forum & http://ajuda.forumeiros.com' +
'* Copyright (c) 2014 JScript <jscriptbrasil at live dot com>' +
'* This work is free. You can redistribute it and/or modify it' +
'* under the terms of the WTFPL, Version 2' +
'-->',
sDefaultAvatar: 'http://i78.servimg.com/u/f78/18/17/62/92/defaul10.png',
sWidgetTitle: sWidgetTitle,
sCSS:
'<style>' +
'.ipsUserPhoto.widget {' +
'float: left;' +
'margin-top: 3px;' +
'margin-right: 10px;' +
'}' +
'.ipsUserPhoto {' +
'background: none repeat scroll 0 0 #FFFFFF;' +
'border: 1px solid #D5D5D5 !important;' +
'box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);' +
'padding: 1px;' +
'}' +
'.ipsUserPhoto_mini {' +
'height: 30px !important;' +
'width: 30px !important;' +
'}' +
'</style>',
sTarget: '',
sCommon: 'a[href^="/t"]',
sGetIMG: ''
};
// Add CSS
jQuery(oConfig.sCSS).insertBefore('body');
/* Forum versions! */
var phpBB2 = jQuery('.bodyline');
var phpBB3 = jQuery('#wrap');
var punbb = jQuery('#pun-intro');
var invision = jQuery('#ipbwrapper');
if (phpBB2.length) {
oConfig.sTarget = '.forumline:contains("' + oConfig.sWidgetTitle + '") tr td.row1 ' + oConfig.sCommon;
oConfig.sGetIMG = ' #emptyidcc .row1.gensmall img:eq(0)';
jQuery('.forumline tr td span:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
} else if(phpBB3.length) {
oConfig.sTarget = '.module .inner:contains("' + oConfig.sWidgetTitle + '") ' + oConfig.sCommon;
oConfig.sGetIMG = ' #profile-advanced-right .module:first .inner img:eq(0)';
jQuery('.module .inner:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
} else if(punbb.length) {
oConfig.sTarget = '.module:contains("' + oConfig.sWidgetTitle + '") .mod-recent-row ' + oConfig.sCommon;
oConfig.sGetIMG = ' #ips_currentPhoto img:first';
jQuery('.module:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
} else if(invision.length) {
oConfig.sTarget = '.module.borderwrap:contains("' + oConfig.sWidgetTitle + '") .box-content ' + oConfig.sCommon;
oConfig.sGetIMG = ' #profile-advanced-right .box-content.profile.center img:first';
jQuery('.module.borderwrap:contains("' + oConfig.sWidgetTitle + '")').attr('id', 'last-topics');
};
var oTarget = jQuery('#right, #left').find(oConfig.sTarget);
oTarget.prepend('<a class="ipsUserPhoto widget" href="#" title="No avatar!"><img class="ipsUserPhoto_mini" src="' + oConfig.sDefaultAvatar + '" alt="" /></a>');
// Fire event for 'scroll' to show the content only if is visible in view port...
var elem = document.getElementById("last-topics");
if (isInViewPort(elem)) {
LastTopics(oTarget, oConfig.sExpression0, oConfig.sGetIMG);
} else {
jQuery(window).on('scroll.lasttopics', callFunction(elem, oTarget, oConfig.sExpression0, oConfig.sGetIMG));
}
});
// Function to check if an element is visible in view port
function isInViewPort(elem) {
var rect = elem.getBoundingClientRect();
console.log(rect);
return (
rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}
// Start function to show the content...
function callFunction(elem, oTarget, sExpression0, sGetIMG) {
return function() {
// Chech if the element is visible in view port!
if (isInViewPort(elem)) {
// If visible, stop event!!!
jQuery(window).off('scroll.lasttopics');
LastTopics(oTarget, sExpression0, sGetIMG);
}
}
}
// Show member avatar in Recent Topics Widget!
function LastTopics(oTarget, sExpression0, sGetIMG) {
oTarget.each(function () {
var oThis = jQuery(this); // DOM chached for fast execution!
var temp = oThis.next().find('.mod-recent-author a');
var UserURL = temp.attr('href');
if (!UserURL) {
temp = temp.next();
UserURL = temp.attr('href');
}
var UserTitle = temp.text();
var oImgTag = oThis.find('.ipsUserPhoto_mini');
var UserIMG = 0;//sessionStorage.getItem(UserURL); // Gets the avatar saved in local storage (Fastest!)
oThis.find('a.ipsUserPhoto.widget').attr('href', UserURL).attr('title', UserTitle);
// If avatar alread saved, then no request member profile!
if(UserIMG) {
oImgTag.attr('src', UserIMG);
} else {
// if not, then only request per session!!!
jQuery.get(UserURL, function(data){
var profile_img = jQuery(sGetIMG, data).attr('src');
if (profile_img !== undefined) {
oImgTag.attr('src', profile_img);
// Saves the member avatar in local storage
sessionStorage.setItem(UserURL, profile_img);
}
});
}
});
}
E ao CSS:
- Código:
.ipsUserPhoto.widget {
position: absolute;
left: 0;
}
.mod-recent-row {
padding-left: 45px;
position: relative;
}
.mod-recent-title:not(:first-child) {
margin-top: 20px;
display: inline-block;
}
Re: Widget ultimo assuntos com avatar
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Tópicos semelhantes
» Avatar no widget últimos assuntos
» Avatar widget nos ultimos assuntos
» Colocar avatar no widget ultimos assuntos
» Personalizar e adicionar avatar no widget últimos assuntos
» Avatar no widget ultimos assuntos, alguns promenores
» Avatar widget nos ultimos assuntos
» Colocar avatar no widget ultimos assuntos
» Personalizar e adicionar avatar no widget últimos assuntos
» Avatar no widget ultimos assuntos, alguns promenores
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos