Random Images on Page Load
Published October 25, 2013 | Categories: Cascade CMS
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.
$(‘.shuffle’).randomImage();
//or to change the default path
$(‘.shuffle’).randomImage({path: ‘myOtherPath/’});
Source: robwalshonline.com
Recent Posts
