Question

I am making a photo gallery using jQuery and I want to have a button to display a random picture taken from the ones in the album. This picture should change every time the user clicks on the button. I have this code but every time I press the button I have the div#images fulling with the images instead of each one every time.

<script>
        $('button').on('click', function() {
            $.getJSON('images.json', function(data) {
                imageList = data;               
            });
            $('#images').append('<img src=' + imageList[Math.floor(Math.random() * imageList.length) + 1].img_src + '>').;  
        });
</script>

As you can see I read the images from a JSON file and randomize from 1 to the length of the file. Any suggestions would be helpful. Thank you in advance.

Answer 1

You need to clear the image div before adding the new image otherwise the images will keep adding.

  <script>
            $('button').on('click', function() {
                $.getJSON('images.json', function(data) {
                    imageList = data;  
                    //Also, move the code inside getJson(). getJson is asynchronous.
                    //Clear the images HTML
                    $('#images').empty();
                    $('#images').append('<img src=' + imageList[Math.floor(Math.random() * imageList.length) + 1].img_src + '>').;               
                });
            });
    </script>

Just wondering : Why don’t you retrieve 1 random image via json call, instead of fetching all the images and then choosing one (Write the randomization code at the server) ?