[PHPBB3] Photos par thèmes

Hello Phil,

Tu es parti sur la récupération par rapport aux tags et non aux préfixes sur les titres.

Je pensais que tu étais parti de ce que j'avais écrit ici:https://www.milouze14.com/t32349-phpbb3-photos-par-themes#615642
"Cette méthode pourrait fonctionner, mais il faudrait taguer tous les messages déjà postés et de mander aux membres de taguer chacun de leur post. Or j'ai les préfixes avant le titre du sujet déjà et ce serait bien de partir des préfixes pour voir les photos correspondantes."

Alors je viens de mettre des tags et ça fonctionne comme tu l'as prévu.
Le tag "Portraits" doit avoir un s à la fin. J'ai mis un tag "Portrait" sans s et le sujet apparait cette fois. C'est pour cela que cela ne fonctionnait pas.

Si cela est possible, ce serait de présenter les photos incluses dans les sujets.



edit:
Nos messages se sont croisés.

Bonne soirée l'ami à demain et merci encore.

Hello Serge,
tu te compliques bien la tête mon ami, pourquoi ne pas créer un forum pour chaque thème comme ici avec les différentes versions hpbb2 etc etc..
Ce serait bien plus simple pour aller à la recherche des photos.

Ensuite le tag est le plus simple a utiliser afin de récupérer tout le contenu et
d’utiliser ce que forumactif nous offre.

Code:

/tag/le_sujet_tagué

Ensuite, le tag est bien plus fiable car si on se base sur le préfixe, on va se retrouver avec des conditions draconiennes comme ce sujet:
On va choper des smileys et la photo est présente sur le premier message,après plus rien.

https://photoclic.forum-pro.fr/t21265-portraits-wet-hair#

Sur celui-ci:
https://photoclic.forum-pro.fr/t21145-paysages-depuis-le-songe-d-aubert#

2 images sur le premier message après plus rien..

Et franchement , je serais pas mettre en place un tel script pour récupérer le préfixe mon ami

Bonjour Philippe,

Oui, tu as entièrement raison, restons sur les tags.

Ce qui m'ennuyait principalement, c'est qu'il faudrait taguer tous les messages déjà postés et demander aux membres de taguer chacun de leur futur post.

A moins qu'au post d'un sujet, celui-ci soit directement tagué avec le préfixe, mais c'est une autre histoire :-)

Je mets ci dessous la liste des thèmes:
"Paysages","Panoramas","Portraits","Rue et Instants de vie","Studio","Petite série",
"Nu /Charme","Concerts et spectacles","Animaux","Noir et Blanc","Flore",
"Macro et Proxy","Urbex Engins et véhicules",
"Architecture et Graphisme","Sport","Inclassables".

Encore merci Phil pour ton aide précieuse.

Re Serge,

je vais me lancer dans l'aventure ( cela prendra un peu de temps mon ami).

Pour le script des préfixes, il faudra surement en faire la demande avec Arnaud afin de l'insérer lors de l'envoi..

Attention toutefois avec les tags Serge, à priori les mots composés ne sont pas sélectionnés dans leur totalité:
C'est à dire que "Instants de vie et rue".
Le tag sera seulement "Instants".
Donc attention mon ami.

Il faudrait raccourcir tous les mots composés......

Bonsoir Philippe,

Merci par avance pour la prise en charge de cette demande.
Et rien ne presse l'ami.

Je viens d'éditer mon message Serge:

https://www.milouze14.com/t32349-phpbb3-photos-par-themes#615732

Milouze14 a écrit:
.....
Attention toutefois avec les tags Serge, à priori les mots composés ne sont pas sélectionnés dans leur totalité:
C'est à dire que "Instants de vie et rue".
Le tag sera seulement "Instants".
Donc attention mon ami.

Il faudrait raccourcir tous les mots composés......

Ah bien vu Phil.
Alors faut savoir que lorsque l'on rentre un nom composé pour un tag, par exemple "Instants de vie et rue, le programme insère dans le message des _ à la place des espaces et ça se présente donc ainsi:
#Instants_de_vie_et_rue

Quel programme Serge, sur mon fofo,
cela s'arrête au premier mot de chaque préfixe!!

Sur mon forum, quand je clique sur le # pour insérer un tag dans un message, et que je tape des mots avec des espaces, à la validation les espaces sont remplacés par des _

Je pense que c'est le JS "Suivi hasgtag" en haut dans mes JS (le 3ième actuellement) qui fait ça.

Je regarde cela Serge car je ne passais pas par l'éditeur de mon côté

Coucou Serge,

alors voici la page HTML dans sa totalité..
J'ai volontairement gardé les mêmes identifiants et class afn que tu puisses mieux te repérer.
Pour le désign, il faut juste faire attention aux dimensions des images,ne le grossit pas plus car il faut laisser
la div en position absolute afin qu'elle reste positionnée au même endroit sinon, l'effet est vraiment horrible.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gestion des thèmes</title>  

    <style type="text/css">
.tooltipster-base{border:3px solid #345;}
body{background-color: #454444;color: #c3c4c7; }
* {scrollbar-color: #28aab8 #FFF;scrollbar-width: thin;}      
      
/*la barre de navigation*/
.M14_navigation
{
width:80%;
margin-left:10%;
height:30px;
text-align:center;
}
/*les liens de la barre de navigation*/
.M14_linkNAV
{
color:#3bd9eb;
text-decoration: none;
cursor:pointer;
}

/*reception des tags*/
div[class^="M14_recept_tags"]
{
width:70%;
margin-left:15%;
margin-top:100px;
border:2px solid white;      
height:400px;
overflow-y:auto;
padding:6px;
position:absolute;
}
/*les divs recevants les sujets*/
div[class^="M14_recept_tags"] div
{
height:60px;      
margin:10px 0px 10px 0px;
}      
div[class^="M14_recept_tags"] div:last-child{margin-bottom: 30px;}
      
/*les liens des sujets*/
a.M14_link
{
position: absolute;
color:#3bd9eb;
text-decoration: none;
margin: 3px;
cursor:pointer;
line-height: 60px;
width:25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*les liens des forums*/
.M14_linkfofo
{
color:#3bd9eb;
text-decoration: none;
}
/*les images*/
.M14_src
{
width:48px;
height:48px;
margin-left:26%;
vertical-align: middle;
border-radius:60px;
position:absolute;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}  
.M14_src:hover
{
width:96px;
height:96px;
border-radius:96px;

}      
.M14_pseudo
{
float:right;
line-height:60px;
margin-right:20px;
}
      
/*on cache toutes les autres divs*/
.Portrait,.Panoramas,.Studio,.Instants,.Serie,.Nu_charme,.Concert,.Animaux,
.Noir_Blanc,.Flore,.Macro,.Urbex ,.Architecture,.Sport,.Inclassables  
{
display:none;      
}
 /*les separations entre les liens*/
span.M14_separate
{
display:inline-block;
width: 8px;
height: 8px;
margin: ;
background-color:#28aab8;
border-radius: 8px;
line-height: 8px;
      margin-left: 5px;
}      
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

  </head>

<body>
  
  <div class="M14_navigation">
    <a id="Paysages"class="M14_linkNAV">Paysages</a><span class="M14_separate"></span>
<a id="Panoramas"class="M14_linkNAV">Panoramas</a><span class="M14_separate"></span>
<a id="Portraits"class="M14_linkNAV">Portraits</a><span class="M14_separate"></span>
<a id="Instants"class="M14_linkNAV">Instants de vie et rue</a><span class="M14_separate"></span>
<a id="Studio"class="M14_linkNAV">Studio</a><span class="M14_separate"></span>
<a id="Serie"class="M14_linkNAV">Petite série</a><span class="M14_separate"></span>
<a id="Nu_Charme"class="M14_linkNAV">Nu / Charme</a><span class="M14_separate"></span>
    <a id="Concert"class="M14_linkNAV">Concerts et spectacles</a>
    <br />
<a id="Animaux"class="M14_linkNAV">Animaux</a><span class="M14_separate"></span>    
<a id="Noir_Blanc"class="M14_linkNAV">Noir et Blanc</a><span class="M14_separate"></span>
<a id="Flore"class="M14_linkNAV">Flore</a><span class="M14_separate"></span>
<a id="Macro"class="M14_linkNAV">Macro et Proxy</a><span class="M14_separate"></span>
<a id="Urbex"class="M14_linkNAV">Urbex Engins et véhicules</a><span class="M14_separate"></span>
<a id="Architecture"class="M14_linkNAV">Architecture et Graphisme</a><span class="M14_separate"></span>
<a id="Sport"class="M14_linkNAV">Sport</a><span class="M14_separate"></span>
<a id="Inclassables"class="M14_linkNAV">Inclassables</a>
  </div>
    <br />  <br />
  <div class="M14_btn_login"style="text-align:center;"><a href="/login" class="M14_linkfofo not_login">Connectez vous</a> ou <a href="/register" class="M14_linkfofo not_register">enregistrez vous</a></div>

  <div class="M14_recept_tags Paysages"></div>  
  <div class="M14_recept_tags Panoramas"></div>  
  <div class="M14_recept_tags Portrait"></div>
  <div class="M14_recept_tags Instants"></div>
   <div class="M14_recept_tags Studio"></div>
   <div class="M14_recept_tags Serie"></div>
  <div class="M14_recept_tags Nu_charme"></div>
 <div class="M14_recept_tags Concert"></div>
 <div class="M14_recept_tags Animaux"></div>
   <div class="M14_recept_tags Noir_Blanc"></div>
   <div class="M14_recept_tags Flore"></div>
  <div class="M14_recept_tags Macro"></div>
   <div class="M14_recept_tags Urbex"></div>
   <div class="M14_recept_tags Architecture"></div>
  <div class="M14_recept_tags Sport"></div>
   <div class="M14_recept_tags Inclassables"></div>
  

<script>
$(function(){
$('a#Paysages').click(function(){
$('.M14_recept_tags:not(.Paysages)').fadeOut();
$('.M14_recept_tags.Paysages').fadeIn();
});
$('a#Panoramas').click(function(){
$('.M14_recept_tags:not(.Panoramas)').fadeOut();
$('.M14_recept_tags.Panoramas').fadeIn();
});
$('a#Portraits').click(function(){
$('.M14_recept_tags:not(.Portrait)').fadeOut();
$('.M14_recept_tags.Portrait').fadeIn();
});
$('a#Instants').click(function(){
$('.M14_recept_tags:not(.Instants)').fadeOut();
$('.M14_recept_tags.Instants').fadeIn();
});
$('a#Studio').click(function(){
$('.M14_recept_tags:not(.Studio)').fadeOut();
$('.M14_recept_tags.Studio').fadeIn();
});
$('a#Serie').click(function(){
$('.M14_recept_tags:not(.Serie)').fadeOut();
$('.M14_recept_tags.Serie').fadeIn();
});
$('a#Nu_Charme').click(function(){
$('.M14_recept_tags:not(.Nu_Charme)').fadeOut();
$('.M14_recept_tags.Nu_charme').fadeIn();
});
$('a#Concert').click(function(){
$('.M14_recept_tags:not(.Concert)').fadeOut();
$('.M14_recept_tags.Concert').fadeIn();
});
  $('a#Animaux').click(function(){
$('.M14_recept_tags:not(.Animaux)').fadeOut();
$('.M14_recept_tags.Animaux').fadeIn();
});
  $('a#Noir_Blanc').click(function(){
$('.M14_recept_tags:not(.Noir_Blanc)').fadeOut();
$('.M14_recept_tags.Noir_Blanc').fadeIn();
});
$('a#Flore').click(function(){
$('.M14_recept_tags:not(.Flore)').fadeOut();
$('.M14_recept_tags.Flore').fadeIn();
});
$('a#Macro').click(function(){
$('.M14_recept_tags:not(.Macro)').fadeOut();
$('.M14_recept_tags.Macro').fadeIn();
});
$('a#Urbex').click(function(){
$('.M14_recept_tags:not(.Urbex)').fadeOut();
$('.M14_recept_tags.Urbex').fadeIn();
});
$('a#Architecture').click(function(){
$('.M14_recept_tags:not(.Architecture)').fadeOut();
$('.M14_recept_tags.Architecture').fadeIn();
});
$('a#Sport').click(function(){
$('.M14_recept_tags:not(.Sport)').fadeOut();
$('.M14_recept_tags.Sport').fadeIn();
});
$('a#Inclassables').click(function(){
$('.M14_recept_tags:not(.Inclassables)').fadeOut();
$('.M14_recept_tags.Inclassables').fadeIn();
});
});
</script>
 
<script>
$(function(){
$.get('/tags/Paysages' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').text();
var vue=$(this).find('dl dd:eq(5)').text();

  $('.Paysages').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Panoramas' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Panoramas').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Portrait' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Portrait').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Instants_de_vie_et_rue' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Instants').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Studio' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Studio').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Petite_série' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Serie').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Nu__Charme' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Nu_charme').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Concerts_et_spectacles' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Concert').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Animaux' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Animaux').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Noir_et_Blanc' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Noir_Blanc').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Flore' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Flore').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Macro_et_Proxy' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Macro').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Urbex_Engins_et_véhicules' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Urbex').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Architecture_et_Graphisme' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Architecture').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Sport' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Sport').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Inclassables' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Inclassables').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
 

</body>

</html>


Bonjour Philippe,

Quel super boulot tu m'as fais là  
Un très grand grand merci.

Pour savoir sur quelle rubrique on se situe, serait-il possible de mettre un fond sur la rubrique sur laquelle on a cliqué, ainsi on saurait quelle rubrique est présentée.
Couleur du fond par exemple #593E41

Aussi, j'abuse peut-être, si cela est possible, avoir en haut de la page la barre de navigation.

Ne reste plus qu'à faire un tutoriel sur le sujet

Re Serge,
peux-tu éclairer ma lanterne car je ne comprends pas de quoi tu parles mon ami!!

Ne reste plus qu'à faire un tutoriel sur le sujet

Pas besoin Stéphane , il faut juste reprendre le contenu de la page HTML et de modifier les titres de la barre de navigation et
les divs recevant les tags car ils ont les mêmes class et ids.

Merci Phiippe.
Il n'y a pas une histoire de tag automatique sur les images ?

Hello Stéphane et Philippe,

@Stéphane: La page html développée par Philippe permet de récupérer les sujets tagués, les tags devant être ajoutés dans le message manuellement.
Je ferais une autre demande pour voir s'il est possible quand on poste un nouveau message, de mettre le tag en bas du 1ier message automatiquement; le tag devant être pour ma demande le préfixe du titre du sujet.

@Philippe: ce que je demandais, si cela est possible, c'est de mettre un fond sur le tag sélectionné, ainsi on saurait à quel tag se rapportent les sujets présentés.
Couleur du fond par exemple #72363D


En image:



Et peut-être aussi au passage de la souris un :hover blanc.
En espérant avoir été plus précis.

Merci Serge,

Dommage qu'il faille qu'un tag soit présent. Vu la cossardise naturelle des internautes, j'ai peur qu'il faille une équipe administrative très, très motivée pour apporter un tag à chaque apposition d'image.
Perso, je suis seul à tout gérer donc ...


pour la modif

Code:

.M14_linkNAV {
 
    background-color: #72363D;
}

.M14_linkNAV:hover {
 
    background-color: white;
}



Coucou les amis,
alors, le faite de taguer un sujet , un message et quelque soit le contenu,
on retrouve l'élément très facilement..


Serge, tu peux tester cette page HTML, normalement tout est fonctionnel avec les ajouts demandés:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gestion des thèmes</title> 

    <style type="text/css">
body{background-color: #454444;color: #c3c4c7; }
* {scrollbar-color: #28aab8 #FFF;scrollbar-width: thin;}     
     
/*la barre de navigation*/
.M14_navigation
{
width:80%;
margin-left:10%;
height:30px;
text-align:center;
}
/*les liens de la barre de navigation*/
.M14_linkNAV
{
font-size: 14px;
color:#3bd9eb;
text-decoration: none;
cursor:pointer;
padding: 3px 6px;
background-color: #454444;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*les liens de la barre de navigation au survol*/
.M14_linkNAV.selected:hover {background-color: white;color:#72363D;}
.selected{background-color:#72363D;}

/*reception des tags*/
div[class^="M14_recept_tags"]
{
width:70%;
margin-left:15%;
margin-top:100px;
border:2px solid white;     
height:400px;
overflow-y:auto;
padding:6px;
position:absolute;
}
/*les divs recevants les sujets*/
div[class^="M14_recept_tags"] div
{
height:60px;     
margin:10px 0px 10px 0px;
}     
div[class^="M14_recept_tags"] div:last-child{margin-bottom: 30px;}
     
/*les liens des sujets*/
a.M14_link
{
position: absolute;
color:#3bd9eb;
text-decoration: none;
margin: 3px;
cursor:pointer;
line-height: 60px;
width:25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*les liens des forums*/
.M14_linkfofo
{
color:#3bd9eb;
text-decoration: none;
}
/*les images*/
.M14_src
{
width:48px;
height:48px;
margin-left:26%;
vertical-align: middle;
border-radius:60px;
position:absolute;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
} 
.M14_src:hover
{
width:96px;
height:96px;
border-radius:96px;

}     
.M14_pseudo
{
float:right;
line-height:60px;
margin-right:20px;
}
     
/*on cache toutes les autres divs*/
.Portrait,.Panoramas,.Studio,.Instants,.Serie,.Nu_charme,.Concert,.Animaux,
.Noir_Blanc,.Flore,.Macro,.Urbex ,.Architecture,.Sport,.Inclassables 
{
display:none;     
}
 /*les separations entre les liens*/
span.M14_separate
{
display:inline-block;
width: 8px;
height: 8px;
background-color:#28aab8;
border-radius: 8px;
line-height: 8px;
margin-left: 5px;
}
/*Barre de navigation native*/     
.recep_Nav_bar{text-align:center;height:100px;}
/*Barre de navigation native lien*/
.recep_Nav_bar ul li a 
{
font-size: 14px!important;
color:#3bd9eb!important;
text-decoration: none!important;
}
/*Barre de navigation native separation*/
.recep_Nav_bar ul li:not(:last-child):after
{
content:'';
display:inline-block;
width: 8px;
height: 8px;
background-color:#28aab8;
border-radius: 8px;
line-height: 8px;
margin-left: 5px;
margin-right: 5px;
}

/*Barre de navigation native positionnement*/
.recep_Nav_bar ul li
{
display: inline;
font-size: 1.1em;
line-height: 2.2em;
list-style-type: none;
width: auto;
}
/*Barre de navigation native on supprime ce qui nous interresse pas*/
.recep_Nav_bar ul li  img,.recep_Nav_bar #search-box
{display:none;}


    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
$(function(){
 
  $.get('/' , function(data){
$(data).find('#page-header .navbar  .inner').each(function(){
var navbar=$(this).html();$('.recep_Nav_bar').html(navbar);
var M14_login=$(this).find('a[id="logout"]').length;
var M14_not_login=$(this).find('a[href^="/login"]:not(#logout)').length;
if(M14_login)
{
$('.M14_btn_login').remove();
}
if(M14_not_login)
{
$('.M14_navigation,div[class^="M14_recept_tags"]').remove(); 
}
 
  });});});</script>
  <div class="recep_Nav_bar"><img src="https://i.servimg.com/u/f20/20/11/87/27/loadin10.gif"/></div>
  <div class="M14_navigation">
<a id="Paysages"class="M14_linkNAV selected">Paysages</a><span class="M14_separate"></span>
<a id="Panoramas"class="M14_linkNAV">Panoramas</a><span class="M14_separate"></span>
<a id="Portraits"class="M14_linkNAV">Portraits</a><span class="M14_separate"></span>
<a id="Instants"class="M14_linkNAV">Instants de vie et rue</a><span class="M14_separate"></span>
<a id="Studio"class="M14_linkNAV">Studio</a><span class="M14_separate"></span>
<a id="Serie"class="M14_linkNAV">Petite série</a><span class="M14_separate"></span>
<a id="Nu_Charme"class="M14_linkNAV">Nu / Charme</a><span class="M14_separate"></span>
<a id="Concert"class="M14_linkNAV">Concerts et spectacles</a>
    <br /><br />
<a id="Animaux"class="M14_linkNAV">Animaux</a><span class="M14_separate"></span>   
<a id="Noir_Blanc"class="M14_linkNAV">Noir et Blanc</a><span class="M14_separate"></span>
<a id="Flore"class="M14_linkNAV">Flore</a><span class="M14_separate"></span>
<a id="Macro"class="M14_linkNAV">Macro et Proxy</a><span class="M14_separate"></span>
<a id="Urbex"class="M14_linkNAV">Urbex Engins et véhicules</a><span class="M14_separate"></span>
<a id="Architecture"class="M14_linkNAV">Architecture et Graphisme</a><span class="M14_separate"></span>
<a id="Sport"class="M14_linkNAV">Sport</a><span class="M14_separate"></span>
<a id="Inclassables"class="M14_linkNAV">Inclassables</a>
  </div>
    <br />  <br />
   
 <div class="M14_btn_login"style="text-align:center;"><a href="/login" class="M14_linkfofo not_login">Connectez vous</a> ou <a href="/register" class="M14_linkfofo not_register">enregistrez vous</a></div>
  <div class="M14_recept_tags Paysages"></div> 
  <div class="M14_recept_tags Panoramas"></div> 
  <div class="M14_recept_tags Portrait"></div>
  <div class="M14_recept_tags Instants"></div>
  <div class="M14_recept_tags Studio"></div>
  <div class="M14_recept_tags Serie"></div>
  <div class="M14_recept_tags Nu_charme"></div>
 <div class="M14_recept_tags Concert"></div>
 <div class="M14_recept_tags Animaux"></div>
  <div class="M14_recept_tags Noir_Blanc"></div>
  <div class="M14_recept_tags Flore"></div>
  <div class="M14_recept_tags Macro"></div>
  <div class="M14_recept_tags Urbex"></div>
  <div class="M14_recept_tags Architecture"></div>
  <div class="M14_recept_tags Sport"></div>
  <div class="M14_recept_tags Inclassables"></div>
 
<script>
 $(function(){
$('.M14_navigation').find('.M14_linkNAV').each(function(){

$(this).click(function(){
  $('.M14_linkNAV.selected').removeClass('selected');
$(this).addClass('selected');
});});});
  </script>
<script>
$(function(){
$('a#Paysages').click(function(){
$('.M14_recept_tags:not(.Paysages)').fadeOut();
$('.M14_recept_tags.Paysages').fadeIn();
});
$('a#Panoramas').click(function(){
$('.M14_recept_tags:not(.Panoramas)').fadeOut();
$('.M14_recept_tags.Panoramas').fadeIn();
});
$('a#Portraits').click(function(){
$('.M14_recept_tags:not(.Portrait)').fadeOut();
$('.M14_recept_tags.Portrait').fadeIn();
});
$('a#Instants').click(function(){
$('.M14_recept_tags:not(.Instants)').fadeOut();
$('.M14_recept_tags.Instants').fadeIn();
});
$('a#Studio').click(function(){
$('.M14_recept_tags:not(.Studio)').fadeOut();
$('.M14_recept_tags.Studio').fadeIn();
});
$('a#Serie').click(function(){
$('.M14_recept_tags:not(.Serie)').fadeOut();
$('.M14_recept_tags.Serie').fadeIn();
});
$('a#Nu_Charme').click(function(){
$('.M14_recept_tags:not(.Nu_Charme)').fadeOut();
$('.M14_recept_tags.Nu_charme').fadeIn();
});
$('a#Concert').click(function(){
$('.M14_recept_tags:not(.Concert)').fadeOut();
$('.M14_recept_tags.Concert').fadeIn();
});
  $('a#Animaux').click(function(){
$('.M14_recept_tags:not(.Animaux)').fadeOut();
$('.M14_recept_tags.Animaux').fadeIn();
});
  $('a#Noir_Blanc').click(function(){
$('.M14_recept_tags:not(.Noir_Blanc)').fadeOut();
$('.M14_recept_tags.Noir_Blanc').fadeIn();
});
$('a#Flore').click(function(){
$('.M14_recept_tags:not(.Flore)').fadeOut();
$('.M14_recept_tags.Flore').fadeIn();
});
$('a#Macro').click(function(){
$('.M14_recept_tags:not(.Macro)').fadeOut();
$('.M14_recept_tags.Macro').fadeIn();
});
$('a#Urbex').click(function(){
$('.M14_recept_tags:not(.Urbex)').fadeOut();
$('.M14_recept_tags.Urbex').fadeIn();
});
$('a#Architecture').click(function(){
$('.M14_recept_tags:not(.Architecture)').fadeOut();
$('.M14_recept_tags.Architecture').fadeIn();
});
$('a#Sport').click(function(){
$('.M14_recept_tags:not(.Sport)').fadeOut();
$('.M14_recept_tags.Sport').fadeIn();
});
$('a#Inclassables').click(function(){
$('.M14_recept_tags:not(.Inclassables)').fadeOut();
$('.M14_recept_tags.Inclassables').fadeIn();
});
});
</script>
 
<script>
$(function(){
$.get('/tags/Paysages' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').text();
var vue=$(this).find('dl dd:eq(5)').text();

  $('.Paysages').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Panoramas' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Panoramas').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Portrait' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Portrait').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Instants_de_vie_et_rue' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Instants').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Studio' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Studio').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Petite_série' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Serie').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Nu__Charme' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Nu_charme').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Concerts_et_spectacles' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Concert').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Animaux' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Animaux').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Noir_et_Blanc' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Noir_Blanc').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Flore' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Flore').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Macro_et_Proxy' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Macro').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
  <script>
$(function(){
$.get('/tags/Urbex_Engins_et_véhicules' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Urbex').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Architecture_et_Graphisme' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Architecture').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Sport' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Sport').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>
<script>
$(function(){
$.get('/tags/Inclassables' , function(data){
$(data).find('.search.post.row1').each(function(){
var link=$(this).find('.postbody h2.h3 a[href^="/t"]').attr('href');
var text=$(this).find('.postbody h2.h3').text();
var img=$(this).find('.postbody img[alt^="Tag"]').attr('src');
var auteur=$(this).find('.author a[href^="/u"]').text();
var date=$(this).find('dl dd:eq(0)').text();
var fofotext=$(this).find('dl dd:eq(2) .postdetails').text();
var fofolink=$(this).find('dl dd:eq(2) .postdetails').attr('href');
var rep=$(this).find('dl dd:eq(4)').html();
var vue=$(this).find('dl dd:eq(5)').html();
$('.Inclassables').append('<div> <a href="'+link+'"class="M14_link" title="'+text+'">'+text+'</a><img src="'+img+'"class="M14_src"/><span class="M14_pseudo">Posté dans le forum <a href="'+fofolink+'"class="M14_linkfofo">'+fofotext+'</a> par: <strong>'+auteur+'</strong> '+date+' '+rep+' '+vue+'</span></div>');
});
});});
</script>

</body>

</html>

Comme dirait les jeunes, je la kif grave

Le contenu ne sera pas affiché pour les invités,
ils n'auront que le menu :
"Connectez vous ou enregistrez vous".

Hello Serge,
je pense avoir trouver la solution pour injecter directement
le tag lors d'une sélection d'un préfixe, mais le hic est toujours les mots composés.
Donc faire un choix en taguant normalement à l'aide de l'éditeur ou alors revoir les préfixes

Le script des préfixes modifié:

Code:

//Préfixes sur titres nouveaux sujets
var prefixes = ["Paysages","Panoramas","Portraits","Instants de vie et rue","Studio","Petite série","Nu /Charme","Concerts et spectacles","Animaux","Noir et Blanc","Flore","Macro et Proxy","Urbex Engins et véhicules","Architecture et Graphisme","Sport","Inclassables"];
        var _pm = false;
        var chk = false;
        function toMenu(a) {
          var htmlpre = '<select style="margin-right:5px" id="prefix" size="1"><option value="">Préfixe</option>';
          for (i in a)
          htmlpre += '<option value="' + a[i] + '">' + a[i] + '</option>';
          htmlpre += '</select>';
          return htmlpre;
        }
        function checkpre(ar, input) {
          for (i in ar) {
              var p = new RegExp("\\" + ar[i], "g");
              var title = input.substr(0, input.indexOf(']'));
              if (p.test(title)) return ar[i];
          }
          return "";
        }
        $(function () {
          if (_pm) chk = /\privmsg/.test(location.href);
          if (/\/post/.test(location.href)&&!$('form[name="post_ads"]').length || chk) {
              $(toMenu(prefixes)).insertBefore("input[name=subject][type=text]");
              var mw = $("#prefix").width() + 5;
              $("input[name=subject]").css("width", $("input[name=subject]").width() - mw);
              var t = $("[name=subject]").val();
              

              var cur = checkpre(prefixes, t);
              if (cur != "") {
                $("[value=" + cur + "]").attr("selected", "selected");
  
                $("input[name=subject]").val(t.replace('[' + cur + ']', '').trim());
              }
              $("input[name=post]").click(function () {
var texta=$('#text_editor_textarea').sceditor("instance").val();
var sub = $("input[name=subject]").val().trim();
if (sub != "" && $("#prefix").val() != "")
$("input[name=subject]").val("[" + $("#prefix").val() + "] " + sub);
var test=$("#prefix").val();
                if(test)
                {
$('#text_editor_textarea').sceditor("instance").val(''+texta+'"\n#'+test+'');
                }
              });
          }
        });


Avec le script suivant pour les préfixes en complétant les espaces vides par des _ ,
lors de l'envoi, le tag est fonctionnel:

Code:

//Préfixes sur titres nouveaux sujets
    var prefixes = ["Paysages","Panoramas","Portraits","Instants_de_vie_et_rue","Studio","Petite_série","Nu/Charme","Concerts_et_spectacles","Animaux","Noir_et_Blanc","Flore","Macro_et_Proxy","Urbex_Engins_et_véhicules","Architecture_et_Graphisme","Sport","Inclassables"];
            var _pm = false;
            var chk = false;
            function toMenu(a) {
              var htmlpre = '<select style="margin-right:5px" id="prefix" size="1"><option value="">Préfixe</option>';
              for (i in a)
              htmlpre += '<option value="' + a[i] + '">' + a[i] + '</option>';
              htmlpre += '</select>';
              return htmlpre;
            }
            function checkpre(ar, input) {
              for (i in ar) {
                  var p = new RegExp("\\" + ar[i], "g");
                  var title = input.substr(0, input.indexOf(']'));
                  if (p.test(title)) return ar[i];
              }
              return "";
            }
            $(function () {
              if (_pm) chk = /\privmsg/.test(location.href);
              if (/\/post/.test(location.href)&&!$('form[name="post_ads"]').length || chk) {
                  $(toMenu(prefixes)).insertBefore("input[name=subject][type=text]");
                  var mw = $("#prefix").width() + 5;
                  $("input[name=subject]").css("width", $("input[name=subject]").width() - mw);
                  var t = $("[name=subject]").val();
               

                  var cur = checkpre(prefixes, t);
                  if (cur != "") {
                    $("[value=" + cur + "]").attr("selected", "selected");
   
                    $("input[name=subject]").val(t.replace('[' + cur + ']', '').trim());
                  }
                  $("input[name=post]").click(function () {
    var texta=$('#text_editor_textarea').sceditor("instance").val();
    var sub = $("input[name=subject]").val().trim();
    if (sub != "" && $("#prefix").val() != "")
    $("input[name=subject]").val("[" + $("#prefix").val() + "] " + sub);
    var test=$("#prefix").val();
                    if(test)
                    {
    $('#text_editor_textarea').sceditor("instance").val(''+texta+'"\n#'+test+'');
                    }
                  });
              }
            });

Bonjour Philippe,

Quel joli cadeau dominical tu me fais là!
Je kiffe grave aussi ce développement :-)

Alors sur le html:
. sur mon fofo, j'ai plusieurs barre de navigation, et là il y en a une qui apparait de façon parasite, c'est l'id= "M14_navPerso". Elle serait à retirer.
. Le :hover se fait au clic et non au passage de la souris
. Sur la barre de navigation est ce que l 'on peu retirer Évènements Publications Newsletters Calendrier FAQ Membres Groupes Profil Rechercher Alerte membres, et avoir un hover blanc au passage de la souris.

Sur le JS préfixe:
. Les tags sont bien mis en fin de message posté, (c'est magique ça).
Par contre sur les tags avec des mots composés les _ entre les mots ne sont pas ajoutés.
Alors si trop compliqué à faire dans le script, ils pourraient être mis directement dans la liste des préfixes dans la page html.

Voila Phil suite à mes premiers essais.
Les scripts et html sont installés sur mon fofo.
J'ai crée un bouton (cinquième) dans ma barre de navigation "Sujets par thème" pour lancer le html.

Merci pour tout ça Phil.

Hello Phil,

Nos messages se sont croisé pour le JS.
Je teste et je reviens vers toi.



Edit:
J'ai pris ton dernier JS, et ça me semble OK

Re Serge,
à cette heure, je n'ai plus beaucoup de temps.

Je viens de corriger l'essentiel, c'est à dire le bug concernant la deuxième barre présente sur ton fofo, le script le prend désormais en compte.

Les liens non autorisé sont masqués dans la feuille de style:

Code:

.recep_Nav_bar li:nth-child(7),.recep_Nav_bar li:nth-child(8),.recep_Nav_bar li:nth-child(9),
.recep_Nav_bar li:nth-child(10),.recep_Nav_bar li:nth-child(11),.recep_Nav_bar li:nth-child(12),
.recep_Nav_bar li:nth-child(13),.recep_Nav_bar li:nth-child(14),.recep_Nav_bar li:nth-child(16),.recep_Nav_bar li:nth-child(17)
          {display:none;}

Ensuite ,on peut laisser la sélection sur le bouton cliqué non et ajouter ce style(effectue dans la feuille de style)

Code:

.M14_linkNAV:not(selected):hover{background-color:#72363D;color:white;}

Ensuite l'avantage de mettre des _ dans le script des préfixes et que tu auras toujours le même résultat sur les tags de la page html ci-dessus.

Tout est parfait Philippe. T'est génial!

Un grand merci pour tout l'ami

De rien Serge,