function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
brdbrd 

how to add multiple images in vf page

hi,

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);
})();
 
</script>
</td></tr>
</table>
</apex:form> 
</apex:page>


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

with

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}'];

with

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

rotator.src=images[num++];

because it contains full path to image