Image fixe dans bannière puis rendre aléatoire

2 participants

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

Résolu Image fixe dans bannière puis rendre aléatoire

Message par Verlinovation Ven 19 Mai 2023 - 18:50

Détails techniques


Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 19-05-2023
Lien du forum : https://blendertribu.forumactif.com

Description du problème

Bonjour,

Suite à plusieurs demandes, on souhaiterai que je fasse en sorte que la bannière, qui accueille des rendus image, ait la particularité suivante:

Quand on se connecte une première fois sur le site, il faudrait qu'une image précise soit affichée, de manière constante.

Quand on fait un refresh/changement de page, il faudrait basculer en mode "aléatoire", comme c'est déjà le cas grâce au code-ci dessous.

Pouvez-vous m'aider ?

Code:

$(function() {
  var duration = 60;
  
  var a = [
    "https://zupimages.net/up/23/19/doqr.jpg",
    "https://zupimages.net/up/23/19/pw0g.jpg",
    "https://zupimages.net/up/23/11/8n98.jpg",
    "https://zupimages.net/up/23/16/ytd1.jpg"
  ];
  
  b=function(){
    $("#page-header .headerbar").css("background-image","url(" + a[Math.floor(Math.random()*a.length)] + ")")};b();setInterval(b,duration*1000);
});


Dernière édition par Verlinovation le Sam 27 Mai 2023 - 9:11, édité 1 fois
Verlinovation

Verlinovation
**

Messages : 56
Inscrit(e) le : 14/06/2022

https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image fixe dans bannière puis rendre aléatoire

Message par Toryudo Sam 20 Mai 2023 - 8:40

Bonjour !

Est-ce que vous pourriez définir "première fois" ? Est-ce que vous parlez de la première fois de la journée, de la première fois de la session, ou de la véritable première fois et plus jamais ensuite ?

Je vais partir du principe que c'est la toute toute première fois uniquement. Voici le script corrigé qui permet de faire ça : il affiche la première image (premier lien que vous avez listé dans a, qui ne marche pas d'ailleurs, mais ce n'est pas grave, vous pourrez le remplacer) la première fois, et devient aléatoire toutes les fois suivantes. Si vous videz le cache de votre navigateur, il ré-affichera la première url la première fois, puis sera à nouveau aléatoire les fois suivantes.

Code:
var aleaval = localStorage.getItem('alea');

$(function() {
    var duration = 60;

    var a = [
        "https://zupimages.net/up/23/19/doqr.jpg",
        "https://zupimages.net/up/23/19/pw0g.jpg",
        "https://zupimages.net/up/23/11/8n98.jpg",
        "https://zupimages.net/up/23/16/ytd1.jpg"
    ];

    b = function() {
        $("#page-header .headerbar").css("background-image", "url(" + a[Math.floor(Math.random() * a.length)] + ")");
    };
   
    if (aleaval){
        b();
        setInterval(b, duration * 1000);
    } else {
        localStorage.setItem('alea', 'true');
        $("#page-header .headerbar").css("background-image", "url(" + a[0] + ")");
    }
});
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1459
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image fixe dans bannière puis rendre aléatoire

Message par Verlinovation Lun 22 Mai 2023 - 10:18

Bonjour,

Oui, c'est vrai, je ne l'ai pas précisé: la première fois par session. Donc si je vais sur le site une première fois et que j'y retourne 5h plus tard, l'image désirée doit être montrée une première fois puis on bifurque sur le mode aléatoire, qui contient elle aussi cette image.

Étant donné que c'est un forum dans le secteur créatif, on veut mettre en évidence le rendu le plus récent.
Verlinovation

Verlinovation
**

Messages : 56
Inscrit(e) le : 14/06/2022

https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image fixe dans bannière puis rendre aléatoire

Message par Toryudo Lun 22 Mai 2023 - 16:07

Dans ce cas, on part sur un sessionStorage, comme ceci :
Code:
var aleaval = sessionStorage.getItem('alea');
 
$(function() {
    var duration = 60;
 
    var a = [
        "https://zupimages.net/up/23/19/doqr.jpg",
        "https://zupimages.net/up/23/19/pw0g.jpg",
        "https://zupimages.net/up/23/11/8n98.jpg",
        "https://zupimages.net/up/23/16/ytd1.jpg"
    ];
 
    b = function() {
        $("#page-header .headerbar").css("background-image", "url(" + a[Math.floor(Math.random() * a.length)] + ")");
    };
   
    if (aleaval){
        b();
        setInterval(b, duration * 1000);
    } else {
        sessionStorage.setItem('alea', 'true');
        $("#page-header .headerbar").css("background-image", "url(" + a[0] + ")");
    }
});

Pour les précisions du fonctionnement, voici les explications https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage :
Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1459
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image fixe dans bannière puis rendre aléatoire

Message par Verlinovation Ven 26 Mai 2023 - 9:10

Merci beaucoup, Toryudo !
Verlinovation

Verlinovation
**

Messages : 56
Inscrit(e) le : 14/06/2022

https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image fixe dans bannière puis rendre aléatoire

Message par Toryudo Ven 26 Mai 2023 - 17:52

Image fixe dans bannière puis rendre aléatoire MHDoUixAfin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu et enregistrer
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Image fixe dans bannière puis rendre aléatoire UsrblLM
Toryudo

Toryudo
Aidactif
Aidactif

Masculin
Messages : 1459
Inscrit(e) le : 31/03/2020

https://deus-academia.forumactif.com/
Toryudo a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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