RYN RYN - 29 days ago 9
Javascript Question

Random image service

I need to show a random image (in some particular category or tag(s) ) on my webpage.

Is there such services that make me able to fetch random images from them by php or javascript?

I know some but their repository is very small.

Answer

Problem:

I need to show a random image (in some particular category or tag(s) ) on my webpage.

Solution:

You can use setInterval() and random() methods to achieve random image rotation in javascript. The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds), and random() method returns a random number between 0 (inclusive) and 1 (exclusive). Let me explain how this rotation thing works. (Tested)

Suppose you have four images, like this:

  • firstimage.png
  • secondimage.png
  • thirdimage.png
  • fourthimage.png

HTML

This is a simple image tag to display the image

<!--display an image initially-->
<img id="myImage" src="firstimage.png" />

JAVASCRIPT

First get the id of image tag

// Get the id of image tag
var myImage = document.getElementById("myImage");

Then store the path of all the images in an array, like this:

// store the path of all the images in an array
var imageArray = ["firstimage.png", "secondimage.png", "thirdimage.png", "fourthimage.png"];

Then write a function to rotate the image in equal interval of time, like this:

// function to rotate images after specified interval(3 seconds in this case)
function imageRotation(){
    // since we have four images hence we've taken 4 as a multiplier to get random number between 0 and 3
    var imageIndex = Math.floor(Math.random() * 4); 

    // set appropriate attribute
    myImage.setAttribute("src", imageArray[imageIndex]);
}

Note that the above imageRotation() function uses random() function to generate random number between 0 and 3, and it decides which image is going to be selected next.

Now call the setInterval() function with appropriate parameters, like this:

// imageRotation will be called in every 3 seconds
var everyInterval = setInterval(imageRotation, 3000);

Sidenote: The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed. So to stop this at any point of time, we have clearInterval() function. For example, if you want a behaviour where, when the user hovers his/her mouse over an image, the rotation will stop, then you can do something like this:

// when the user hovers his/her mouse over an image, the rotation will stop
myImage.onhover = function(){
    clearInterval(everyInterval);
} 

Here's the complete working code,

<html>
<head>
    <title>Page Title</title>
</head>

<body>

    <!--set an image initially-->
    <img id="myImage" src="firstimage.png" />

<script>
    window.onload = function(){

        // Get the id of image tag
        var myImage = document.getElementById("myImage");

        // store the path of all the images in an array
        var imageArray = ["firstimage.png", "secondimage.png", "thirdimage.png", "fourthimage.png"];

        // function to rotate images after specified interval(3 seconds in this case)
        function imageRotation(){
            // since we have four images hence we've taken 4 as a multiplier to get random number between 0 and 3
            var imageIndex = Math.floor(Math.random() * 4); 

            // set appropriate attribute
            myImage.setAttribute("src", imageArray[imageIndex]);
        }

        // imageRotation will be called in every 3 seconds
        var everyInterval = setInterval(imageRotation, 3000);

        // when the user hovers his/her mouse over an image, the rotation will stop
        myImage.onhover = function(){
            clearInterval(everyInterval);
        }

    };
</script>
</body>
</html>

Edited:

Problem:

Is there such services that make me able to fetch random images from them by php or javascript?

Solution:

To get large repository of images you can either use TinEye API, flickr API or BOSS Search API. Google's API is officially deprecated as of November 1, 2010.