[FOORUM] Online inimeste avataridega widget

Lubasin küll, et rohkem foorumi õpetusi siia ei lisa, aga #yolo.

Kirjeldus: Selle Javascriptiga saad sa kuvada online inimesed koos nende avataridega foorumi widgetisse.


1. Teeme kasutajate profiilid külalistele nähtavaks
Selleks vali View the profile - Guests



2. Loome widgeti

Loome uue widgeti, vajutades Create a widget

Täida ära widgeti informatsioon:
Widget name : Online avatarid
Use a table type : Jah
Widget title : Inimesed foorumil
Widget source : vali enda foorumi versioonile vastav

phpBB2:

Kood:

<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:

Kood:

<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:

Kood:

<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:

Kood:

    <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>

Seejärel vajuta Saada ning paiguta oma widget sobivasse kohta.