Aperçu des topics avant de cliquer dessus

[orpheus]

Bonsoir à tous ! ^^

Voila, j'ai remarqué sur des forums n'étant pas hébergé chez Forumactif qu'ils disposaient d'une fonction fort sympathique permettant d'avoir un aperçu du topic en passant la souris sur le titre.

Voir l'exemple:

La capture a volontairement été flouté car les rubriques étant réservé aux membres, ils ont peut-être pas envie que leur contenu soit étalé mais c'est pour vous donner un exemple de ce que je souhaiterai faire.

Pensez-vous qu'il soit possible d'obtenir quelque chose de similaire et si oui comment ?
Je vous remercie d'avance.

Ps : c'est normal que lorsque j'ai ouvert le sujet, j'ai pas eu le formulaire classique pour les problèmes à remplir ?

[Neptunia]

Coucou ^^


Moi si je clique sur Nouveau, j'ai bien le formulaire.

Voila, j'ai remarqué sur des forums n'étant pas hébergé chez Forumactif qu'ils disposaient d'une fonction fort sympathique permettant d'avoir un aperçu du topic en passant la souris sur le titre.

Moi j'ai vu un truc similaire sur un forum hébergé par Forumactif

Il faut cliquer sur la loupe à droite du titre pour avoir un aperçu du premier message du sujet. J'ai aussi vu le même système au survol de la loupe.

Tu veux quelle version ?

[*Splash*]

Hi orpheus,
Chez phpBB l'extension s'appelle "Topic preview" > Clique

Lien GitHub ici > Clique

Je ne sais pas si cela existe chez FA

[orpheus]

@Neptunia, est-ce qu'à ton avis il est possible de se passer de la loupe pour avoir la fonction ? Car dans la mesure du possible, j'aurais aimé éviter d'installer une loupe ou autre image à côté des topics mais à choisir si j'aurais du faire un choix, j'aurais préféré celui ou on survol sans besoin de cliquer ^^

@Splash : Ah ben voila, l'option Topic Preview est pile poil ce que je recherche
Il serait intéressant de savoir si ça existe chez Forumactif.

[Neptunia]

Bon, j'ai eu un mal de chien à faire fonctionner le script en phpBB2. La faute au menu Rechercher


Le script d'origine :
Add a preview button for topics

D'origine, ça affiche une image et ça fonctionne comme chez moi (au clic). Ca parle angliche. Et surtout ça ne fonctionne pas sur phpBB2.

Une version corrigée par mes soins, en français, fonctionnant sous phpBB2 et se déclenchant au survol de l'image.

Code:

$(function(){
          var isPunbb = '';
          if ($('.pun').length) var isPunbb = 'class="pun"';
          $('a.topictitle').after('&nbsp;<img id="topicPreview" src="http://www.s-id.fr/_layouts/images/sid/loupe.png" title="Aperçu du sujet" alt="Aperçu du premier message" style="cursor:pointer;"/>');
          $('img#topicPreview').mouseover(function() {
            $('body').append('<div id="preview-filter" style="position:fixed;left:0;right:0;top:0;bottom:0;background:url(https://i.servimg.com/u/f39/18/21/41/30/overla10.png);cursor:pointer;z-index:10;"></div><div id="topicPreview-container" '+isPunbb+' style="width:auto;top:10%;left:25%;right:25%;padding:4px;position:fixed;z-index:50;background:#EEE;border:1px solid #CCC;border-radius:5px;"><div id="topicPreviewing" style="max-height:400px;overflow-y:auto;"><center><span class="topicPreview-loading" style="font-weight:bold;font-size:18px;">Chargement en cours...</span></center></div></div>');
            $('#topicPreviewing').load($(this).siblings('a.topictitle').attr('href')+' .post:eq(1)');
            $('#preview-filter').click(function(){$('#preview-filter, #topicPreview-container').remove()});
          });
        });

- A la ligne 5 j'ai remplacé .click() par .mouseover() pour déclencher l'aperçu au survol et non au clic.
- A la ligne 7 j'ai remplacé .post:eq(0) qui correspond à la case du menu Rechercher par .post:eq(1) qui correspond au premier message.

Initialement j'avais installé une version survol, maisje suis très vite revenue au mode clic suite au déclenchement accidentel de l'aperçu contre ma volonté.

---

En théorie, il est possible de se passer d'image et utiliser le titre du sujet comme déclencheur mais :
- Je n'y suis pas arrivée. Le déclenchement de l'aperçu est bien pris en compte mais la fenêtre d'aperçu reste vide. Sans doute corrigeable par quelqu'un d'un peu plus doué que moi.
- Si le titre du sujet déclenche l'aperçu, vaudrait mieux bien viser du premier coup si on veut pas lancer l'aperçu du sujet précédent ou suivant et figer l'affichage tant qu'on n'a pas fermé l'aperçu non souhaité. En gros le truc qui m'avait saoulée à la puissance 50.
- Si le titre du sujet déclenche l'aperçu, ça va fausser toutes les stats de vues puisque chaque sujet sera comptabilisé deux fois (une fois au survol, l'autre au clic) -> Voir par exemple ce sujet Compteur de vues qui s'incrémente anormalement

[orpheus]

Tout d'abord, je te remercie Neptunia pour le codage revu par tes soins, j'apprécie ton aide

Je viens de tester la fonction sur un forum, le script fonctionne bien (j'ai même réussi à réduire la taille de la loupe histoire qu'elle soit moins voyante ) mais est-ce qu'il y a pas moyen de faire en sorte que l'aperçu disparaisse tout seul une fois qu'on éloigne la souris de la loupe ?
Car actuellement, je suis obligé de cliquer dans le vide pour faire disparaître l'aperçu, ce que je trouve assez contraignant.

Et sinon, admettons que je souhaite faire comme sur ton forum avec la version cliquable si j'ai bien compris, il suffit d'utiliser le code anglais ?

[*Splash*]

Et sinon, admettons que je souhaite faire comme sur ton forum avec la version cliquable si j'ai bien compris, il suffit d'utiliser le code anglais ?

Tu n'as pas tout lu dans les explications données :

- A la ligne 5 j'ai remplacé .click() par .mouseover() pour déclencher l'aperçu au survol et non au clic.
- A la ligne 7 j'ai remplacé .post:eq(0) qui correspond à la case du menu Rechercher par .post:eq(1) qui correspond au premier message.

[orpheus]

Ah si je l'avais lu mais moi et le codage ça fait vraiment 2, du coup je voulais être sur pour éviter de faire une bêtise

[*Splash*]

Par contre en mode hors ligne le script ne fonctionne plus

[Neptunia]

Si tu veux revenir au fonctionnement initial il suffit de remplacer .mouseover par .click (à la ligne 5) et éviter de reprendre le script anglais (ne fonctionnant pas sur phpBB2.

Pour l'image, suffit d'en insérer une plus discrète à la ligne 4. D'ailleurs l'image initiale est un modèle de discrétion -> <-
Attention quand c'est trop discret, bah ça n'est utile qu'au fondateur !

Car actuellement, je suis obligé de cliquer dans le vide pour faire disparaître l'aperçu, ce que je trouve assez contraignant.

L'ennui c'est que la div preview-filter occupe tout l'écran, donc pas possible de décréter que si on s'éloigne de l'image, l'aperçu doit fermer puisque l'image est recouverte soit par preview-filter soit par l'aperçu lui-même.

Si c'est possible, ça dépasse mes compétences.

En revanche suis arrivée à autre chose. Si à la ligne 8 je remplace .click par .mouseout l'aperçu se fermera dès qu'on le survolera, ce qui empêche malheureusement de faire défiler si le contenu dépasse 400px de hauteur.

J'ai aussi obtenu autre chose en remplaçant la ligne 8 par :

Code:

           $('#topicPreviewing').mouseout(function(){$('#preview-filter, #topicPreview-container').remove()});

En théorie ça permet de survoler l'encadré de l'aperçu qui se fermera dès que le curseur est en dehors de l'aperçu. Dans la pratique, une fois sur deux l'aperçu se referme alors que le curseur est toujours dessus (aucune idée du pourquoi)

---

Autre possibilité, changer la zone d'action de l'aperçu. Par défaut c'est le message complet avec le profil et les boutons d'action. Pratique si on veut modérer rapidement. Dangereux si l'icône de suppression peut être confondue avec une icône de fermeture de l'aperçu. Ca m'est arrivé sur un fofo test et heureusement que j'ai eu une demande de confirmation.
Sur mon forum j'ai préféré ne garder que le corps du message. J'étais même parvenue sur un fofo test à ne conserver que les images du premier message.

---

Par contre en mode hors ligne le script ne fonctionne plus

Bizarre ! Je viens de vérifier à la fois sur mon forum principal (PunBB) et un fofo test en phpBB2. Ca fonctionne que je sois connectée ou non
A moins d'avoir testé sur un phpBB2 où la recherche est désactivée pour les invités. Dans ce cas en mode connecté l'aperçu montre le premier message, et le second en mode déconnecté (à supposer qu'il y ait un second message)

[*Splash*]

A moins d'avoir testé sur un phpBB2 où la recherche est désactivée pour les invités.

Le problème venait exactement de là

[orpheus]

En théorie ça permet de survoler l'encadré de l'aperçu qui se fermera dès que le curseur est en dehors de l'aperçu. Dans la pratique, une fois sur deux l'aperçu se referme alors que le curseur est toujours dessus (aucune idée du pourquoi)

Je viens d'essayer les modifications que tu proposes et j'obtient un autre résultat :
J'ai beau éloigné mon curseur de la loupe, l'aperçu semble rester ouvert et disparaît à son bon vouloir, le curseur sur mon écran prend dès lors a forme d'une main.

Je laisse l'adresse du forum qui me sert de test si dès fois le problème ne viendrait pas d'un script ou autres présent dessus :
http://rangersfrance.forumactif.org

Autre possibilité, changer la zone d'action de l'aperçu. Par défaut c'est le message complet avec le profil et les boutons d'action. Pratique si on veut modérer rapidement. Dangereux si l'icône de suppression peut être confondue avec une icône de fermeture de l'aperçu. Ca m'est arrivé sur un fofo test et heureusement que j'ai eu une demande de confirmation.
Sur mon forum j'ai préféré ne garder que le corps du message. J'étais même parvenue sur un fofo test à ne conserver que les images du premier message.

Ah ben c'est exactement ce qui m'intéresse en fait. je ne souhaite pas modérer mon forum ou laisser mes membres éditer leurs messages via l'aperçu. Le but étant vraiment de donner un "avant goût" des sujets aux membres avant qu'ils cliquent dessus donc en gros : on vire toutes les fonctions d'éditions, citation etc de l'aperçu pour ne laisser que les images (s'il y en a) et le texte. Et là encore, pas obligé de laisser le texte en intégralité, c'est vraiment histoire que le membre puisse se faire une idée avant d'accéder au sujet, d'où le pourquoi une version 100% sans clique m'aurait arrangé.

[Neptunia]

Je viens d'essayer les modifications que tu proposes et j'obtient un autre résultat :
J'ai beau éloigné mon curseur de la loupe, l'aperçu semble rester ouvert et disparaît à son bon vouloir, le curseur sur mon écran prend dès lors a forme d'une main.

Moi, je constate l'inverse, le curseur prend l'aspect d'une main tant qu'on n'est pas sur l'aperçu du sujet. Normal puisqu'un événement onclick est associé à tout le reste de la page. En revanche dès que l'aperçu se ferme (en cessant de le survoler sauf s'il a disparu avant) le curseur reprend sa forme "normale".

Autre possibilité, changer la zone d'action de l'aperçu. Par défaut c'est le message complet avec le profil et les boutons d'action. Pratique si on veut modérer rapidement.

Ah ben c'est exactement ce qui m'intéresse en fait. je ne souhaite pas modérer mon forum ou laisser mes membres éditer leurs messages via l'aperçu. Le but étant vraiment de donner un "avant goût" des sujets aux membres avant qu'ils cliquent dessus donc en gros : on vire toutes les fonctions d'éditions, citation etc de l'aperçu pour ne laisser que les images (s'il y en a) et le texte.

A la ligne 7, remplacer .post:eq(1) par .postbody:eq(0)

Et cette fois le menu Rechercher ne viendra plus jouer les troubles-fête sur phpBB2.

Attention toutefois, cette modif est spécifique à chaque version de forum. La class postbody est présente sur d'autres versions mais ne recouvre pas le même contenu. Sur phpBB3 par exemple, elle inclut le message et son entête (titre, date, heure et boutons d'actions Citer, Editer ...)

[orpheus]

Je te remercie pour ton aide Neptunia, je pense que du coup, on a fait le tour du sujet et j'ai trouvé les solutions dont j'avais besoin.
Je passe le sujet en résolu