Demande d'aide sur code bannière défilante en image

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

Résolu Demande d'aide sur code bannière défilante en image

Message par Solid6Snake le Lun 31 Oct 2016 - 11:36

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour, je viens de placer des bannières défilantes sur mon portail de forum avec l'aide de votre tutoriel:

http://forum.forumactif.com/t375724-creer-une-banniere-defilante-image-ou-texte

Tout fonctionne parfaitement mais j'ai quelques réglages à effectuer et je vais avoir besoin de vous.

1 - Est-il possible de faire démarrer ma première bannière directement à gauche?

(Pour ne pas avoir de trou direct au démarrage)


2 - Est-il possible aussi de laisser quelques secondes avant le premier démarrage de la première bannière?

(Pour ne pas rater la première bannière)


3 - Comment faire défiler mes bannières aléatoirement?

(Pour ne pas avoir toujours la même en tête)


Merci d'avance ::pourtoi::

Bonne journée à tous.


Dernière édition par Solid6Snake le Lun 31 Oct 2016 - 17:40, édité 4 fois
avatar

Solid6Snake
*****

Messages : 509
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Demande d'aide sur code bannière défilante en image

Message par Chacha le Lun 31 Oct 2016 - 11:44

Bonjour,

Afin de conserver un forum lisible, l'utilisation des mises en forme suivante est interdite :
  • Le gras et la couleur (réservés au staff de ce forum),
  • L'écriture en SMS (abréviations)
Pour plus de détails sur la conduite à tenir sur ce forum, merci de lire la Charte du forum.


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54354
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Demande d'aide sur code bannière défilante en image

Message par Neptunia le Lun 31 Oct 2016 - 12:04

Bonjour Solid6Snake


J'ai en place sur la page d'accueil du forum de mon profil un code qui répond aux critères 1 et 3.
En revanche c'est un code qui n'affiche que des images, donc sans liens.

Pour le point 2 c'est possible en temporisant l'exécution du script mais je ne sais pas faire.
avatar

Neptunia
Membre actif

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

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

Résolu Re: Demande d'aide sur code bannière défilante en image

Message par Solid6Snake le Lun 31 Oct 2016 - 16:33

@Neptunia a écrit:Bonjour Solid6Snake


J'ai en place sur la page d'accueil du forum de mon profil un code qui répond aux critères 1 et 3.
En revanche c'est un code qui n'affiche que des images, donc sans liens.

Pour le point 2 c'est possible en temporisant l'exécution du script mais je ne sais pas faire.

C'est ce que je recherche à faire, par contre votre code s'affiche d'un coup c'est pareil voir mieux que de combler le vide de départ.

Ca change quoi que ce soit une image ou un URl sur une image ça ne marchera pas?

Concernant le mode aléatoire ce n'est pas une priorité c'est juste pour le coté pratique, je peux très bien alterner moi-même un ou deux codes.

C'est possible de modifier ou d'ajouter du CSS au code du tutoriel et si oui comment?

avatar

Solid6Snake
*****

Messages : 509
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Demande d'aide sur code bannière défilante en image

Message par Neptunia le Lun 31 Oct 2016 - 17:29

A moins de faire erreur, vos bannières sont cliquables ! Pas les miennes.

Alors modifier ou ajouter du css au tutoriel c'est une autre histoire parce que quand j'ai installé ces bannières il n'y avait pas de tuto et j'ai dû me débrouiller.

Le tutoriel sur lequel je me suis basée :
Right Scroll horizontal continu en JavaScript

Je viens de découvrir que le tuto a été mis à jour récemment et permet maintenant d'ajouter des liens aux images.

Le reste de mon message s'appliquera à l'ancienne version du tuto et reprendra comme exemples les images d'un membre qui a eu la riche idée de ne pas passer en résolu afin de priver la communauté de mes explications de l'époque (que j'ai eu la non moins riche idée de sauvegarder de mon côté)

La mise en place se fait en 3 étapes.

La partie HTML :
PA > Affichage > Page d'accueil > Généralités
Message sur la page d'accueil :
Code:
<div class="jsmarquee" id="Nep_Hscroll1"></div>
Je pense que ça se passe de commentaire, on se contente de créer un div avec un identifiant et une class

La partie CSS :
PA > Affichage > Images et Couleurs > Couleurs > Onglet Feuille de style CSS
On ajoute ce code
Code:
.jsmarquee {
    position:relative;
    overflow:hidden;
    height:183px; /* hauteur de la plus haute image */
    border:solid black 1px;
    }
Idem ici, il suffit de régler la hauteur du bloc défilant sur la hauteur de la plus grande des images.

La partie javascript :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript > Créer un nouveau Javascript.
-> Titre : Scroll horizontal continu (ou n'importe quoi de suffisamment explicite pour vous)
-> Placement : Sur l'index
Code :
Code:
var mqAry1=['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMjzTay6Ha6ulWbeOH3gk02CR9N9mAC9GkUpYJkuk6EvR-pFWs3A','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVEEgDR78XAtk_jO-wuVp1kcBLd3dtUkpwAb9LFssmr0lPmT1xLg','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiAoa28OmFg-u4Z3e9iazaU8pb9p_37vUgxPwu5ExzLLjJatGH','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm_ByvztVQTQ5timB4GuPkP5n9lHQfk5TLePfplgk7NARyto46','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSd9mitndjEVlG_AI-JUa1-_uA2Ku4jsAVehY3iAw_hB6MkIiuD','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrYvTISy1RJD-N99jCZscUJFpLrhg6OM7kohH3Ph-CdEzcZJ-2','https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSgoIH8tF4gynxh_Y-jmGjtKmwQ9ifWOvBwZ3Ul7In3QygAuYvz','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSgTCk8dnNQl_i-Y38z87zRJf_agLQ7hCi1bllKlXdt3a-a8kdN','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQSJpD5arpJ8MelRIXD6UFsfffid2Lx_e0x2YqKSLFGIka8jKx0','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfQjBsn8MdnW7GbSfImDtBOiv9fMhANf1aFWUx0F09RRC3QGD0','https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-bADddf-dDVLrQO0HGZMh5WqqJl1QiKLIo-fDtKJ-YY6-mKuU','https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS4lDBqAicO4CuPkNnsCs6ySDsQrLJGF9wADq1f4b4krmgRLTdONQ'];


function start() {
  new mq('Nep_Hscroll1',mqAry1,275);
  mqRotate(mqr); // must come last
}
window.onload = start;

// Continuous Image Marquee
// copyright 24th July 2008 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img'); this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

Là j'ai configuré le code pour qu'il soit prêt à l'emploi. Je vais tout de même expliquer et poster un code "universel" pour tous ceux qui consulteront plus tard ce sujet.

Le code de base :
Code:
var mqAry1=['http://www.hebergeur.com/image1.jpg','http://www.hebergeur.com/image2.jpg','http://www.hebergeur.com/image3.jpg','http://www.hebergeur.com/image4.jpg','http://www.hebergeur.com/image5.jpg'];
var mqAry2=['http://www.hebergeur.com/imagea.jpg','http://www.hebergeur.com/imageb.jpg','http://www.hebergeur.com/imagec.jpg','http://www.hebergeur.com/imaged.jpg','http://www.hebergeur.com/imagee.jpg'];

function start() {
  new mq('m1',mqAry1,60);
  new mq('m2',mqAry2,60);// repeter autant de fois qu il y a de conteneur a configurer
  mqRotate(mqr); // cette ligne doit toujours etre la derniere de cette section
}
window.onload = start;

// Continuous Image Marquee
// copyright 24th July 2008 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
var mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img'); this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = 'absolute'; this.mqo.ary[i].style.left = (wid*i)+'px'; this.mqo.ary[i].style.width = wid+'px'; this.mqo.ary[i].style.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<maxa;i++){var x = mqr[j].ary[i].style;  x.left=(parseInt(x.left,10)-1)+'px';} var y = mqr[j].ary[0].style; if (parseInt(y.left,10)+parseInt(y.width,10)<0) {var z = mqr[j].ary.shift(); z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);}

En début de code on a un tableau nommé mqAry1.
Il faut mettre toutes les valeurs du tableau entre [ et ] les séparer par une virgule. Chaque valeur est de plus délimitée par une apostrophe au début et une autre à la fin.
Même chose pour le tableau mqAry2. Le code permet en effet de créer plusieurs blocs depuis le même script. Chaque bloc dispose donc de son propre tableau d'images. Cet exemple utilise 5 images pour chaque.

Ensuite on appelle la fonction
Code:
function start() {
  new mq('m1',mqAry1,60);
  new mq('m2',mqAry2,60);// repeter autant de fois qu il y a de conteneur a configurer
  mqRotate(mqr); // cette ligne doit toujours etre la derniere de cette section
}

On crée autant de conteneurs qu'on a de tableaux plus haut.
new mq('m1',mqAry1,60);
On crée un bloc avec pour identifiant m1 et comme tableau associé mqAry1 (bien s'asssurer que l'identifiant utilisé dans le
Code:
<div id="...">
du code HTML soit le même qu'ici
Le 60 correspond à la largeur de chaque image.

Attention toutes les images doivent avoir la même largeur, sinon le script va les redimensionner.
Et si on se base sur la version en ligne du script les images doivent avoir à la fois la même largeur mais aussi la même hauteur.

Autre limitation connue, pour qu'il n'y ait jamais d'emplacement vide (avant ou après la liste d'images) la largeur cumulée des images doit dépasser la largeur d'écran des plus grosses résolutions (1920 px de large pour un écran Full HD)




Ensuite pour le côté aléatoire de la chose c'est un truc que je voulais pour changer non pas l'ordre des images, mais les images en elles-même. Chez moi, à chaque rafraichissement de la page on est susceptible de voir les séries d'une autre chaîne TV.

J'ai donc soumis ma demande ici même.
résolu Chargement aléatoire d'un tableau à l'exécution d'un script

Dans votre cas, si vous avez peu de bannières et qu'il s'agit d'intervertir leur ordre, il suffirait de créer plusieurs tableaux, en modifiant chaque fois l'ordre des images.

Les explications ont été fournies pour une bannière dans le message de la page d'accueil avec un javascript placé sur l'index. Pour mettre sur le portail, j'imagine que vous savez ce qu'il y a à changer dans ces instructions ?

Dernière recommandation, bien songer à optimiser au maximum les images, de mon côté quand j'ai mis en place j'avais une bannière de 21 images (50 ko en moyenne) et au premier chargement de la page, ça se sentait. Maintenant les images font 10 ko de moyenne sans perte flagrante de qualité et sans effet notable de ralentissement.
avatar

Neptunia
Membre actif

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

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

Résolu Re: Demande d'aide sur code bannière défilante en image

Message par Solid6Snake le Lun 31 Oct 2016 - 17:38

Ouch.. bon et bien je vais prendre le temps de lire tout ça et effectuer plusieurs tests avant validation.

Je compte redimensionner mes bannières de toute façon et ce sera toujours les mêmes.

Merci pour le tutoriel Wink
avatar

Solid6Snake
*****

Messages : 509
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

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