Getting a random picture to display

**emtw** · 03-12-2012, 05:57 AM

Hi, I'm trying to get it so that a random picture displays from a gallery file one at a time. I'm probably making a basic syntax error somewhere as I'm fairly new to JavaScript/jQuery, but please can someone help? I can't get a picture to display in the div at all. Any help would be great, thanks!!

N.B. the pictures are called e.g. 101.jpg, 102.jpg - so I thought a random number generator would be best to get a random picture.

<script>

$(document).ready(function generatePic(){

function randomPicture() {

var min=101;
var max=120;

var picture=Math.floor(Math.random()*(max-min+1))+min;

}

function bannerDisplay(){
$("#banner").fadeOut('400',function(){
$("#banner").load("pages/gallery/PhotoWall/images/'$picture'.jpg", function(){
$("#banner").fadeIn('600', randomPicture())
})})}

bannerDisplay();

}
)

</script>

<div id="banner"></div>

**emtw** · 03-12-2012, 05:58 AM

Sorry - the code is:

<script>

$(document).ready(function generatePic(){

function randomPicture() {

var min=101;
var max=120;

var picture=Math.floor(Math.random()*(max-min+1))+min;

}

function bannerDisplay(){
$("#banner").fadeOut('400',function(){
$("#banner").load("pages/gallery/PhotoWall/images/'$picture'.jpg", function(){
$("#banner").fadeIn('600')
})})}
})

generatePic();

</script>

<div id="banner"></div>

**emtw** · 03-12-2012, 07:40 AM

I've been playing around with this a bit, and have tried using arrays - now I can get something to appear in the div, but it looks like this:
�V��$��F��Ⱦ36�H�W��/+�N�FC�C b8͔��@�5^��
etc... so I assume it is pulling it up in the wrong format or something? Also, the image isn't changing, it only changes when I refresh the page - am I not calling the function back correctly?
Any help on how to correct this would be much appreciated, thanks!!

New code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title></title>
	<script>

function randomImage(){
var images=new Array()

images[1]="images/101.jpg"
images[2]="images/102.jpg"
images[3]="images/103.jpg"
images[4]="images/104.jpg"
images[5]="images/105.jpg"
images[6]="images/106.jpg"
images[7]="images/107.jpg"
images[8]="images/108.jpg"
images[9]="images/109.jpg"
images[10]="images/110.jpg"
images[11]="images/111.jpg"
images[12]="images/112.jpg"
images[13]="images/113.jpg"
images[14]="images/114.jpg"
images[15]="images/115.jpg"
images[16]="images/116.jpg"
images[17]="images/117.jpg"
images[18]="images/118.jpg"
images[19]="images/119.jpg"
images[20]="images/120.jpg"


var ranPic=Math.floor(Math.random()*images.length)

			$("#words").fadeOut('300',function(){
			$("#words").load(images[ranPic], function(){
			$("#words").fadeIn('400');
			})})
}


randomImage();

</script>
</head>

<body>

<div id="words"></div>
</body>
</html>

**hyperionXS** · 03-12-2012, 07:42 AM

First of all, use tabs in your code

Code:

<script>
$(document).ready(function(){
	
	function randomPicture() {
		var min=101;
		var max=120;
		var picture=Math.floor(Math.random()*(max-min+1))+min;
		return picture;
	}

	function bannerDisplay(){
		$("#banner").fadeOut('400',function(){
			$("#banner").load("pages/gallery/PhotoWall/images/"+randomPicture()+".jpg", function(){
				$("#banner").fadeIn('600')
			})
		})
	}
	
	bannerDisplay();
})

</script>
<div id="banner"></div>

Haven't tested it, but you should make an ideea

**emtw** · 03-12-2012, 07:52 AM

Hi,

Thanks for that - sorry about tabs, think it copied and pasted funny from my editor.

I have tried using that code, and it appears to be pulling something into the div - however, all that appears is lots of garble like this:

3r��$�%CS��+!1QA"2Raq�#3B��

So I am assuming it is interpreting the image as a string or something? How can I get just the image to appear?

Thanks!!

**hyperionXS** · 03-12-2012, 08:03 AM

Yes, sorry, as I said, I haven't tested it. Here is an working code

Code:

	function bannerDisplay(){
		$("#banner").fadeOut('400',function(){
			var img = new Image()
			var imageSrc = "pages/gallery/PhotoWall/images/"+randomPicture()+".jpg";
			$(img).load(function(){
				$("#banner").html('').append($(this)).fadeIn('600');
			}).attr('src', imageSrc);
		})
	}

**emtw** · 03-12-2012, 08:35 AM

Thanks so much - sorry I'm fairly new at all of this so I don't know how to do all of that!

Got this now - but problem is that now nothing displays in the div at all - if I remove the bannerGen function completely then a picture does display in the div, but I need the picture to change, about every 4 seconds - how do I do this!? Use a timeout or a pause or something? I need to be able to get the bannerGen function to loop indefinately.

Thanks for your help!

Code:

    <script>
    $(document).ready(function(){

        function bannerGen() {

        function randomPicture() {
            var min=101;
            var max=120;
            var picture=Math.floor(Math.random()*(max-min+1))+min;
            return picture;
        }

        function bannerDisplay(){
            $("#banner").fadeOut('400',function(){
                var img = new Image()
                var imageSrc = "pages/gallery/PhotoWall/images/"+randomPicture()+".jpg";
                $(img).load(function(){
                    $("#banner").html('').append($(this)).fadeIn('600');
                }).attr('src', imageSrc);
            })
        }
        }
        bannerGen();
    )})

    </script>
    <div id="banner"></div>

**hyperionXS** · 03-12-2012, 08:47 AM

Pay attention to my previous post http://www.webdeveloper.com/forum/sh...41&postcount=4
Look at the the red lines.

**emtw** · 03-12-2012, 08:53 AM

That code does get a random image to appear where I want it to - but I need the image to refresh every 4 seconds or so and I don't know how to get the whole function to cycle after this time frame. I'm fairly new to JS/jQ, so I apologise if this is a fairly noob question - I don't fully understand the code you have written enough to edit it myself. Thank you :0)

**hyperionXS** · 03-12-2012, 08:57 AM

Ok, here is the complete code

Code:

$(document).ready(function(){
	
	function randomPicture() {
		var min=101;
		var max=120;
		var picture=Math.floor(Math.random()*(max-min+1))+min;
		return picture;
	}

	function bannerDisplay(){
		$("#banner").fadeOut('400',function(){
			var img = new Image()
			var imageSrc = "pages/gallery/PhotoWall/images/"+randomPicture()+".jpg";
			var imageSrc = "auto2moto.png";
			$(img).load(function(){
				$("#banner").html('').append($(this)).fadeIn('600');
			}).attr('src', imageSrc);
		})
	}
	
	bannerDisplay();
	window.setInterval(bannerDisplay, 2000);
})

2000 means 2 seconds. Set whatever value you want

**emtw** · 03-12-2012, 09:17 AM

Thanks so much for your help!! It's working great now, thanks :0)

- although - this line somehow found its way in there:
var imageSrc = "auto2moto.png";

but once that was removed it worked great lol!

**hyperionXS** · 03-12-2012, 09:22 AM

Yes, sorry, that was mine. Instead of creating directory "pages/gallery/PhotoWall/images/ I put a fake image, so I can see it.
Glad it works as expected.

Thread: Getting a random picture to display

Thread Tools

Display

Getting a random picture to display

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions