Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

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
0
coolispaul
Asked:
coolispaul
  • 2
3 Solutions
 
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:
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now