Randomize background image and fade it in ?

Randomize a background image then fade it in using jQuery .

Page 1 of 1

4 Replies - 6720 Views - Last Post: 10 June 2010 - 08:03 PM

#1 the.et  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-June 10

Randomize background image and fade it in ?

Posted 09 June 2010 - 10:16 PM

Hi , I'm kidda new here . I just bought a domain and started working on my site . I came out with a great idea that my website background image will keep changing .

But i am stuck with with the javascript code that will randomize the background images that i set then insert it into a jQuery script that will fade the randomized image in to my website background .

Here's my idea map :
Javascript:randomly pick a image > insert into jQuery fade in script > jQuery fades in the image .

User will get to see different image when the refresh or each time they visit my website .

Here's the jQuery image fade in script 
<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:1680px; height:1050px; display:none;}
      div#image { background:url(image.jpg); }
    </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div id="image"></div>
<script>
      $(document.div).ready(function () {
        $("div#image").fadeIn(1500);
      });
    </script>
</body>
</html>


I just want to know anybody knows how to random pick and insert the image into a jQuery script .

Thanks .
Have a wonderful day ! :D

Is This A Good Question/Topic? 0
  • +

Replies To: Randomize background image and fade it in ?

#2 the.et  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-June 10

Re: Randomize background image and fade it in ?

Posted 10 June 2010 - 03:24 AM

anyone?
Was This Post Helpful? 0
  • +
  • -

#3 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Randomize background image and fade it in ?

Posted 10 June 2010 - 05:07 AM

I'm amateur at best but the solution would be to place those pictures in an array and random it out.

I don't know how to do it though...but I hope these gives you an idea to further research into javascript / php random array.
Was This Post Helpful? 0
  • +
  • -

#4 the.et  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-June 10

Re: Randomize background image and fade it in ?

Posted 10 June 2010 - 06:04 AM

Thanks for the reply , ain't what i expected . I have done research on the random and array in php & javascript too .Came out nothing suits my idea. I just want to know how to randomize , INSERT into the jQuery , jQuery diplay it (fade it in)
Was This Post Helpful? 0
  • +
  • -

#5 aklo  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 229
  • Joined: 23-January 09

Re: Randomize background image and fade it in ?

Posted 10 June 2010 - 08:03 PM

Unfortunately I am unable to get the fade in effects out but randomizer then image everytime the page is refreshed, I did it after about 1 hour of researching...attaching fadeIn() function to the jquery code won't work...so you still got to find another way to do it. At least I could use this on my current school project too.

There is a catch, you have to manually place the images name in the array as below.

If you notice, my array starts with a 1 but it doesn't matter in this case, the minumum random number will be 1 and max will be 3. You got to adjust it accordingly.

So if you have 10 images, change this part to :

var rnd = Math.floor(Math.random()*10 + 1)

  <script>
  	
	var clr = new Array();
	clr[1]="text2816.png";
	clr[2]="aboutprogramming04.jpg";
	clr[3]="ss80-hires.jpg";

	var rnd = Math.floor(Math.random()*3+1);
	
        $(document).ready(function () {
	   $("body").css("background-image", "url(images/" + clr[rnd] + ")");
        });

	</script>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1