*RESOLU* [PHPBB3] Vignette dans Derniers sujets

Voir le sujet précédent Voir le sujet suivant Aller en bas

photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Bonjour,

Encore une demande folle. Mais j'ai des choses incroyables qui ont déjà été réalisées ici côté miniatures, alors je tente yeux charmeurs

Serait-il possible dans le widget derniers sujets de faire en sorte que lorsque que l'on passe la souris sur le titre du sujet, apparaisse une miniature de la première photo postée lorsqu'il y en a une, et au clic aller au message comme actuellement ?

Là encore, si trop compliqué, direction la poubelle filevite


Dernière édition par photoclic le Mer 6 Sep 2017 - 11:05, édité 2 fois
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Serge,
hum ta demande me semble bien compliquée a réaliser mon ami car il faut trouver le lien du sujet et choper la première image (si il y en a une bien sûr).



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Hello Philippe,

En revoyant ma page d’accueil, si plus simple de faire cela au niveau du dernier message au lieu du dernier sujet, cela m'irait aussi Phil.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Tu peux tester ce script en cochant juste sur l'index Serge.

J'ai gardé les class des images afin d'avoir le même résultat d'une de tes demandes précédentes:

Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur l'index
Déposes ceci:
Code:
$(function(){   
$('dd.lastpost a[href^="/t"]:not(.last-post-icon)').after('<span style="margin-left: 5px;" class="M14_LoaD_ToPiCs">
<img src="https://i11.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;margin-top:32px;"/></span>');
$('.M14_LoaD_ToPiCs').each(function () {
var M14_LoaD_ToPiCsLinK=$(this).prev().attr('href');
$(this).attr('href',M14_LoaD_ToPiCsLinK);
var url = this.previousSibling.href;
$(this).load(url + ' .content:first div:first img:not([longdesc]):first');
});
});

Penses a cliquer sur le bouton Valider



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
T'es un génie Phil, c'est encore mieux que ce que j'avais en tête.
Je n'imaginais pas afficher l'image au départ, mais au survol avec la souris. là c'est le top du top.

Un très, très, très grand merci l'ami  tape la


Si t'arrives un jour à faire dans les derniers sujets, ne serait-ce qu'au survol je prendrais.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
De rien Serge et merci pour le génie mdr



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
@photoclic

mdr
Alors pour les widgets Serge  hinhin  ,


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur toutes les pages.

Déposes ceci:
Code:
$(function(){  
  $('.M14_lastTopIcSLoad a[href^="/t"]').after('<span style="display:none;position:absolute;margin-left: 5px;" class="M14_LoaD_ToPiCs">
    <img src="https://i11.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;margin-top:32px;"/></span>');
    $('.M14_LoaD_ToPiCs').each(function () {
    var M14_LoaD_ToPiCsLinK=$(this).prev().attr('href');
    $(this).attr('href',M14_LoaD_ToPiCsLinK);
    var url = this.previousSibling.href;
    $(this).load(url + ' .content:first div:first img:not([longdesc]):first');
    });
  $('.M14_lastTopIcSLoad a[href^="/t"]').hover(function(){
    $(this).next().fadeToggle();});
    });

Penses a cliquer sur le bouton Valider

Ensuite on va donner une class au module des sujets récents:

Dans le template mod_recent_topics:
Affichage/Templates/Portail/mod_recent_topics

Recherches cette première ligne:
Code:
<div class="module">

Supprimes et remplaces par:

Code:
<div class="module M14_lastTopIcSLoad">


Pensez à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout


hinhin



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Oula Philippe, je découvre ça à l'instant. Vraiment content

Je doit m'absenter 2h. J'essaie ça juste après. J'ai hâte de voir le résultat.
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Quand je disais que t'étais un génie Phil, ça se confirme  impeccable

C'était quasiment tout bon, il y avait juste de petits conflits dans le style:
.La vignette au hover se présentait tantôt à un endroit, puis à un autre endroit.
.L'animation au survol avait un comportement bizarre, ça s'affichait en plus grand puis ça disparaissait.  Pas grave car l'animation ici n'était pas nécessaire et surchargeait.

Pour régler ça Phil, j'ai changé le nom de la class pour avoir un css particulier ici et ne pas utiliser l'animation au survol.

C'est donc tout bon l'ami. Un énorme Merci encore  tape la




Je viens par contre de découvrir un bug avec les miniatures dans la colonne derniers messages. Quand il y a un nouveau message posté, la miniature apparait 2 fois.
Là on voit la première miniature et un bout de la deuxième:
Spoiler:



Après de longues recherches, cela semble venir d'un conflit avec ce JS qu me sert à coloriser le fond quand un nouveau message est posté et ton premier script en haut:

Code:

$(function() {
   $('dl.icon[style*="http://i68.servimg.com/u/f68/15/47/64/73/averti10.png"]').addClass('newpost');
   $('dl.icon[style*="http://i84.servimg.com/u/f84/15/47/64/73/i_fold12.gif"]').addClass('newpost');    
        });

Y a t-il une solution pour éviter cela?

Désolé de te solliciter à nouveau.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Serge,

pour les widgets , il faut mettre une position absolute au span et donc revoir la structure de la css, donc si tu ne veux plus d'effet il faut supprimer la transition sur la nouvelle class créée.
Supprimes ceci:
Code:
,.M14_LoaD_ToPiCsW img

ici:

Code:
   /*Les images dans les 3 conteneurs*/
    .M14_LoaD_ToPiCs img,.M14_LoaD_ToPiCsA img,.M14_LoaD_ToPiCsW img
    {
    height:58px;
    -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;
    }

Le script modifié:
Code:
//Miniatures dans widget Derniers sujets
$(function(){  
  $('.M14_lastTopIcSLoad a[href^="/t"]').before('<span class="M14_LoaD_ToPiCsW">
    <img src="https://i11.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;"/></span>');
    $('.M14_LoaD_ToPiCsW').each(function () {
    var M14_LoaD_ToPiCsLinK=$(this).next().attr('href');
    $(this).attr('href',M14_LoaD_ToPiCsLinK);
    var url = this.nextSibling.href;
    $(this).load(url + ' .content:first div:first img:not([longdesc]):first');
    });
    $('.M14_lastTopIcSLoad a[href^="/t"]').hover(function(){
    $(this).prev().fadeToggle();});
    });

La c.s.s:
Code:
.M14_LoaD_ToPiCsW img{height: 50px;width: 50px;}
.M14_LoaD_ToPiCsW
{
height: 50px;
margin-top: -60px;
position: absolute;
margin-left:75px;
width: 50px;
display:none;
}

Il est impératif de mettre une largeur identique à sa hauteur Serge.

Pour le script sur l'index, il faut le corriger ainsi Serge:
Code:
$(function(){   
$('dd.lastpost').each(function(){
$(this).find('a[href^="/t"]:first').after('<span style="margin-left: 5px;" class="M14_LoaD_ToPiCs">
<img src="https://i11.servimg.com/u/f11/11/26/21/37/loadin13.gif"style="width:16px !important;height:16px !important;margin-top:32px;"/></span>');

$('.M14_LoaD_ToPiCs').each(function () {
var M14_LoaD_ToPiCsLinK=$(this).prev().attr('href');
$(this).attr('href',M14_LoaD_ToPiCsLinK);
var url = this.previousSibling.href;
$(this).load(url + ' .content:first div:first img:not([longdesc]):first');
});
});});




-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Bonjour Philippe et merci pour ces corrections.

. Pour le widget, j'ai modifié le CSS pour ne pas avoir la transition sur la nouvelle class et remplacé le JS.
Par contre, j'ai retiré le width pour ne pas déformer l'image et ajouté un float:right pour l'avoir à droite. ça semble bien fonctionner.

. J'ai corrigé le script sur l'index. Je n'ai plus de conflit et plus d'image en double super

ça me parait tout bon l'ami. Merci encore pour tout.

Je passe donc en résolu, à moins que tu ne trouves une bêtise.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hum , l'effet sur ton fofo n'est vraiment pas joli Serge,
comme je te le soulignais il faut une position absolute et non un float...
Mais c'est ton souhait mon ami clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Avec la postion absolute Phil l'image se mettait vers le centre.
Je referais des essais en reprenant aussi la position de l'image.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Pas de soucis Serge ,c'est ton fofo clin oeil

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum