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

[superhomme]

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.

[superhomme]

petit up

[superhomme]

up

[superhomme]

up

[superhomme]

up

[superhomme]

up merci

[superhomme]

up

[superhomme]

up

[superhomme]

up

[*Splash*]

Hi,

Ce lien sans doute : http://fancybox.net/howto

[*Splash*]

Autre sujet similaire : https://forum.forumactif.com/t389302-remplacer-agrandir-l-image-par-une-petite-loupe

Et celui-ci : https://help.forumotion.com/t153351-lightbox-effect-to-the-images

[superhomme]

Salut Splash

Ton coup de pouce m'a amener à trouver sur une piste et après quelques essais-erreurs, j'ai trouvé une solution.

Je vais l'expliquer pour les futures intéressés s'ils/elles tombent sur mon sujet.

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 -->

C'est ton lien https://help.forumotion.com/t153351-lightbox-effect-to-the-images qui m'a mis sur la piste.


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/, à partir de ton lien http://fancybox.net/howto


Bref ça marche aussi simple que ça et c'est normal que je partage ma solution.

[superhomme]

Il marche nickel mon code sur phpBB2.

Par contre, il semble avoir un glicht sur ModernBB, quand on clic sur l'image, elle bouge quelques seconde tout seul, voyez vous même via mon forum qui sert de test: http://transf.kanak.fr/t8-test-images

[*Splash*]

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/, à partir de ton lien http://fancybox.net/howto


Bref ça marche aussi simple que ça et c'est normal que je partage ma solution.

Ce qui n'est pas top c'est que tu seras le seul à pouvoir poster des images avec l'effet, les membres n'auront pas tous l'astuce et il y aura ceux qui ne voudront pas rajouter ce code.

J'aurais laissé ce sujet en non résolu afin que quelqu'un y laisse un code js afin que l'effet soit actif en postant un lien image sans ajout supplémentaire de balises de code.

[*Splash*]

Il marche nickel mon code sur phpBB2.

Par contre, il semble avoir un glicht sur ModernBB, quand on clic sur l'image, elle bouge quelques seconde tout seul, voyez vous même via mon forum qui sert de test: http://transf.kanak.fr/t8-test-images

Effectivement il y a un légé mouvement avant que l'image soit agrandit

[superhomme]

Ce qui n'est pas top c'est que tu seras le seul à pouvoir poster des images avec l'effet, les membres n'auront pas tous l'astuce et il y aura ceux qui ne voudront pas rajouter ce code.

J'aurais laissé ce sujet en non résolu afin que quelqu'un y laisse un code js afin que l'effet soit actif en postant un lien image sans ajout supplémentaire de balises de code.

J'ai édité mon message en non résolu vu que j'ai remarqué un bogue en version ModernBB alors qu'en phpBB2, phpBB3, PunBB & Invision ça marche.

Tu as raison de dire que seul moi saura fait cette effet avec mes images même si je partage le code html avec mes membres. La fonction n'est pas intégré sur le panneau de message sur forumactif actuellement.

Effectivement, faudrait qu'un pro du code Javascript est une solution alternative pour que ça soit automatique quand un membre écrit un message.

Il marche nickel mon code sur phpBB2, phpBB3, PunBB & Invision.

Par contre, il semble avoir un glicht sur ModernBB, quand on clic sur l'image, elle bouge quelques seconde tout seul, voyez vous même via mon forum qui sert de test: http://transf.kanak.fr/t8-test-images

Effectivement il y a un légé mouvement avant que l'image soit agrandit

Ça marche nickel sur mon site web... bref quelque chose dans la version ModernBB entre en altercation avec le code Fancybox, alors que phpBB2, phpBB3, PunBB & Invision aucun soucis. Bref seul un employé de Forumactif pourrait répondre à ça probablement.

[*Splash*]

Re,

Ajoute ce code js sur "Les sujets"

Code:

$(function(){
var img=$("img"), len=img.length, i=0;
for(i;i<len;i++){
img.eq(i).wrap("<a data-fancybox="gallery" href=""+img.eq(i).attr("src")+""></a>")
};
});

L'effet sur l'image fonctionne

http://testmodernbb.forumactif.com/t2-lightbox-image#2

Le seul inconvénient c'est qu'au lieu de concerner l'mage en question ça met en route un diaporama de toutes les images de la page

[superhomme]

Merci *Splash* pour ton aide, ça fait un moyen de plus pour l'affichage.

Mais le bogue demeure malheureusement sur ModernBB (déplacement rapide de l'image au clic) sur les grandes images (marche nickel mon code sur phpBB2, phpBB3, PunBB & Invision.)

Bref, il semblerait que peut-être seul un staff de forumactif pourrait répondre à ça je pense.

[Chacha]

Bonjour, Attention, cela fait 8 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[superhomme]

RAPPEL DE MON SOUCIE: Le bogue (déplacement rapide de l'image au clic d'agrandissement) existe malheureusement que sur ModernBB et AwesomeBB.

Alors que mon code marche nickel sur phpBB2, phpBB3, PunBB & Invision.

Bref, seul un employé de Forumactif pourrait trouver l'erreur dans leur codage ModernBB et AwesomeBB.

Voici le lien TEST-IMAGE: http://transf.kanak.fr/t9-ok#19

Merci d'avance à ceux qui trouveront la réponse.

Up

[superhomme]

up

[superhomme]

up

[Ea]

Bonjour,


En faisant plusieurs tests, ce code de fancybox à mettre sur les sujets me semble fonctionner pour ModernBB et autres:

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 img')).load(function () {
  if (this.width < this.naturalWidth) {
    $(this).wrap($('<a data-fancybox/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

La partie qui règle les mouvements étranges avec fancybox sur ModernBB et AwesomeBB est:

Code:

.fancybox-content{transition:none}
$.fancybox.defaults.hideScrollbar = false;

C'était dû au retrait de la scrollbar et le style par défaut des thèmes. Cela pourrait être retiré sur les autres versions pour cacher la scrollbar à l'activation de fancybox.

Pour que le code fonctionne, il faut ne pas avoir mis de largeur et hauteur dans Index > Panneau d'administration > Général > Messages et Emails | Configuration > "Redimensionnement des images".

Cordialement.

[*Splash*]

Bonjour,


En faisant plusieurs tests, ce code de fancybox à mettre sur les sujets me semble fonctionner pour ModernBB et autres:

Hi,
Ce code semble ne pas fonctionner sous ModernBB

[Ea]

Salut,


J'ai mis le code sur ce forum de test et pour moi ça fonctionne: http://kish.forum.st/t98-test#245

La box ne s'applique à une image que:

- si elle fait plus de 100% de la largeur du conteneur (pour éviter les smiley et petits images qu'on voit déjà en taille réelle),
- et si elle n'est pas entourée d'un lien (vu que le clique sur l'image est dans ce cas destiné à un clic sur le lien)

Sur le lien que je donne, suivant la taille de la fenêtre à l'ouverture de la page, j'ai la fancybox juste sur la 4ème image ou sur toutes les 4.

[*Splash*]

- et si elle n'est pas entourée d'un lien (vu que le clique sur l'image est dans ce cas destiné à un clic sur le lien)

OK j'ai compris pourquoi cela ne fonctionne pas.
Crois-tu qu'il est possible d'ajouter à ce code la possibilité de prendre en compte les liens URL ?

[Neptunia]

Bonjour Ea


Je confirme que le code ne fonctionne pas sur ModernBB y-compris sur le fofo test et avec Firefox.

Si je réduis ma fenêtre avant d'ouvrir le sujet j'ai bien la possibilité de cliquer sur chaque image, mais une fois la box ouverte on n'a aucune possibilité de passer à l'image suivante ou précédente.

Le zoom est fonctionnel, mais pas le diaporama.

[Ea]

J'avais loupé le point "diaporama".

La majorité des demandes du genre par le passé (avant que l'option de redimensionnement d'image ne soit disponible dans le panneau d'administration) étaient le plus souvent juste pour voir une image qui est rapetissée dans un message en plus grande au clic.

ça donnerait ceci en remplaçant `data-fancybox` par `data-fancybox="gallery"`:

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 img')).load(function () {
  if (this.width < this.naturalWidth) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

Et ça n'agit encore que sur les images plus large que le conteneur.

Ou bien avec ce code, il y aurait moyen que ça agisse sur toutes les images plus grande que 100px de largeur ou 100px de longueur (afin d'éviter les smileys):

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 img')).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

[Neptunia]

J'adore la version qui se base sur la taille des images !

Testé sous PunBB (et ya des chances que je l'adopte). On peut même contrôler le diaporama au clavier.

Le seul bémol c'est ça !

La box ne s'applique à une image que:
- et si elle n'est pas entourée d'un lien (vu que le clique sur l'image est dans ce cas destiné à un clic sur le lien)

En ce qui me concerne, la plupart de mes membres utilisant servimg n'utilisent pas le lien direct.

Merci Ea

[Ea]

Si on veut que ça fonctionne aussi sur les liens, on peut retirer du code (le lien ne fonctionnera plus):

Code:

.not(contents.find('a img'))

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/"]'))