Intégration d'un diaporama (slidehow) dans un post.

par Reeza Sam 10 Fév 2018 - 19:49

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous !

Me voilà ici après plusieurs tentatives et de nombreuses recherches sur la toile ! Je n'ai plus d'autres options que venir toquer à votre porte.

Je vais tenter d'être le plus clair possible en vous expliquant ce que je veux et le problème que je rencontre.

> Je souhaite intégrer un diaporama à la fin d'un post. Celui-ci sera en défilement automatique (sans boutons de préférence.)

Dans mes étapes :

- J'ai bien trouvé le formulaire disponible par ForumActif. Il me génère parfaitement mon diaporama mais je rencontre un problème :

Comme je veux l'intégrer dans un post, il ne faut pas que Voulez-vous utiliser le haut et le bas de page de votre forum ? soit coché. Or, si je le décoche, les images ne défilent plus du tout.

Le page HTML en bonne en soi, quand j'ajoute le lien de la page HTML qui contient le code du diapo généré par FA, il s'affiche bien mais les images restent figées. Et je ne sais pas du tout quoi faire.

Ma volonté est simplement de pouvoir terminer mon post par une "galerie" d'images. Je ne veux pas que ça soit en tête de forum ou en widget, simplement intégré après mon texte.

Pour vous donner l'idée générale de la chose, il s'agit d'un forum RPG. Les galeries se trouveront à la fin des descriptions des groupes afin de donner des "lieux" concrets.

Je n'ai donc pas de visu à vous donner puisque j'ai simplement copié le code généré par le formulaire

Pour résumer :

Si je copie le code généré et coche "Oui" à Voulez-vous utiliser le haut et le bas de page de votre forum ?, le diaporama fonctionne parfaitement en prévisualisation. Mais je ne peux pas l'intégrer dans un post puisque ça affiche "toute" la page d'accueil de mon forum.

Merci d'avance pour votre aide Smile

par Neptunia Sam 10 Fév 2018 - 19:59

Bonjour, et bienvenue sur le Forum des Forums Forumactif

Pourriez-vous nous fournir le contenu de votre page HTML, et tout spécialement tout ce qui est inclus entre <head> et </head>

par Reeza Sam 10 Fév 2018 - 20:08

Merci pour votre accueil ! I love you

Je vais vous donner le seul code dont je dispose (à savoir celui généré par le formulaire) :

Spoiler:

Donc voilà, ceci forme mon diapo.

Vous me parlez de <head> mais, je crois que, justement, c'est peut-être ça qui doit manquer pour que le diapo soit pris en charge sans que Voulez-vous utiliser le haut et le bas de page de votre forum ? soit coché ! (Enfin je pense.)

Donc voilà ! Je n'ai pas de <head> </ head>, je n'ai que ça, copié dans ma page HTML.

par Neptunia Sam 10 Fév 2018 - 20:32

Reeza a écrit:Vous me parlez de <head> mais, je crois que, justement, c'est peut-être ça qui doit manquer pour que le diapo soit pris en charge sans que Voulez-vous utiliser le haut et le bas de page de votre forum ? soit coché ! (Enfin je pense.)

Donc voilà ! Je n'ai pas de <head> </ head>, je n'ai que ça, copié dans ma page HTML.

Si je vous ai posé cette question, c'est que je me doutais de la réponse.

Pourtant à l'option concernant le haut et le bas de page, figure l'aide suivante :

Si vous cochez "non", vous devrez taper un code complet (avec balises html, body, head ...).
Dans ce cas, lors de l'édition de la page, l'éditeur html est désactivé.

Du coup le code de votre page html devrait au minimum ressembler à ceci :

Code:: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> VOTRE CONTENU ICI </body> </html>

Notez que je me sers du header de la page pour charger la bibliothèque jQuery !

Code final et fonctionnel :

Code:: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> <body> <style type="text/css"> #rotator1518289519841 { height: 120px; } #rotator1518289519841 a { position: absolute; background: #FFFFFF; border: 1px solid #CCCCCC; padding: 4px; } #rotator1518289519841 img { height: 110px; width: 150px; } </style> <div id="rotator1518289519841"><a id="itemActif1518289519841" style="z-index:999" href="#" title="" target="_blank"><img src="https://i.imgur.com/8xHvgHC.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="https://i.imgur.com/BErt705.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="https://i.imgur.com/SBgeRSW.jpg" alt="" /></a></div> <script type="text/javascript"> (function() { var r = document.getElementById("rotator1518289519841"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() { var a = document.getElementById("itemActif1518289519841"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1; n.style.zIndex = 998; jQuery(a).animate({ "opacity": 0 }, 800, "linear", function() { a.id = ""; a.style.zIndex = ""; n.id = "itemActif1518289519841"; n.style.zIndex = 999 }) }, 3500) })(); </script> </body> </html>

par Reeza Sam 10 Fév 2018 - 22:13

Neptunia a écrit:Pourtant à l'option concernant le haut et le bas de page, figure l'aide suivante :

Effectivement, je l'avais vu ! Mais ne sachant pas quel code y mettre j'ai préféré venir demander de l'aide Smile

En tout cas avec ce que vous m'avez donné tout fonctionne et en plus de ça, j'ai compris le codage ! Merci beaucoup pour votre aide et votre impressionnante rapidité ! merci

Intégration d'un diaporama (slidehow) dans un post.