Widget cu avatarele membrilor conectati

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Widget cu avatarele membrilor conectati

Mesaj Scris de Cassius Dio la data de Dum 17 Mar - 12:52

Afisarea avatarelor membrilor conectati

1. Descriere:
În acest tutorial vom învăţa să creăm un widget pentru forumul nostru, care prezintă o grilă de miniaturi ale avatarelor cu numele și link-ul la profilul utilizatorilor conectati la forumul nostru, cu un stil similar ca pe Facebook.

Demonstraţie:


2. Configurarea permisiunilor:
Pentru ca widget-ul sa fie afişat corect, trebuie să ne asigurăm că este setată permisiunea Membri.
Panou de Administrare ~> Utilizatori & Grupuri ~> Permisiuni speciale
La rubrica Membri, selectam Vizitatori.


Exclamare Efectuand aceste modificari chiar si vizitatorii vor avea acces la lista de membri forumului si la butonul corespunzator din meniul de navigare.

3. Crearea widget-ului:
Tot ce trebuie să facem acum este să creăm un nou widget după modelul de mai jos. Pentru asta vizităm:
Panou de Administrare ~> Module ~> ~>  Portal & Widget-uri ~> Configurarea portalului
Facem click pe butonul Structura, apoi pe Creati un widget personalizat.

Completam rubricile astfel:

  • Numele modulului: Avatarele utilizatorilor
  • Utilizați un tip de tabel: Da
  • Titlul modulului: Membrii forumului
  • Modul sursa: Inseraţi în această casuţă codul care se potriveşte versiunii forumului dumneavoastră...

phpBB2:
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<div id="my_member_list" style="display:none;"></div>
<div align="center" id="avatars"></div>
<script>
jQuery(document).ready(function(){
   jQuery("#my_member_list").load("/memberlist .memberlist", function(data) {                            
      jQuery(data).find('table.forumline tbody tr').each(function(index) {            
         var href = jQuery(this).find("div.avatar.mini>a").attr("href");        
         var user = jQuery(this).find("span.gen a.gen span strong").text();    
         var enlace = jQuery("<a href='" + href + "' alt='" + user + "' title='" + user + "' />");      
         var imagen = jQuery(this).find("div.avatar.mini>a>img");  
         var miembro = jQuery("<div class='name'>" + user + "</div>");            
         jQuery(enlace).append(imagen).append(miembro);            
         jQuery("#avatars").append(jQuery("<span class='grid_item'>").append(enlace));                        
      });        
   });      
});
</script>
<style>
#avatars{
 width: 215px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
#avatars img{
 border: 1px solid black;
 height: 50px;
 width: 50px;
}
#avatars a{
 background: none !important;
 padding-left: 0 !important;
}
#avatars .grid_item {
 float: left;
 overflow: hidden;
 padding: 0 3px 0 0;
 width: 50px;
}
#avatars .name {
 font-size: 9px;
 color: grey;
 overflow: hidden;
 text-align: center;
 white-space: nowrap;
}
</style>

phpBB3:
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<div id="my_member_list" style="display:none;"></div>
<div align="center" id="avatars"></div>
<script>
jQuery(document).ready(function(){
 jQuery("#my_member_list").load("/memberlist .memberlist", function(data) {
     jQuery(data).find('.avatar-mini>a').each(function(index) {
         jQuery("#avatars").append(jQuery(this));                          
     });
 });
});
</script>
<style>
#avatars{
 width: 215px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
#avatars img{
 border: 1px solid black;
 height: 50px;
 width: 50px;
}
#avatars a{
 background: none !important;
 padding-left: 0 !important;
 float: left;
 overflow: hidden;
 padding: 0 3px 0 0;
 width: 50px;    
}
#avatars strong {
 font-size: xx-small;
 color: grey;
 overflow: hidden;
 text-align: center;
 white-space: nowrap;
}    
</style>

PunBB:
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<div id="my_member_list" style="display:none;"></div>
<div align="center" id="avatars"></div>
<script>
jQuery(document).ready(function(){
 jQuery("#my_member_list").load("/memberlist .frm-form", function(data) {
     jQuery(data).find('.avatar-mini').each(function(index) {            
      var href = jQuery(this).find('a.gen').attr("href");        
      var user = jQuery(this).find("a.gen span span strong").text();
      var enlace = jQuery("<a href='" + href + "' alt='" + user + "' title='" + user + "' />");                      
      var imagen = jQuery(this).find('a.gen>img');
      var miembro = jQuery("<div class='name'>" + user + "</div>");            
      jQuery(enlace).append(imagen).append(miembro);            
      jQuery("#avatars").append(jQuery("<span class='grid_item'>").append(enlace));        
     });
 });
});
</script>
<style>
#avatars{
 width: 215px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
#avatars img{
 border: 1px solid black;
 height: 50px;
 width: 50px;
}
#avatars a{
 background: none !important;
 padding-left: 0 !important;
}
#avatars .grid_item {
 float: left;
 overflow: hidden;
 padding: 0 3px 0 0;
 width: 50px;
}
#avatars .name {
 font-size: 9px;
 color: grey;
 overflow: hidden;
 text-align: center;
 white-space: nowrap;
}
</style>

Invision:
Cod:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<div id="my_member_list" style="display:none;"></div>
<div align="center" id="avatars"></div>
<script>
jQuery(document).ready(function(){
 jQuery("#my_member_list").load("/memberlist .member-list", function(data) {
     jQuery(data).find('.popupmenu').each(function(index) {
      var href = jQuery(this).find('.popupmenu-item>a').first().attr("href");
      var user = jQuery(this).find('.popupmenu-item>a').last().attr("href").replace("/spa/","");            
      var enlace = jQuery("<a href='" + href + "' alt='" + user + "' title='" + user + "' />");                      
      var imagen = jQuery(this).find('.avatar>img');
      var miembro = jQuery("<div class='name'>" + user + "</div>");            
      jQuery(enlace).append(imagen).append(miembro);            
      jQuery("#avatars").append(jQuery("<span class='grid_item'>").append(enlace));        
     });
 });
});
</script>
<style>
#avatars{
 width: 215px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}
#avatars img{
 border: 1px solid black;
 height: 50px;
 width: 50px;
}
#avatars a{
 background: none !important;
 padding-left: 0 !important;
}
#avatars .grid_item {
 float: left;
 overflow: hidden;
 padding: 0 3px 0 0;
 width: 50px;
}
#avatars .name {
 font-size: 9px;
 color: grey;
 overflow: hidden;
 text-align: center;
 white-space: nowrap;
}
</style>
În sfârşit, acum putem da click pe butonul Inregistrare şi am terminat.

Tutorial scris de Turbodeif, tradus de Danger

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Cassius Dio
Membru onorific
Membru onorific

Mesaje : 11025
Varsta : 20
Localizare : Strawberry Fields
Data înscrierii : 13/07/2012
Multumiri : 83
Niciun avertisment

Vezi profilul utilizatorului http://beatles.forummo.com/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum