Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Page 2 sur 2 Précédent  1, 2

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

Résolu Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Lun 13 Aoû 2018 - 18:08

Rappel du premier message :

Bonjour Forumactif

J'aurais besoin d'aide SVP car j'aimerais pouvoir installer un code de Fancybox ou Lightbox pour visualiser les images que je partage sur mon Forum.

Exemple de Fancybox ou Lightbox:
#1 http://www.transformers-fans.world/dna-design-dk-09-ss-megatron-upgrade-kit/
#2 http://news.tfw2005.com/2018/08/12/transformers-power-of-the-primes-wave-4-deluxe-novastar-spotted-at-us-retail-370017

J'ai pu le faire pour mon html (exemple), mais j'aimerais l'appliquer dans les messages sur le forum à l'aide de "Feuille de style CSS" + "Gestion des codes Javascript".

Y aurait-il quelqu'un qui pourrait m'aider?

Si oui, quel code HTML à ajouter dans les messages du forum que je ferai pour que la galerie Fancybox ou Lightbox fonctionne.

Merci d'avance.


Mon forum: http://www.transformersfr.com/forum

P.S.: J'ai essayé ce code: https://help.forumotion.com/t115826-add-a-lightbox-effect-to-the-images-of-the-forum
Mais malheureusement je n'ai pas le code HTML à ajouter dans ses messages du forum pour que la galerie marche.


Dernière édition par superhomme le Ven 24 Aoû 2018 - 20:57, édité 1 fois
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par Neptunia le Mar 25 Sep 2018 - 17:33

Avec le second correctif, l'ennui est que ça devient chaud si tout le monde n'utilise pas Servimg. Moi même sur mon fofo j'utilise un espace personnel pour certains de mes sujets.

J'ai retenu le premier correctif mais j'ai du ajuster le champ d'action parce que sous PunBB, le volet de profil (donc l'avatar) est encapsulé dans le postbody.
Code:
var contents = $('.post-entry,.content');
post-entry pour la version web PunBB et content pour la compatibilité en version mobile classique.
Tant pis pour l'universalité initiale du code.




Code fonctionnel ici : Les Mystérieuses Cités d’Or [1982] [S.Anim] avec de nombreuses images insérées à l'intérieur d'un lien.

Où là : 24 septembre - Maman, Pedro, Jessica … et les autres avec une seule image en lien direct. Je note que Fancybox est tellement bien conçu qu'il n'affiche plus les flèches de navigation dans le cas d'une image unique.




Merci Ea ::fleur::
Neptunia

Neptunia
Membre actif

Féminin
Messages : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 17:52

@Ea a écrit:

Ou pour que ça mette fancybox seulement si le lien est vers servimg et l'image n'est pas une miniature, on peut remplacer par:

Code:
.not(contents.find('a:not([href*="://servimg.com/view/"]) img,a img[src*="/th/"]'))
J'ai ajouté cette ligne au js mais l'effet ne fonctionne plus du coup :
Code:
$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).not(contents.find('a:not([href*="://servimg.com/view/"]) img,a img[src*="/th/"]')).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 18:51

C'est gentil la nouvelle aide, fort apprécié.

Par contre, j'aurais besoin de précision svp...
• où dois mettre vos codes (javascript? overall_header? etc...)
• quel est le code à mettre dans le message du sujet pour afficher l'image.

Avec mon code fancybox original qui est utilisé partout sur le net, j'ai simplement découvert un bogue majeur avec le template ModernBB et AwesomeBB... est-il possible que le staff de forumactif puisse trouver la cause du problème svp?

@superhomme a écrit:D'abord, dans le template "overall_header", en dessous de
Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
...J''ai ajouté ce code:
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
Et j'ai effacé ceci:
Code:
<!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
Ensuite, dans chaque message sur le forum que j'écrirais, voici le code html pour mettre les images:
Code:
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
J'ai trouvé ça ici: http://fancyapps.com/fancybox/3/
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 18:59

@superhomme a écrit:
• où dois mettre vos codes (javascript? overall_header? etc...)
Hi,

Pour ajouter un javascript c'est par ici :
PA / Modules / Gestion des codes javascript

Pour le Template :
PA / Affichage / Templates / Général
Et là tu trouveras le Template overall_header

• quel est le code à mettre dans le message du sujet pour afficher l'image.
Aucun code à rajouter puisque c'est déjà fait par les modifications apportées, tu colles juste ton image dans ton message et tu profites de l'effet Fancybox
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 20:12

Vraiment désolé mais je ne comprend pas quel code est le javascript et lequel est le code overral_header, pouvez-vous svp être plus précis, merci.
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 20:18

En l'occurence pour le sujet en question, si tu lis bien ce message de Ea : https://forum.forumactif.com/t397762-diaporama-pour-visualiser-les-images-dans-les-messages-fancybox-ou-lightbox#3326057

Il n'est question que d'un code javascript
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 20:21

Merci splash mais le code ne marche pas quand je le met en javascript avec crochet sur "Sur les sujets". Je sais pas comment vous faites pour que ça marche de votre côté.
(HTML & JAVASCRIPT ->Gestion des codes Javascript ->Modifier un code Javascript)
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 21:17

@superhomme a écrit:Merci splash mais le code ne marche pas quand je le met en javascript avec crochet sur "Sur les sujets". Je sais pas comment vous faites pour que ça marche de votre côté.
(HTML & JAVASCRIPT ->Gestion des codes Javascript ->Modifier un code Javascript)
Ce code là en sélectionnant les sujets fonctionne à merveille pourtant avec un forum en ModernBB :
Code:
$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par Neptunia le Mar 25 Sep 2018 - 21:56

Une question à la *** pour superhomme

Qu'avez-vous fait au juste pour activer ou réactiver la gestion des codes javascript ?
Neptunia

Neptunia
Membre actif

Féminin
Messages : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 22:11

@*Splash* a écrit:Ce code là en sélectionnant les sujets fonctionne à merveille pourtant avec un forum en ModernBB :
Code:
$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});
Je viens de tester votre code, cette fois ça donner un résultat: Les images s'ouvre bien. Par contre, les images demeurent petites, impossible de les voir plus grande quand on clique dessus. Et de plus, le forum se déplace quelques secondes de gauche à droite en cliquant sur l'image.

Mon code fancybox et le votre fancybox est bon on s'entend. Il y a vraiment une anomalie avec le ModernBB et AwesomeBB (marche nickel mon code sur phpBB2, phpBB3, PunBB & Invision.). C'est en amont (staff programmation) que ça doit être réparé ce qui fait ce "shake"... sinon ça ne marchera jamais on dirait.

@Neptunia a écrit:Une question à la *** pour superhomme
Qu'avez-vous fait au juste pour activer ou réactiver la gestion des codes javascript ?

Dans mon code original, je n'ai jamais utilisé de javascript dans la section javascript, je l'avais mis dans overhall_header comme expliqué ci-haut.

Pour le code de Ea, j'avais pourtant Activer la gestion des codes Javascript  au oui et crochet à tous les sujets.
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 22:18

@superhomme a écrit:Il y a vraiment une anomalie avec le ModernBB et AwesomeBB. C'est en amont (staff programmation) que ça doit être réparé ce qui fait ce "shake"... sinon ça ne marchera jamais on dirait.
Non désolé il n'y a aucune anomalie sous ModernBB, ni de décalage du forum à droite ou à gauche !

Sous AwesomeBB il y a juste un souci de rafraîchissement, lorsque l'on ferme l'image en cliquant sur la croix en haut à gauche celle-ci disparaît de son message, il faut rafraîchir la page et elle revient
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 22:32

Pourtant je n'ai aucun soucis avec mon code sur phpBB2, phpBB3, PunBB & Invision. Il marche aussi sur mon site Html.

Pourquoi ModernBB fait ce glissement en agrandissement ?

Et quand j'utilise votre code à vous et à EA, pourquoi l'image ne s'agrandit pas du tout ?

Est-ce que c'est moi qui s'explique mal ou essais de la mauvaise façon pour expliquer qu'on n'as pas de solution au final.
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par *Splash* le Mar 25 Sep 2018 - 22:36

@superhomme a écrit:
Et quand j'utilise votre code à vous et à EA, pourquoi l'image ne s'agrandit pas du tout ?

Est-ce que c'est moi qui s'explique mal ou essais de la mauvaise façon pour expliquer qu'on n'as pas de solution au final.
Le code en question est le code de Ea
Je ne comprends pas la seconde partie de ton message, solution finale à quoi ?
Le souci semble présent chez toi, qu'a tu fais d'autre que de mettre ce code js pour bénéficier de cet effet FancyBox ?
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3414
Inscrit(e) le : 25/02/2018

Voir le profil de l'utilisateur https://lesforums.caforum.fr/
*Splash* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par Neptunia le Mar 25 Sep 2018 - 22:41

@superhomme a écrit:Par contre, les images demeurent petites, impossible de les voir plus grande quand on clique dessus.
Le plugin Fancybox n'est pas fait pour agrandir les images. Il ne fait que les afficher en taille réelle (ou en plein écran pour les images plus grandes que l'écran). Si l'image est déjà en taille réelle, cliquer dessus ne fera qu'ouvrir le diaporama avec l'image au centre.

@superhomme a écrit:Pour le code de Ea, j'avais pourtant Activer la gestion des codes Javascript  au oui et crochet à tous les sujets.
C'est tout ce qu'il y avait à faire.
J'ai posé la question parce que d'une part la gestion des codes JS est inactive par défaut, et d'autre part un incident récent avait désactivé cette gestion sur de nombreux fora.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Mar 25 Sep 2018 - 22:43

Le code de Ea n'est que pour les images grandes. Bref, l'image est redimentionné dans le message et quand on l'agrandit ça marche. Ça empêche d'utiliser de petite image à cliquer pour une plus grande image pour un affichage plus rapide de la page.

Ce que je disais, c'est que la solution actuel offert par Ea n'est pas une solution complète... ça demande de changer ma façon de faire et qu'avec de grande image, alourdissant l'ouverture de page.

Mon code Fancybox (utiliser mondialement actuellement) dans le "overall_header" marche sous phpBB2, phpBB3, PunBB & Invision, j'aurais aimé qu'il marche sous ModernBB et AwesomeBB car il répond à mes besoins: petite image à cliquer pour une plus grande image pour un affichage plus rapide de la page.
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par Ea le Mer 26 Sep 2018 - 13:17

Bonjour,


Pour le code en template:

@superhomme a écrit:D'abord, dans le template "overall_header", en dessous de
Code:
<script src="{JQUERY_PATH}" type="text/javascript"></script>
...J''ai ajouté ce code:
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
Et j'ai effacé ceci:
Code:
<!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
Ensuite, dans chaque message sur le forum que j'écrirais, voici le code html pour mettre les images:
Code:
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
J'ai trouvé ça ici: http://fancyapps.com/fancybox/3/

La librairie jQuery est beaucoup utilisée par forumactif et changer la version comme ça pourrait causer des problèmes.

Il faudrait plutôt faire ceci:

Dans le template "overall_header", en dessous de:

Code:
<!-- END switch_recent_jquery -->

Ajouter:

Code:
<script>$.fn.addBack = $.fn.addBack || function (selector) { return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector)); };</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />

Dans le code que j'ai donné il y a une partie pour resoudre le problème visuel sur modernbb et awesomebb, et ce n'est pas un problème de modernbb et awesomebb mais une configuration que fancybox ne prends pas en compte et donc nécessite une modification.

Avec la modification de template, ça peut-être fait en ajoutant dans le CSS:

Code:
.fancybox-content{transition:none}

et en dessous de l'ajout dans la template, ajouter ceci:

Code:
<script>$.fancybox.defaults.hideScrollbar = false;</script>

Sinon j'ai mis à jours les codes à utiliser tout seuls en javascript afin que ça n'agisse pas sur les avatar en punbb et que le clic sur l'image ou la gallerie de miniature fonctionne.

J'ai mis les deux versions qui me semblent utiles:

  • une pour les images plus large que le conteneur sans gallerie d'image:

    Code:
    $(function () {
     
    var getFancy = function () {
      $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
      $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
        $.fn.addBack = $.fn.addBack || function (selector) {
          return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
        };
        $('body').css('transition-duration')!=='0s' && ($.fancybox.defaults.hideScrollbar = false);
      });
      getFancy = function () {};
    };
    var contents = $('.post-entry,.post-content,.content,td>.postbody');
    contents.find('img').css({maxWidth:'100%'}).load(function () {
      var a = $(this).closest('a');
      if(a.is('[data-fancybox]') || a.length && !/^(.+)@\1$|\b(servimg\.com\/).*@.*\b\2(?!.*\/th\/)/.test(a.prop('href')+'@'+$(this).prop('src'))) return;
      if (this.width < this.naturalWidth) {
        $(this).wrap($('<a data-fancybox/>').prop('href', $(this).prop('src'))).unbind('load');
        getFancy();
      }
    }).load();
     
    });
  • une pour les images avec une largeur ou hauteur plus grande que 100 pixels (pour éviter les smileys) avec une gallerie d'image:

    Code:
    $(function () {
     
    var getFancy = function () {
      $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
      $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
        $.fn.addBack = $.fn.addBack || function (selector) {
          return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
        };
        $('body').css('transition-duration')!=='0s' && ($.fancybox.defaults.hideScrollbar = false);
      });
      getFancy = function () {};
    };
    var contents = $('.post-entry,.post-content,.content,td>.postbody');
    contents.find('img').css({maxWidth:'100%'}).load(function () {
      var a = $(this).closest('a');
      if(a.is('[data-fancybox]') || a.length && !/^(.+)@\1$|\b(servimg\.com\/).*@.*\b\2(?!.*\/th\/)/.test(a.prop('href')+'@'+$(this).prop('src'))) return;
      if (100 < this.naturalWidth || 100 < this.naturalHeight) {
        $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
        getFancy();
      }
    }).load();
     
    });
Ea

Ea
Aidactif
Aidactif

Messages : 23568
Inscrit(e) le : 04/04/2008

Voir le profil de l'utilisateur
Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par Neptunia le Mer 26 Sep 2018 - 13:47

@Ea a écrit:
Sinon j'ai mis à jours les codes à utiliser tout seuls en javascript afin que ça n'agisse pas sur les avatar en punbb et que le clic sur l'image ou la gallerie de miniature fonctionne.

J'ai pris la version Diaporama.

Merci Ea pour le correctif pour PunBB (et me sens un peu Diaporama pour visualiser les images dans les messages (fancybox ou lightbox) - Page 2 1f427 sur le coup parce qu'affiner le sélecteur problématique était en principe à ma portée).

J'offre la pause gourmande ! Diaporama pour visualiser les images dans les messages (fancybox ou lightbox) - Page 2 2615 Diaporama pour visualiser les images dans les messages (fancybox ou lightbox) - Page 2 1f370
Neptunia

Neptunia
Membre actif

Féminin
Messages : 15802
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Diaporama pour visualiser les images dans les messages (fancybox ou lightbox)

Message par superhomme le Jeu 27 Sep 2018 - 9:40

Bonjour Ea

Tout d'abord merci pour votre aide et vos explications.

J'ai suivie vos directives et si j'ai bien compris... vous avez remplacé ce code
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
par celui-ci
Code:
<script>$.fn.addBack = $.fn.addBack || function (selector) { return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector)); };</script>

Ensuite j'ai mis vos codes Javascript dans la section Javascript et ça marché.
(ma scrollbar est présent après le clic d'agrandissement mais ça ne me dérange pas.)

En résumé, ça semble fonctionner à merveille. Je vous remercie beaucoup Ea. Smile
superhomme

superhomme
***

Masculin
Messages : 122
Inscrit(e) le : 24/11/2008

Voir le profil de l'utilisateur http://transformers.1fr1.net/
superhomme a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

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


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