Search jQuery

jQuery Forum

Getting a random picture to display

in Using jQuery • 11 years ago

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>

Replies(7)

emtwis

Re: Getting a random picture to display

11 years ago

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:

<!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"

for (i = 0; i < 1; i++) {
var ranPic=Math.floor(Math.random()*images.length)
if (ranPic==0)
ranPic=1
            $("#words").fadeOut('300',function(){
            $("#words").load(images[ranPic], function(){
            $("#words").fadeIn('400');
            })})
}
}

randomImage()

</script>
</head>

<body>

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

rminde

Re: Getting a random picture to display

11 years ago

i am missing the image-tag that loads the image.
you create some code that looks as following:

<div id="words">images/106.jpg</div>

but you need to create this kind of code:

<div id="words"><img src="images/106.jpg"></div>

rminde

Re: Getting a random picture to display

11 years ago

i am missing the image-tag that loads the image.
you create some code that looks as following:

<div id="words">images/106.jpg</div>

but you need to create this kind of code:

<div id="words"><img src="images/106.jpg"></div>

emtwis

Re: Getting a random picture to display

11 years ago

Ah yes, thanks!! 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!

<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>

solineoz

Re: Getting a random picture to display

11 years ago

Hi emtwis,
this code should do the trick, but this is not the best :)

function changeImg(min, max) { // create the function for changing the images
var noi = max - min; // number of images
var numRand = Math.floor(Math.random() * noi) + min; // randomized number
$("#banner").find("img").attr('src','pages/gallery/PhotoWall/images/' + ""+ numRand +"" + '.jpg'); // set a new image
}
$(function() { // Waiting for the DOM ready
setInterval(function(){ // create an interval (loop)
changeImg(101, 120); // the function with paramteters
},1000); // the interval in millisecondes --> 1000 = 1 second
});

- Solineoz -

Tom Roth

Re: Getting a random picture to display

6 years ago

I know this is an old thread but I am trying to do the same thing. Did anyone ever get this to work? I'm need to pull a random image from over 200 images so loading them all is not possible. Need something that will pull one randomly and then after a few seconds load another image. The javascript I have now requires reload the whole web page to get the image to reload.