[PHPBB3] Ajouter un nombre de photos, encore

Hello Serge,

hum, de mémoire, tu as oublié la balise ajouté dans le template.
Bref, j'ai trouvé.
Par contre on part avec le script d'un load qui va se transformer en requête Serge.

Bonsoir philippe

Ah oui, me souvenais plus pour le templste désolé.

Le soucis avec ta demande est que tu auras le nombre de photos mais si le premier message ne contient pas de photo, on aura tout de même le nombre qui va s'afficher dans le cas ou le deuxième ou autre contient une photo Serge!!!!!

Pas grave ça Philippe, s'il ne s'agit pas de smiley.

Merci Phil pour la prise en compte de cette demande

Les Smileys ne seront pas prit en compte Serge.
Sur ton fofo, tu as de toutes façons des photos sur les premiers messages?

Tu ne préfères pas avoir seulement si on a une photo sur le premier message que l'on affiche le nombre de photos présentes sur le sujet sur la page en cours ?

Oui Philippe, sur les forums concernés par le script, il y a toujours au moins une photo dans le 1ier message.

Tu ne préfères pas avoir seulement si on a une photo sur le premier message que l'on affiche le nombre de photos présentes sur le sujet sur la page en cours ?

Donc pas la peine de vérifier Phil.

Ok merci, je te fais tout çà demain matin,
enfin c'est déjà dans le clavier mais il faut que je corrige 2/3 bricoles.

Un grand merci Phil.
Rien ne presse.

Passe une bonne soirée.

Hello Serge,
alors ce script va rechercher le nombre de photos présentes sur la page en cours et afficher si:
il trouve une photo, le texte au singulier et au delà , il passera au pluriel.

Il faut contrairement a ce que tu mentionnais ici:
https://www.milouze14.com/t32519-phpbb3-ajouter-un-nombre-de-photos-encore#619273

Photoclic a écrit:Oui Philippe, sur les forums concernés par le script, il y a toujours au moins une photo dans le 1ier message.

Je n'ai pas eut à trop chercher pour trouver sur la deuxième page:
Sur ce sujet:Photo gagnante semaine 6 et 7

https://photoclic.forum-pro.fr/f16p30-photos-gagnantes

Qu'il n'y a pas de photo sur le premier message.
Il faut donc mettre une condition pour être crédible.

Voilà pourquoi, j'ai ajouté une image dans le cas ou il n'y aurait de photo dans le premier message.

L'image en question qui sera redimensionnée automatiquement.




Cette dernière sera a modifier éventuellement dans le script ici:

Code:

  //LE LIEN DE L IMAGE EN CAS OUI IL N Y AURAIT PAS DE PHOTO SUR LE PREMIER MESSAGE
var no_img="https://i.servimg.com/u/f20/20/11/87/27/serge10.png";  

Ce qui donne en visu:




Donc, je récapitule:

Si on a une photo dans le premier message,
le script l'affichera la photo sur la liste des sujets.
Ensuite il comptera le nombre de photos présentes sur les messages de la page en cours et l'affichera sous la photo dans la liste des sujets.

Si, il ne trouve pas de photo dans le premier message alors on affiche la photo par défaut:

https://i.servimg.com/u/f20/20/11/87/27/serge10.png

Mais affichera le nombre de photo(s) présentes dans les messages (hors premier) de la page en cours.En respectant le singulier du pluriel.

J'ai juste ajouté ceci dans la feuille de style:

Code:

.M14_resultNumber
{
position:relative;
height: 12px;
line-height:12px;
font-size:9px;
margin-top: -12px;
background-color:black;
color:white;
text-align: center;
}

Le script:

Code:



//Aperçu des miniatures sur forums C2 Les photos du clic et photos gagnantes  
$(function(){          
if($('a.nav[href^="/c2-"],a.nav[href^="/f16-"]').length) {
   //LE LIEN DE L IMAGE EN CAS OUI IL N Y AURAIT PAS DE PHOTO SUR LE PREMIER MESSAGE
var no_img="https://i.servimg.com/u/f20/20/11/87/27/serge10.png";  
$('dl.icon[style*="https://i.servimg.com/u/f31/19/32/37/01/icon_t30.png"]').closest('div.forumbg').addClass('M14_Annonc');
$('div.forumbg:not(.M14_Annonc) .M14_LoaD_ToPiCsConT').after('<a href="#" style="margin-left: 5px;" class="M14_LoaD_ToPiCs">Patientez....
<img src="https://i.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;margin-top:10px;"/></a>');
$('.M14_LoaD_ToPiCs').each(function () {var url = this.previousSibling.href;var $this=$(this);$.get(url, function(data){
var numberpictures=$(data).find('.content div:not(.M14_reception_photos) img:not([longdesc])').length;
var img=$(data).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc]):first').attr('src');
var imgfirst=$(data).find('.content:first div:not(.M14_reception_photos):first img:not([longdesc]):first').length;
if((imgfirst==1)&&(numberpictures<2))
{
$this.attr('href',url).html('<img src="'+img+'" title="'+numberpictures+' photo "/><div class="M14_resultNumber">'+numberpictures+' photo</div>');
}
else if((imgfirst==1)&&(numberpictures>1))
{
$this.attr('href',url).html('<img src="'+img+'" title="'+numberpictures+' photos "/><div class="M14_resultNumber">'+numberpictures+' photos</div>');
}
 
if((imgfirst==0)&&(numberpictures<2))
{
$this.attr('href',url).html('<img src="'+no_img+'" title="Aucune première photo trouvée"/><div class="M14_resultNumber">'+numberpictures+' photo</div>');
}
if((imgfirst==0)&&(numberpictures>1))
{
$this.attr('href',url).html('<img src="'+no_img+'" title="Aucune première photo trouvée"/><div class="M14_resultNumber">'+numberpictures+' photos</div>');
}
});});};});









Le petit plus est l'ajout d'une infobulle au survol de la photo et au clic sur cette dernière, emmènera vers le sujet.

Bonjour Philippe,

Superbe travail encore, ça marche au poil  
Et c'est en place.

Une question sur le script pour ma gouverne, quand il n'y a pas de photos, tu vérifise aussi le pluriel. Or s'il n'y a pas de photos, c'est nécessairement <1. Je me trompe?


Il y avait aussi la haut un petit plus éventuel:

photoclic a écrit:....
Ou, pour aller plus loin, à la place du changement de taille de la miniature au passage de la souris, présenter l'une à coté de l'autre les miniatures:

Spoiler:

J'ai comme l'impression qu'il ne manque pas grand chose pour réaliser cela.

Si trop compliqué, pas grave Phil.
C'est déjà génial ce que tu m'as fait. Un grand merci l'ami.

Re Serge,

Une question sur le script pour ma gouverne, quand il n'y a pas de photos, tu vérifies aussi le pluriel. Or s'il n'y a pas de photos, c'est nécessairement <1. Je me trompe?

Tu peux surement parler de cette partie du script:

Code:


if((imgfirst==0)&&(numberpictures<2))
if((imgfirst==0)&&(numberpictures>1))


Veut dire dans l'ordre affiché:
si pas de photo dans le premier message et que l'on a moins de 2 photo alors singulier
si pas de photo dans le premier message et que l'on a plus d'une photo alors pluriel.
Pour cette demande:

Ou, pour aller plus loin, à la place du changement de taille de la miniature au passage de la souris, présenter l'une à coté de l'autre les miniatures:

Cela oblige a revoir tout le script et on serait obligé de faire encore plus de requêtes Serge.

Voilà pourquoi j'ai abandonné ce projet.

Re Phil,

Oui, je parlais bien de cette partie du script
Merci pour les explications
Dans mon esprit, quand il n'y avait pas de photos dans le 1ier message, on affichait systématiquement 0 photo.

Ah mince, laisse tomber s'il faut reprendre tout le script.
Je pensais cela plus simple car j'avais essayé de retirer sur le script de base les :first et cela m'affichait les miniatures des photos présentes les une au dessous des autres, et je pensais qu'il suffisait de modifier le css pour les avoir les unes à cotés des autres.

Surment pas la même histoire sur ton nouveau script, pas grave Phil.

Re Serge, je regarde dans la soirée pour l'adapter afin d'afficher les photos présentes hors premier message.

Merci Philippe.

Si trop complexe, pas grave l'ami, ce que tu as fait est déjà une belle avancée.

Et si tu les souhaites, dans l'infobulle, ajouter l'auteur en plus du nombre de photos.

Re Serge,
le soucis rencontré est le suivant, c'est la première photo, ensuite je ne pense pas que cela soit compliqué a mettre en place pour le pseudo.
Est-ce gênant d'avoir toutes les photos présentes dans la première page sur tous les message sans prend en compte la première ?
Il faudra par contre supprimer le survol des photos comme tu l'avais mentionné.

Si j'ai bien compris ce que tu décrits:

. Pas de prise en compte de la première: si les suivantes, quand il y en a, sont affichées à droite de la première, on les auras donc toutes sur une ligne, donc ce serait bon.

. Plus de survol qui faisait le scale: pas gênant.
Au survol, on aurait donc à côté de la 1iere les autre photos?

Est-ce bien cela Phil?

Hum,
tu veux qu'au survol de la première que l'on affiche les autres photos Serge?
En fait, je vais rechercher toutes les photos de tous les messages,ensuite avec cette pratique, l'ordre ne sera peut être pas respecté.
Exemple, la première photo peut se retrouver en fin de liste..

Oui, j'imaginais cela au survol comme présenté sur l'image en haut dans le spoiler.

L'ordre, n'est pas vraiment gênant si ce sont bien les miniatures du post concerné ;-)

photoclic a écrit:
Oui, j'imaginais cela au survol comme présenté sur l'image en haut dans le spoiler.

L'ordre, n'est pas vraiment gênant si ce sont bien les miniatures du post concerné ;-)

Je vais tâcher de faire de mon mieux Serge

Merci Philippe,

Déjà bien sympa de t'y coller

Hello Serge,
alors voici les nouvelles, afin d'avoir un rendu idéal, je me suis tracassé la tête pour trouver une solution et la seule qui ait retenu ma satisfaction est celle-ci.

En fait on va rechercher des images (hors Smiley) et on l'importe dans la partie initiale, c'est a dire dans une partie limité en largeur et provoque des erreurs sur l'affichage des photos sur le retour ainsi que les titres du sujets , auteur décalage etc etc...

Bref,je me suis donc dit, pourquoi pas insérer la div recevant les photos en dessous de la balise li.


Ce qui donne ceci:



Pour cette nouvelle mouture, on laisse l'ajout dans le template, c'est à dire ceci:

Code:

<a class="M14_LoaD_ToPiCsConT" href="{topics_list_box.row.U_VIEW_TOPIC}"></a>

Ensuite toute la c.s.s a été revue.

Je t'explique le fonctionnement.

Lorsque le script trouve une photo dans tous les messages de la page en cours.

On l'affiche avec au survol le pseudo du membre qui posté la photo.
Ensuite:

Pour une photo, on ne trouve pas de bouton pour afficher/masquer la suite:



Au delà d'une photo,
on affiche la première et on masque le reste.



Et au clic:



La div aura ses limites en largeur donc on ajoute un overflow auto afin de palier à ce soucis.

Puis la fermeture:



La C.S.S de base,je te conseille l'autre style qui masque cette div et au survol avec une transition le bloc s'affichera.

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


.M14_resultNumber
{
background-color: #2e2e2e;
color:#69e9fa;
display: inline-block;
font-size: 9px;
height: 12px;
line-height: 12px;
margin-left: 3px;
position: absolute;
text-align:right;
width: 80px;
}


/*Les conteneur dans la liste sujets SF et dans derniers messages*/
.M14_LoaD_ToPiCs
{
height: 80px;
overflow-y:auto;  
overflow: hidden;
left: 10px;
position: relative;
width: 95%;
}

/*Les images*/
.M14_PhotOs
{
height:80px;
max-width:80px;
margin:0px 3px;
object-fit: cover;
z-index: 10;
 
}
.M14_Open_GetPhotos,.M14_Close_GetPhotos
{
display:none;
position: absolute;
width: 12px;
height: 12px;
z-index:999;
cursor:pointer;
}
.M14_Open_GetPhotos img,.M14_Close_GetPhotos img{width:12px;height:12px;}
 


Penser a cliquer sur le bouton


Ou cette C.S.S qui masque la div et au survol de la balise li, cette dernière s'affichera:

Code:


.M14_resultNumber
{
background-color: #2e2e2e;
color:#69e9fa;
display: inline-block;
font-size: 9px;
height: 12px;
line-height: 12px;
margin-left: 3px;
position: absolute;
text-align:right;
width: 80px;
}


/*Les conteneur dans la liste sujets SF et dans derniers messages*/
.M14_LoaD_ToPiCs
{
height:0px;
overflow-y:auto;  
overflow: hidden;
left: 10px;
position: relative;
width: 95%;
opacity:0;
  -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;
}
ul.topiclist.topics li:hover .M14_LoaD_ToPiCs
{
opacity:1;
height: 80px;
 
}

/*Les images*/
.M14_PhotOs
{
height:80px;
max-width:80px;
margin:0px 3px;
object-fit: cover;
z-index: 10;
 
}
.M14_Open_GetPhotos,.M14_Close_GetPhotos
{
display:none;
position: absolute;
width: 12px;
height: 12px;
z-index:999;
cursor:pointer;
}
.M14_Open_GetPhotos img,.M14_Close_GetPhotos img{width:12px;height:12px;}
 


Puis le script:

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur les sous-forums


Déposer ceci:

Code:


//Aperçu des miniatures sur forums C2 Les photos du clic et photos gagnantes  
$(function(){          
if($('a.nav[href^="/c2-"],a.nav[href^="/f16-"]').length) {
$('dl.icon[style*="https://i.servimg.com/u/f31/19/32/37/01/icon_t30.png"]').closest('div.forumbg').addClass('M14_Annonc');
  $('div.forumbg:not(.M14_Annonc) li:not(.header) dl ').after('<div class="M14_LoaD_ToPiCs"><span class="M14_Open_GetPhotos" title="Afficher la suite..."><img src="https://i.servimg.com/u/f20/20/11/87/27/button13.png"/></span><span class="M14_Close_GetPhotos" title="Fermer"><img src="https://i.servimg.com/u/f20/20/11/87/27/button12.png"/></span><div></div></div>');
$('.M14_LoaD_ToPiCs ').each(function(){
var url = $(this).closest('li').find('a.M14_LoaD_ToPiCsConT').attr('href');
var $this=$(this);
$.get(url, function(data){
var numberpictures=$(data).find('.content div:not(.M14_reception_photos) img:not([longdesc])').length;
$(data).find('div[class*="post--"] ').find('.content div:not(.M14_reception_photos) img:not([longdesc])').each(function(){
var img=$(this).attr('src');
var auteur=$(this).closest('.postbody').find('p.author strong').text();
if(img)
{
$this.find('div').append('<img class="M14_PhotOs"src="'+img+'" title="Posté par '+auteur+'"/>');
}
if(numberpictures>1)
{
$this.find('.M14_Open_GetPhotos').show();
$this.find('img.M14_PhotOs:eq(0)').addClass('one');
$this.find('.M14_Close_GetPhotos').click(function(){
$(this).hide();$(this).prev().show();
$(this).closest('div').find('.M14_PhotOs:not(.one)').fadeOut();
});  
$this.find('.M14_Open_GetPhotos').click(function(){
$(this).hide();$(this).next().show();
$(this).closest('div').find('.M14_PhotOs:not(.one)').fadeIn();});
}


$this.find('div').find('img:eq(0)').nextAll().hide();

});
  
$this.find('img.M14_PhotOs:eq(0)').before('<span class="M14_resultNumber">'+numberpictures+' photo(s)</span>');
});
});



};
});


Penser a cliquer sur le bouton

Je regarde pour ajouter un autre style afin de laisser apparaitre seulement au survol le bloc de photos et masquer le reste.

Bonjour Philippe

Quel plaisir à chaque fois de découvrir tes scripts.
Et à chaque fois un rêve qui se réalise.
Un grand merci Philippe pour ce travail.

J'ai fait un essai rapide car pas devant mon ordi et regarderai tout de plus près en fin d'après midi.

Mes remarques rapides:
. Je préfère que l'on voit la 1ière photo quand on arrive sur la liste des sujets. et que:
- soit comme tu as fait on fait apparaitre les autres avec le bouton d'ouverture,
- soit les autres apparaissent au survol de la 1ière.

. L'auteur n'apparait pas sur toutes les photos. On dirait qu'il n'apparait que si l'auteur est le membre connecté, sinon on a posté par et rien ensuite.

Je fait d'autres essais et reviens donc plus tard.

Re Serge,

Mes remarques rapides:
. Je préfère que l'on voit la 1ière photo quand on arrive sur la liste des sujets. et que soit comme tu as fait on fait apparaitre les autres avec le bouton d'ouverture, soit les autres apparaissent au survol de la 1ière.
. L'auteur n'apparait pas sur toutes les photos. On dirait qu'il n'apparait que si l'auteur est le membre connecté, sinon on a posté par et rien ensuite.

La première photo s'affiche Serge.
Les autres photos s'affiche en cliquant sur le bouton prévu à cet effet (si il y plus d'une photo sinon, il ne s'affiche pas).

Au survol, c'est trop contraignant Serge.

Hum, tu n'as pas le membre qui s'affiche dans les messages ici:



Tu as testé sur ton fofo de tests ?

Comme j'avais les ids sur ton fofo de tests, je me suis permis de modifier le script pour les auteurs:

Code:

   var auteur=$(this).closest('.postbody').find('p.author a[href^="/u"]').text();

Au lieu de:

Code:

var auteur=$(this).closest('.postbody').find('p.author strong').text();