Aide / background aléatoire header - code, astuce, css...

par papa pig Jeu 26 Oct 2017 - 16:24

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 26/10/2017
Lien du forum : bf-v21.forumactif.com/

Description du problème

Bonjour,

Grand merci à quiconque m'aidera car j'ai un "projet" sur lequel je bute. J'ai cherché diverses solutions sur le web, et ici, mais rien de "concluant". Je suis ignorant en JQuery, Javascript, etc. Et je ne sais pas si c'est faisable d'une autre façon...

Travaillant sur une nouvelle version du forum utilisant ModernBB, j'aimerais qu'un élément de background du header change aléatoirement au chargement des pages (des images différentes, photos, etc).

Pour ce faire, j'ai déjà réalisé l'intégration en travaillant les css. Comme vous le voyez, je n'ai pas touché au template, car cette solution est pour moi la dernière (soucis de mises à jour). Cela marche très bien en se servant du div #page-header qui n'est par défaut pas "utilisé" comme élément d'application de styles. Le div .headerbar restant lui mobilisé comme à son origine pour afficher un svg en cover.

Sur le div #page-header donc, j'ai appliqué un background couleur, affichant 2 images alignées à droite, dont une en png sert d'effet dégradé au-dessus de l'autre. C'est pour cela qu'elle est déclarée en premier dans la propriété ci-dessous. La taille à 33% (de large dans ce cas précis) est voulue, elle correspond à l'endroit ou le svg est "vide" (les motifs du svg allant remplir 67% de l'image en partant de la gauche). Le svg à noter, est envoyé par le div .headerbar, cela n'apparaît pas dans ce code, mais modernbb l'appplique en "natif" (l'url du svg étant concrètement renseigné dans le panneau d'admin "Image de fond de l'entête").

Code:: #page-header { background-image: url('https://i62.servimg.com/u/f62/19/59/59/04/fondu10.png'), url('https://i62.servimg.com/u/f62/19/59/59/04/drumme10.jpg'); background-color: #313638; background-repeat: no-repeat; background-position: right center; background-size: 33%; } .headerbar { background-color: transparent !important; background-position: bottom center; height: 260px; }

Est-ce qu'il existe d'après vous une solution pour coder quelque chose qui permette au div #page-header d'afficher aléatoirement une image à partir bien entendu d'une liste d'url.

Pour l'exemple, voici 3 photos pouvant être utilisées à cette fin :
https://i.servimg.com/u/f62/19/59/59/04/drumme10.jpg
https://i.servimg.com/u/f62/19/59/59/04/batter11.jpg
https://i.servimg.com/u/f62/19/59/59/04/tambou10.png

Voici le lien du forum test : http://bf-v21.forumactif.com/forum

Grand grand merci ::fleur::

par papa pig Ven 27 Oct 2017 - 16:25

+24h : UP merci ::fleur::

par Adam_sfp Sam 28 Oct 2017 - 2:06

Bonsoir

J'ai pas tout compris de ce que vous voulez faire Wink

Mais pour une image aléatoire au refresh voici une base

Code:: <img id="test" /> <script> var image = new Array (); image[0] = "http://via.placeholder.com/150x150"; image[1] = "http://via.placeholder.com/250x150"; image[2] = "http://via.placeholder.com/350x150"; var size = image.length var x = Math.floor(size*Math.random()) jQuery('#test').attr('src',image[x]); </script>

Cdt

par papa pig Sam 28 Oct 2017 - 3:25

Merci pour votre aide. C'est vrai que quand je me relis, ça me paraît compliqué... Je vais essayer d'être plus clair et simple.

Votre solution est super pour agir sur une image. Mais dans mon cas il n'y a pas de balise <img/> dans ce fameux <div/>, les images sont affichées en background via css.

Concrètement, j'aurais besoin d'un code qui me permette, lors du refresh, d'attribuer et de changer aléatoirement une class à un <div> identifié, car j'ai vraiment besoin de laisser l'élément en background.

Exemple
Actuellement, on a ça :

Code:: <body> <div id="page-header"> <div class="headerbar"> [...] </div> </div> </body>

J'aimerais avoir un code qui rajoute une .class aléatoire (parmi une liste) à #page-header, et grâce à ces différentes class, via les css, j'envoie un background différent à chaque refresh.

Exemple, une fois réalisé
chargement de la page :

Code:: <body> <div id="page-header" class="bgrd1"> <div class="headerbar"> [...] </div> </div> </body>

1er refresh :

Code:: <body> <div id="page-header" class="bgrd3"> <div class="headerbar"> [...] </div> </div> </body>

2e refresh :

Code:: <body> <div id="page-header" class="bgrd2"> <div class="headerbar"> [...] </div> </div> </body>

3e refresh :

Code:: <body> <div id="page-header" class="bgrd4"> <div class="headerbar"> [...] </div> </div> </body>

ETC.

Ainsi, je pourrai via les css appliquer diverses images

Code:: #page-header.bgrd1 { background-image: url('http://www.url.com/photo1.jpg'); } #page-header.bgrd2 { background-image: url('http://www.url.com/photo2.jpg'); } #page-header.bgrd3 { background-image: url('http://www.url.com/photo3.jpg'); } #page-header.bgrd4 { background-image: url('http://www.url.com/photo4.jpg'); } etc.

Précisons que pour le moment, le div "page-header" n'a pas d'attribut class, le code doit donc prévoir :
- 1. de lui attribuer une .class
- 2. de faire varier aléatoirement cette .class à chaque refresh (disons 7 images différentes seraient bien, donc d'insérer dans ce code une liste de class prédéfinies qui seront choisies aléatoirement au refresh "bgrd1 | bgrd2 |bgrd3 | bgrd4 |bgrd5 | bgrd6 | bgrd7")

Je ne sais pas si c'est plus clair comme ça ... J'aurais dû directement l'exposer comme ça mon problème en fait Surprised

par papa pig Sam 28 Oct 2017 - 13:53

Bon, je me documente, concernant une partie de réponse,
il semblerait qu'il faille utiliser un code qui ressemble à ça pour ajouter une classe à un div identifié.
Ce qui donnerait dans mon exemple précédent :

Code:: var d = document.getElementById("page-header"); d.className += " bgrd1";

Mais je sais que ce simple morceau de code ne suffit pas, il doit être "entouré", et je ne sais pas avec quoi ...

par Adam_sfp Sam 28 Oct 2017 - 20:53

Bonsoir

Vous pouvez garder le même script et passer par la gestion des codes javascript et utiliser la méthode
Append Prepend etc..
qui va vous permettre d'insérer l'id test

Code:: <img id="test" />

De cette manière par exemple

Code:: $(".navbar").after('<img id="test" />');

vous devez bien sur essayez en testant les différentes méthodes et d'autres id ou class de votre page ce qui correspond le mieux à ce que vous voulez faire...
Au final le code n'est pas beaucoup plus grand Wink

Code:: $("document").ready(function() { $(".navbar").after('<img id="test" />'); var image = new Array; image[0] = "https://placeimg.com/350/100/nature/sepia"; image[1] = "https://placeimg.com/350/100/people/sepia"; image[2] = "https://placeimg.com/350/100/people/sepia"; var size = image.length; var x = Math.floor(size * Math.random()); jQuery("#test").attr("src", image[x]); });

Cdt

par papa pig Dim 29 Oct 2017 - 0:35

Bonsoir, merci beaucoup pour cette proposition qui me servira certainement pour d'autres projets, mais dans le cas précis ça ne correspond pas à la solution. Mais merci sincèrement.
J'en profite donc pour réitérer mon souhait de base : quelqu'un sait-il comment avec un code JS attribuer une class à un div existant ? merci
Exemple :
Avant

Code:: <div id="page-header"> <div id="contenu"> <p> ... </p> </div> </div>

Après

Code:: <div id="page-header" class="bonjour"> <div id="contenu"> <p> ... </p> </div> </div>

Merci

par Adam_sfp Dim 29 Oct 2017 - 8:43

Bonjour

J'ai un peu de mal à vous suivre Wink

papa pig a écrit:
Est-ce qu'il existe d'après vous une solution pour coder quelque chose qui permette au div #page-header d'afficher aléatoirement une image à partir bien entendu d'une liste d'url.

Il me semble que le code donné plus haut fait ceci....

Pour ajouter une class

Code:: .addClass( className )

.addclass

Cdt

par papa pig Dim 29 Oct 2017 - 10:43

Merci @Adam_sfp de m'avoir aidé $Clin d\'oeil$ j'ai résolu mon problème en cherchant dans des sites spécialisés comment fonctionne jquery, et quelques exemples. Il faut que je continue à me renseigner sur JS/Jquery, car dépendre trop des autres c'est assez énervant.

Le code qui solutionne mon problème, pour ceux que ça intéresse :

Code:: $(document).ready(function(){ var classes = ["bgrd1", "bgrd2", "bgrd3", "bgrd4", "bgrd5", "bgrd6", "bgrd7"]; $("#page-header").each(function(){ $(this).addClass(classes[~~(Math.random()*classes.length)]); }); });

Merci pour avoir porté de l'intérêt à ma demande

Aide / background aléatoire header - code, astuce, css...