Background aléatoire JQuery

max02100 · Le 06/02/2013, à 22:52

Bonsoir à tous, je bosse actuellement sur mon petit site et perso et je suis parti sur un background aléatoire en jquery.
J'ai donc codé ce petit script

var images = ['/var/www/MediaLink/background/1.jpg', '/var/www/MediaLink/background/2.jpg', '/var/www/MediaLink/background/3.jpg', './/var/www/MediaLink/background/4.jpg'];
$('body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

Cependant, cela n'affecte pas du tout mon background qui reste blanc malgré le chargement de jquery et du script en question

<!DOCTYPE html>
<html lang="fr"> 
  <head> 
    <meta charset="UTF-8">
    <title>CV en ligne</title>
	
	<!-- meta -->
    <meta name="MediaMax" content="">
 
    <!-- mon icon -->
    <link rel="shortcut icon" href="favicon.ico">
	
	<!-- mon template.css -->
    <link rel="stylesheet" href="index.css" type="text/css"  media="screen">
    
	<!-- importation de jquery -->
    <script type="text/javascript" src="script/jquery.js"></script>
    
	<!-- importation des scripts -->
	<script type="text/javascript" src="script/activebg.js"></script>
	
  </head>
  		<body>

Si quelqu'un à la réponse à ma solution ca serait magnifique

Maisondouf · Le 07/02/2013, à 01:10

c'est pas plutôt ça la syntaxe de css()...

$('body').css('background', "url('monimage.png')");

Hésites pas à mixer le ' et les " pour faciliter la compréhension par le navigateur.

Pour toi ça devrait donner à peu près ça:

$('body').css('background-image', "url(images/" + images[Math.floor(Math.random() * images.length)] + ")");

max02100 · Le 07/02/2013, à 09:01

hé bien corrigé selon tes dires en changeant images/ en background/ car mes images sont dans un dossier background et ca ne marche pas non plus

var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
$('body').css('background-image', "url(background/" + images[Math.floor(Math.random() * images.length)] + ")");

Maisondouf · Le 07/02/2013, à 11:02

Ton code est placé où par rapport à la balise <body> ?

max02100 · Le 07/02/2013, à 11:25

alors mon code jquery est placé dans un fichier activebg.js qui lui est appelé dans mon head de l'index.php.
Le scripte est rangé dans un dossier script

Maisondouf · Le 07/02/2013, à 11:29

Tu mets ton tableau dans le <head>

<script type="text/javascript">
var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
</script>

Et ton code juste avant la fermeture de </body>

<script type="text/javascript">
$(document).ready(function(){ 
  var num=Math.floor(Math.random() * images.length);
  $('body').css('background-image', "url('images/" + images[num] + "')");
});
</script>

EDIT : ça marche très bien chez moi : http://home.maisondouf.fr/body-pic.php

Dernière modification par Maisondouf (Le 07/02/2013, à 11:32)

max02100 · Le 07/02/2013, à 14:14

en effet ca marche mais pourquoi mon ancien script marche pas alors que c'est le meme ???

Maisondouf · Le 07/02/2013, à 15:29

À cause de çà

"url(' ..... ')"

Tu n'avais pas d'apostrophes pour encadrer l'url.

"url(background

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 06/02/2013, à 22:52

Background aléatoire JQuery

#2 Le 07/02/2013, à 01:10

Re : Background aléatoire JQuery

#3 Le 07/02/2013, à 09:01

Re : Background aléatoire JQuery

#4 Le 07/02/2013, à 11:02

Re : Background aléatoire JQuery

#5 Le 07/02/2013, à 11:25

Re : Background aléatoire JQuery

#6 Le 07/02/2013, à 11:29

Re : Background aléatoire JQuery

#7 Le 07/02/2013, à 14:14

Re : Background aléatoire JQuery

#8 Le 07/02/2013, à 15:29

Re : Background aléatoire JQuery

Pied de page des forums