Membres connectés récemment
[PHPBB3]Afficher des commentaires sous forme de vignettes
2 participants
Page 1 sur 1
Hello les ami(e)s,
voici une astuce (template non modifié) bien sympa.
Astuce incompatible avec les doubles post:
https://forum.forumactif.com/t405404-fusionner-agreger-les-multi-messages-double-post#3380145
Le code html devra être déposé dans un sujet ou tous les membres peuvent répondre via la réponse rapide.
La réponse rapide étant désactivée pour les invités, ces derniers ne pourront donc pas en profiter.
Si cette dernière est absente le formulaire ne s'affichera pas.
On aura un contenu qui sera envoyé seulement si le membre aura tapé X caractères (défini dans le script) .
Pour l'exemple j'ai défini 15 caractères.
Le zéro (0) correspond au nombre de caractères tapés et à coté le nombre restant.
Une fois les 15 caractères atteint, ces deux parties laisseront la place à un texte
mentionnant que le membre peut envoyer son commentaire (modifiable dans le script):
Le membre aura le choix de poster en anonyme et
dans ce cas il cochera la case et un avatar par défaut lui sera attribué.
Cet avatar est modifiable dans le script:
Pour les membres du staff, il pourront soit éditer ou supprimer la vignettes,
les membres verront juste les vignettes.
Toutes les vignettes auront l'id du message, c'est à dire qu'à la publication du message on pointera vers ce dernier.
Pour que cette astuce fonctionne, il est impératif d'activer le premier message:
Le nombre de vignettes sera comptabilisées par page.
Général/Messages et Emails/Configuration/Messages
Toujours afficher le 1er message dans les sujets:
Cocher Oui
Et que la réponse rapide soit activée:
Général/Messages et Emails/Configuration/Messages
Autoriser les Réponses rapides : cocher oui
Les aperçus imagés :
Pour le staff on reprend les images du bouton "Editer" et "Supprimer"
Le script est optimisé pour le tag du membre:
Allez hop le script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher Sur les sujets
Déposer ceci:
Penser a cliquer sur le bouton
La css a été optimisée afin d'avoir un affichage concret.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton
Vous pouvez personnaliser les boutons "Editer" "Supprimer" avec ce style:
Il manque l'essentiel le code html que vous allez déposer dans votre premier message (formulaire) :
voici une astuce (template non modifié) bien sympa.
Astuce incompatible avec les doubles post:
https://forum.forumactif.com/t405404-fusionner-agreger-les-multi-messages-double-post#3380145
Le code html devra être déposé dans un sujet ou tous les membres peuvent répondre via la réponse rapide.
La réponse rapide étant désactivée pour les invités, ces derniers ne pourront donc pas en profiter.
Si cette dernière est absente le formulaire ne s'affichera pas.
On aura un contenu qui sera envoyé seulement si le membre aura tapé X caractères (défini dans le script) .
Pour l'exemple j'ai défini 15 caractères.
- Code:
//Le nombre minimum de caracteres
var num=15;
Le zéro (0) correspond au nombre de caractères tapés et à coté le nombre restant.
Une fois les 15 caractères atteint, ces deux parties laisseront la place à un texte
mentionnant que le membre peut envoyer son commentaire (modifiable dans le script):
- Code:
//LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
var textinfo="Vous pouvez envoyer votre commentaire";
Le membre aura le choix de poster en anonyme et
dans ce cas il cochera la case et un avatar par défaut lui sera attribué.
Cet avatar est modifiable dans le script:
- Code:
//LE LIEN DE L AVATAR PAR DEFAUT
var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
Pour les membres du staff, il pourront soit éditer ou supprimer la vignettes,
les membres verront juste les vignettes.
Toutes les vignettes auront l'id du message, c'est à dire qu'à la publication du message on pointera vers ce dernier.
Pour que cette astuce fonctionne, il est impératif d'activer le premier message:
Le nombre de vignettes sera comptabilisées par page.
Général/Messages et Emails/Configuration/Messages
Toujours afficher le 1er message dans les sujets:
Cocher Oui
Et que la réponse rapide soit activée:
Général/Messages et Emails/Configuration/Messages
Autoriser les Réponses rapides : cocher oui
Les aperçus imagés :
Pour le staff on reprend les images du bouton "Editer" et "Supprimer"
Le script est optimisé pour le tag du membre:
Allez hop le script:
Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript
Mettre un titre explicite.
Cocher Sur les sujets
Déposer ceci:
- Code:
$(function(){
//Si sujet verrouille
var verrou=$('img[alt^="Ce sujet est verrouillé"]').length;
//Si reponse rapide presente
var quick=$('form[id="quick_reply"]').length;
var log=_userdata["session_logged_in"];
//SI VERROUILLE ALORS ON CACHE LE FORMULAIRE
if((verrou)||(log==0)||(quick==0)){$('.M14_formulaire').hide();}
//SI DECONNECTE ON REMPLACE LE CONTENU DES VIGNETTES PAR UN LOGIN/REGISTER
if(log==0){$('.M14_vignette_topic').addClass('InvitE').html('<span class="M14_vignette_reg_log">Vous devez être <a href="/register" class="link">inscrit</a> et <a href="/login"class="link">connecté</a> pour voir ce commentaire</span>'); }
var user=_userdata["username"];
//le texte affiché dans le conteneur
var texta="votre commentaire doit contenir au moins";
//Le nombre minimum de caracteres
var num=15;
var btn=$('#M14_formulaire_Go');
$('.M14_formulaire_caractere_info').text('Reste:'+num+'');
$('#M14_formulaire_Comment').attr('placeholder','Bonjour '+user+',\n'+texta+' '+num+' caractéres.');
$('#M14_formulaire_Comment').keyup(function(){
var a=$(this).val().length;
var result=num-a;
//LE TEXTE SI LE COMMENTAIRE PEUT ETRE ENVOYE
var textinfo="Vous pouvez envoyer votre commentaire";
$('.M14_formulaire_caractere_info').text('Reste:'+result+'');
if(a>=num)
{
$('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','0');
$('input[id="M14_formulaire_Go"]').slideDown();
$('.M14_formulaire_caractere').attr('title','Envoyer votre commentaire').text(textinfo);
}
if(a<num)
{
$('.M14_formulaire_Titre,.M14_formulaire_caractere_info').css('opacity','1');
$('input[id="M14_formulaire_Go"]').slideUp();
$('.M14_formulaire_caractere').attr('title','Nombre de caractéres').text(a);
}
});
$(btn).click(function(){
var avatar=_userdata["avatar"];
var pseudo='@"'+_userdata["username"]+'"';
var commentaire=$('#M14_formulaire_Comment').val();
//Si pseudo non renseigne
if($('input[name="M14_formulaire_Anonyme"]').is(':checked')){
var b=$('input[id="M14_formulaire_Anonyme_hide"]').val();
//LE LIEN DE L AVATAR PAR DEFAUT
var img="https://i.servimg.com/u/f20/20/11/87/27/chat10.png";
var avatar='<img src="'+img+'">';
var pseudo=$('input#M14_formulaire_Anonyme_hide').val();
}
var aujourdhui=new Date();
var annee=aujourdhui.getFullYear();
var mois=aujourdhui.getMonth();
var jour=aujourdhui.getDate();
var joursemaine=aujourdhui.getDay();
var tab_mois=new Array("janv.","fév.","mars.","avril.","mai","juin","juil.","aout","sept.","oct.","nov.","déc.");
var heure=aujourdhui.getHours();
if (heure<10) {heure = "0" + heure}
var minutes=aujourdhui.getMinutes();
if (minutes<10) {minutes = "0" + minutes}
var fullHeure=heure+' h '+minutes;
var fullDate='a publié ce commentaire le '+jour+' '+tab_mois[mois]+' '+annee+' à '+fullHeure;
$editor = $('.sceditor-container');
if ($editor.hasClass('wysiwygMode')) $editor.removeClass('wysiwygMode').addClass('sourceMode') ;
$('#quick_reply textarea ').val('<div class="M14_vignette_topic"><div class="M14_vignette_ancre"style="position: relative;top: -30px; width: 1px;"></div><div class="M14_vignette_topic_comment"><div class="M14_vignette_topic_Img">'+avatar+'</div><div class="M14_vignette_topic_Haut"><span class="M14_vignette_topic_Titre">'+pseudo+'</span><span class="M14_vignette_topic_Date">'+fullDate+'</span></div><div class="M14_vignette_topic_Commentaire">'+commentaire+'</div></div>\n</div>');
$("#quick_reply input[name='post'][value='Envoyer']").click()})
});
$(function(){
$('.M14_vignette_topic_Titre').each(function(){var $this=$(this);
var not=$(this).find('a[href^="/u"]').length;
if(!not){$this.addClass('no_pseudo');}});
var staff=$('a[href^="/modcp?mode=delete"]').length;
var a=$(this).find('.M14_vignette_topic').length;
$(this).find('.M14_vignette_topic').each(function(){
$(this).closest('div[class*="post--"]').addClass('M14_post_none');
var link=$(this).closest('div[class*="post--"]').find('div[style]').attr('id');
$(this).find('.M14_vignette_ancre').attr('id',link);
var d=$(this);
if(staff)
{
var b=$(this).closest('div[class*="post--"]').find('a[href$="mode=editpost"]').closest('li').html();
var c=$(this).closest('div[class*="post--"]').find('a[href$="mode=delete"]').closest('li').html();
$('.M14_recept_comment').append(d);d.before(''+b+' '+c+'');}
$('.M14_recept_comment').append(d);});
var w=$('div[class*="post--"]:first').find('.M14_vignette_topic').length;
if(w==0){$('.M14_formulaire_affiche').attr('title','Aucun commentaire').html('( 0 )'); }
if(w==1){$('.M14_formulaire_affiche').attr('title','1 commentaire').html('( '+w+' )'); }
if(w>1){$('.M14_formulaire_affiche').attr('title',''+w+' commentaires').html('( '+w+' )'); }
});
Penser a cliquer sur le bouton
La css a été optimisée afin d'avoir un affichage concret.
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
/*LE CONTENEUR DES VIGNETTES*/
.M14_recept_comment
{
width:100%;
position: relative;
}
/********DEBUT DES VIGNETTES********/
/*LA VIGNETTE*/
.M14_vignette_topic
{
margin-top:5px;
margin-bottom: 3px;
border:1px solid #666;
padding: 2px;
height: 100px;
width: 90%;
}
/*LA DATE*/
.M14_vignette_topic_Date
{font-size:11px; margin-left:10px;color:#666!important;}
/*LA PARTIE COMMENTAIRE*/
.M14_vignette_topic_Commentaire
{
color:#666!important;
font-size:11px!important;
padding: 2px;
white-space: pre-wrap;
height:50px;
width:85%;
overflow-y:auto;
border:1px dotted #666;
}
/*LE CONTENEUR DE L AVATAR*/
.M14_vignette_topic_Img{position: absolute;margin-top:13px;}
/* L AVATAR*/
.M14_vignette_topic_Img img{width:60px!important;height:60px!important;border-radius:100%;}
/*ON DECALE DE 70 PX LES BLOCS DE DROITE EN FONCTION DE L AVATAR*/
.M14_vignette_topic_Haut,.M14_vignette_topic_Commentaire{margin-left:70px;}
/*LE PSEUDO*/
.M14_vignette_topic_Titre:not(.no_pseudo) a[href^="/u"]{color:#666;font-size:11px; }
/*SI ANONYME*/
.M14_vignette_topic_Titre.no_pseudo{color:red;font-style:italic;font-size:11px;}
/*ON CENTRE LA VIGNETTE POUR LES INVITES*/
.M14_vignette_topic.InvitE{text-align: center;}
/*COULEUR ET APPARENCE DU TEXTE/LIEN DANS LA VIGNETTE POUR LES INVITES*/
.M14_vignette_reg_log{color:red!important;line-height: 100px;}
.M14_vignette_reg_log a.link{color:red!important;text-decoration:none!important;}
/********FIN DES VIGNETTES********/
/*ON MASQUE LES MESSAGES*/
.M14_post_none{display:none!important;}
/*LE FORMULAIRE*/
.M14_formulaire
{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 20px 20px;
}
/*LE COMPTEUR DE CARACTERES*/
.M14_formulaire_caractere
{
position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
}
.M14_formulaire_caractere_info
{
position: absolute;
color: #666 !important;
font-size: 11px !important;
font-family: Muli;
font-weight: 700;
text-transform: uppercase;
margin-left:25px;
}
/*LE TITRE DU FORMULAIRE*/
.M14_formulaire_Titre
{
color:#666!important;
font-size:11px!important;
font-family: Muli;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/*LE NOMBRE DE VIGNETTES A COTE DU TITRE*/
span.M14_formulaire_affiche
{
margin-left:5px;
font-size: 11px;
color:#666!important;
cursor:pointer;
}
/*LE CONTENU */
#M14_formulaire_Comment
{
color:#000!important;
font-weight:bold;
font-size:11px!important;
border: 1px solid #eee;
height: 100px;
margin: 5px 0;
padding: 10px;
width: 95%;
}
/*LE BOUTON ENVOYER*/
#M14_formulaire_Go{display:none;float:right;}
/*LA LIGNE DES BOUTONS*/
.M14_formulaire_btn
{
width:80%;
color: #666;;
font-size:11px;
font-weight: 700;
letter-spacing: 2px;
padding: 3px;
text-transform: uppercase;
}
.M14_formulaire_btn input[type="checkbox"]
{
height: 20px;
padding: 3px;
}
Penser a cliquer sur le bouton
Vous pouvez personnaliser les boutons "Editer" "Supprimer" avec ce style:
- Code:
/*LES BOUTONS DU STAFF*/
.M14_recept_comment img.i_icon_edit,
.M14_recept_comment img.i_icon_delete
{
VOTRE CSS
}
Il manque l'essentiel le code html que vous allez déposer dans votre premier message (formulaire) :
- Code:
<div class="M14_formulaire">
<span class="M14_formulaire_caractere">0</span><span class="M14_formulaire_caractere_info"></span>
<div class="M14_formulaire_Titre"> Laisser un commentaire <span class="M14_formulaire_affiche"></span></div><br />
<textarea id="M14_formulaire_Comment"></textarea><br>
<span class="M14_formulaire_btn"><input type="checkbox" name="M14_formulaire_Anonyme"> Poster en anonyme<input type="button" class="button2" id="M14_formulaire_Go" value="Envoyer" title="Envoyer le commentaire"></span><br />
<input type="hidden" id="M14_formulaire_Anonyme_hide" value="Anonyme"></div>
<div class="M14_recept_comment"></div>
photoclic aime ce message
Sujets similaires
» [AWESOMEBB]Afficher des commentaires sous forme de vignettes
» [PHPBB2]Afficher des commentaires sous forme de vignettes
» [MODERNBB]Afficher des commentaires sous forme de vignettes
» [PHPBB3]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
» [INVISION]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
» [PHPBB2]Afficher des commentaires sous forme de vignettes
» [MODERNBB]Afficher des commentaires sous forme de vignettes
» [PHPBB3]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
» [INVISION]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum