function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

how to add multiple images in vf page


i have a vf page and 4 images. i want to add the functionality  that the images will change after every 5 seconds.
for this i am using javascript and for this i need to add all the images in array so that images changes automatically.

Need help in this.
I am posting the  code including javascript which i am using:

<apex:page sidebar="false" standardStylesheets="true">
<apex:form >
<table width="1000" align="center" border="1">
<tr><td><apex:image url="{!$Resource.Test1}" width="1000" height="500" id="MyImage" />
<script type="text/javascript">
(function() {
    var rotator = document.getElementById('MyImage');  // change to match image ID
    var imageDir = 'images/';                          // change to match images folder
    var delayInSeconds = 1;                            // set number of seconds delay
    // list image names
    var images = ['{!$Resource.Test1}', '{!$Resource.Test2}', '{!$Resource.Test3}', '{!$Resource.Test4}'];
    // don't change below this line
        var num = 0;
        var changeImage = function() {
        var len = images.length;
        rotator.src=imageDir + images[num++];
        if (num == len) {
            num = 0;
    setInterval(changeImage, delayInSeconds * 1000);

Test1,Test2,Test3 and Test4 are the name of images in static res
Maros SitkoMaros Sitko

Salesforce add to your image other ID, no just MyImage, so i your javascript replace line

var rotator = document.getElementById('MyImage');  // change to match image ID


var rotator = document.getElementById({!$Component.MyImage}');  // change to match image ID


then probably change this

var images = ['{!$Resource.Test1}', '{!$Resource.Test2}', '{!$Resource.Test3}', '{!$Resource.Test4}'];


var images = ['{!URLFOR($Resource.Test1, '')}', '{!URLFOR($Resource.Test2, '')}, '{!URLFOR($Resource.Test3, '')}', '{!URLFOR($Resource.Test4, '')}'];

(I am not sure, I did not try {!$Resource.Test1})


and last change

rotator.src=imageDir + images[num++];

with just


because it contains full path to image