Header avec images aléatoires

[KitsuHG]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,
Impossible de créer un header avec des images aléatoires, j'ai beau suivre les tutos, ça ne fonctionne pas soit les images dépasses du header, soit les images ne s'affichent tout simplement pas ... Peut être du à la version des tutoriels qui ne correspondent pas avec ma version du forum ...

J'ai bien activé la gestion des JS et tout ...

Un code fonctionnel à me suggérer, merci ...

[KitsuHG]

PS : https://forum.forumactif.com/t223082-banniere-aleatoire-ou-defilante
Ce tuto officiel n'est pas compatible avec ma version ...

[chattigre]

Bonjour,

Vous souhaitez une bannière aléatoire, c'est bien cela et non une bannière défilante ?

Essayez ce JS pour agir sur l'image de fond du header

Attention à prendre des images aux dimensions appropriées !

Code:

$(function() {
  var a = [
    "https://adresse1",
    "https://adresse2",
    "https://adresse3",
  ];
 
  $("#page-header .headerbar").css("background-image", "url("+a[Math.floor(Math.random() * a.length)]+")")
});

Cordialement

[KitsuHG]

Top merci ! Comment faudrait t'il faire pour que les images s'affichent en entière dans le header ?

[chattigre]

Bonjour,

Qu'est ce que vous appelez "en entier" ? Il y a plusieurs possibilités :
- On étire l'image pour qu'elle remplisse tout le cadre, mais ses bords sont coupés pour conserver les proportions.
- On déforme l'image pour qu'elle soit entièrement contenue dans le cadre ET qu'elle remplisse tout l'espace (pas très beau souvent )
- On fait rentrer l'image dans le cadre entièrement tout en conservant ses proportions et le reste de la zone disponible est laissé vide.

Avez-vous les adresses des images que vous souhaitez utiliser, éventuellement entre balises hide si vous préférez ?

Bonne journée

[KitsuHG]

Bonjour,

Qu'est ce que vous appelez "en entier" ? Il y a plusieurs possibilités :
- On étire l'image pour qu'elle remplisse tout le cadre, mais ses bords sont coupés pour conserver les proportions.
- On déforme l'image pour qu'elle soit entièrement contenue dans le cadre ET qu'elle remplisse tout l'espace (pas très beau souvent )
- On fait rentrer l'image dans le cadre entièrement tout en conservant ses proportions et le reste de la zone disponible est laissé vide.

Avez-vous les adresses des images que vous souhaitez utiliser, éventuellement entre balises hide si vous préférez ?

Bonne journée

Bonsoir !
Merci de ta réponse, voici deux images potentiels, j'en rajouterais surement par la suite !$

`

Merci encore !

[chattigre]

Bonjour,

je vois...

Vu l'organisation de l'image, ça ne pourra pas être parfait...

On peut essayer de prioriser l'affichage du coin droit en bas, si l'écran est trop petit c'est le haut et le côté gauche (avec les blasons) qui seront masqués...

Ajoutez ceci à votre CSS :

Code:

.headerbar {
  background-position: right-bottom;
}

Ca devrait déjà être un peu mieux...

Bonne journée

[KitsuHG]

Bonjour,

je vois...

Vu l'organisation de l'image, ça ne pourra pas être parfait...

On peut essayer de prioriser l'affichage du coin droit en bas, si l'écran est trop petit c'est le haut et le côté gauche (avec les blasons) qui seront masqués...

Ajoutez ceci à votre CSS :

Code:

.headerbar {
  background-position: right-bottom;
}

Ca devrait déjà être un peu mieux...

Bonne journée

Ah ouais l'image est coupée, y'a pas moyen de faire en sorte que la headerbar s'agrandissent automatiquement en fonction de la taille des images ?

[chattigre]

Oups, j'ai fait une faute de frappe

Essayez comme ça, et dites-moi si vous voulez toujours agrandir le header. Là, il ne servait à rien du tout...

Code:

.headerbar {
  background-position: right bottom;
}

Bonne soirée

[KitsuHG]

Parfait ! C'est tout bon ! Encore merci à toi pour ton aide ...