I have a div
(mosaic of users) that inside it has a array
(javascript) with photos of users (data coming from the bank). The number of user photos must be less than or equal to 15. If array
has less than 15 users (photos), it must be filled with an icon or image representing that it is without a user.
Can anyone help me?
Below is an example:
html += '<div class="mosaico-user wrap">'
+ '<div class="liderGrupo"></div>';
var iconePadrao = '<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>';
var demoParticipantes = ['<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste1.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/teste.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover" data-original-title="" title=""><img src="/resources/img/4.jpg" class="fotousuario"></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x usuarioSemFoto" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>',
'<a class="linkUsuario" rel="popover" href="#" data-popover-content="#infoUser" data-toggle="popover"><i class="fa fa-user fa-3x semUsuario" aria-hidden="true"></i></a>'
];
var conteudo = "";
var i;
for (i = 0; i < 15; i++) {
conteudo = demoParticipantes[i];
html += conteudo;
}