Image fixe dans bannière puis rendre aléatoire

[Verlinovation]

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);
});


[Toryudo]

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] + ")");
    }
});

[Verlinovation]

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.

[Toryudo]

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

[Verlinovation]

Merci beaucoup, Toryudo !

[Toryudo]

Afin 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