Random Images on Page Load

Est. Reading Time: 1 minute

If you need to rotate random images on page load each time, there is a simple way to do it with javascript. The below will take you through the steps on how to achieve the effect.

1. Create the folder you would like to pull the dynamic images from.

2. Add in the image tag and a class or ID, like: <img class=”shuffle” alt=”” />

3. Set your script inside the head tag of your page. You can set your own preference for the folder location and image file names you want to rotate

//you can change these defaults to your own preferences.

path: ‘images/’, //change this to the path of your images

myImages: [‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’, image4.jpg’, ‘image5.jpg’ ] //put image names in this bracket. ex: ‘harold.jpg’, ‘maude.jpg’, ‘etc’

4. Last step is to call the script function to have it begin rotate. The first one below is using the path in the script, or you can call the folder in the call below in the second call example below.


//or to change the default path

$(‘.shuffle’).randomImage({path: ‘myOtherPath/’});

Source: www.robwalshonline.com

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
Load More Posts