Building an array of images using jquery

Hi

I want to create an array of images and then randomly select one.
I have a list of images on a page all with the class called "backgrounds". i want to be able to count the number of all images with that class, grab the name of each via the src attribute of the image and then randomly select one.

How can i do this with jquery?

thanks
coolispaulAsked:
Who is Participating?
 
hankknightCommented:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	var randomImage = $('.backgrounds:eq('+ Math.floor(Math.random() * $('.backgrounds').length) +')').first().attr('src') ;
	$('#r').attr('src', randomImage);
	alert(  randomImage  );

});
</script>

<style type="text/css">
</style>

</head>
<body>

<p>
<img id="r" alt="" />
</p>

<div id="xyz">
 <p>
  <hr />
  <img class="backgrounds" src="http://img.wikinut.com/img/6gdq-ijio4ge9uvb/jpeg/preview/http%3A-upload.wikimedia.org-wikipedia-en-6-63-Mona.jpeg" alt=""/>
  <img class="backgrounds" src="http://upload.wikimedia.org/wikipedia/commons/7/75/Animated_flower_frame_57.gif" alt=""/>
  <img class="backgrounds" src="http://upload.wikimedia.org/wikipedia/commons/9/94/%E5%B9%B4-order.gif" alt=""/>
  <img class="backgrounds" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRqfgKJt7-Gn8lDZP3iKxj4IJv4-HcXqrQRxXJaloXiNLU6QUH_6bV2wA" alt=""/>
  <img class="backgrounds" src="http://upload.wikimedia.org/wikipedia/commons/b/be/Dress-P2.png" alt=""/>
 </p>
</div>

</body>
</html>

Open in new window

0
 
strickddCommented:
Use the selector based on the class "backgrounds":

http://api.jquery.com/class-selector/

var myArrayOfBackgrounds = $(".backgrounds");
var lengthOfArray = myArrayOfBackgrounds.length;

var randomnumber=Math.floor(Math.random()*lengthOfArray );

var myNewBg = myArrayOfBackgrounds[randomnumber];
0
 
hankknightCommented:
Here is a variation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	var randomImage = $('.backgrounds:eq('+ Math.floor(Math.random() * $('.backgrounds').length) +')').attr('longdesc') ;
	$('body').css('background', 'red url('+randomImage+') repeat scroll 0 0');

});
</script>

<style type="text/css">
</style>

</head>
<body>
&nbsp;
<div id="xyz" style="display: none">
  <img class="backgrounds" longdesc="http://img.wikinut.com/img/6gdq-ijio4ge9uvb/jpeg/preview/http%3A-upload.wikimedia.org-wikipedia-en-6-63-Mona.jpeg" alt=""/>
  <img class="backgrounds" longdesc="http://upload.wikimedia.org/wikipedia/commons/7/75/Animated_flower_frame_57.gif" alt=""/>
  <img class="backgrounds" longdesc="http://upload.wikimedia.org/wikipedia/commons/9/94/%E5%B9%B4-order.gif" alt=""/>
  <img class="backgrounds" longdesc="http://t3.gstatic.com/images?q=tbn:ANd9GcRqfgKJt7-Gn8lDZP3iKxj4IJv4-HcXqrQRxXJaloXiNLU6QUH_6bV2wA" alt=""/>
  <img class="backgrounds" longdesc="http://upload.wikimedia.org/wikipedia/commons/b/be/Dress-P2.png" alt=""/>
</div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.