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
Arun_KothaArun_Kotha 

Slideshow of images in Visualforce

I want to make a slideshow of images by embedding javascript in visualforce.

I wrote the following code. It shows the same image even after clicking next button. Can anyone tell me how to fix it? thanks

 

<apex:page showChat="false" sidebar="false" standardController="account">
<apex:pageBlock >
<apex:form >
<center>
<apex:image id="img" value="{!$Resource.one}" width="600" height="400"/>
<br>
</br>

<apex:commandButton value="Next" styleClass="groovybutton" onclick="next();return false;"/>

</center>
</apex:form>
<script>
function next()
{

var img = document.getElementById('img');
img.value= "{!$Resource.two}";

}
</script>
</apex:pageBlock>
</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
gautam_singhgautam_singh

Hi,

 

Try this piece of code, this works well for me . Let me know if you face any diffculties.

<apex:page showChat="false" sidebar="false" id="page" controller="changeImage" >
    <apex:pageBlock id="pB" >
        <apex:form id="frm">
        <center>
            <apex:image id="img" value="{!$Resource.one}" width="600" height="400"/>
            <br></br>
            <apex:commandButton value="Next" styleClass="groovybutton" onclick="return next()"/>
        </center>
        </apex:form>
</apex:pageBlock>

<script>
function next()
{
alert(document.getElementById("page:pB:frm:img").src);
document.getElementById("page:pB:frm:img").src='{!$Resource.Two}';
return false;
}
</script>

</apex:page>

 

Important :

Hit Kudos [Star Icon ] if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.

Thank You

All Answers

gautam_singhgautam_singh

Hi,

 

Try this piece of code, this works well for me . Let me know if you face any diffculties.

<apex:page showChat="false" sidebar="false" id="page" controller="changeImage" >
    <apex:pageBlock id="pB" >
        <apex:form id="frm">
        <center>
            <apex:image id="img" value="{!$Resource.one}" width="600" height="400"/>
            <br></br>
            <apex:commandButton value="Next" styleClass="groovybutton" onclick="return next()"/>
        </center>
        </apex:form>
</apex:pageBlock>

<script>
function next()
{
alert(document.getElementById("page:pB:frm:img").src);
document.getElementById("page:pB:frm:img").src='{!$Resource.Two}';
return false;
}
</script>

</apex:page>

 

Important :

Hit Kudos [Star Icon ] if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.

Thank You



This was selected as the best answer
Arun_KothaArun_Kotha
you forgot to write the code for 'changeimage' controller :(
Arun_KothaArun_Kotha
it is working without the controller. thanks :)
gautam_singhgautam_singh

Hi,

 

I had mistakenly written the first line , Correct is as

<apex:page showChat="false" sidebar="false" standardController="account">


Also , If this is the solution which you were looking for , then please mark it as a solution for others who come in search for the same doubt.




Important :

Hit Kudos [Star Icon ] if this provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.

Thank You
nikkeynikkey

Hi Gautam ,

I do have the same requirement ,but if we want to call nearly 10 images in slide as next ,next etc ,then how to call them.

Can u plz help me out .

 

Thaks in advance
nikkeynikkey

Hi Gautam ,

 

I do have the same requirement ,but if we want to call nearly 10 images in slide as next ,next etc ,then how to call them.

Can u plz help me out .

 

Thaks in advance
gautam_singhgautam_singh
If there are only 10 Images and that is not going to change anyhow , then you can use the same code which is kept above.

Rather to make it more dynamic , Try making an array of the images in the code from the Resource and then pass that array instead of the individuals in the code above, this will complete the requirement.
Mohammed AzarudeenMohammed Azarudeen
here is the solution http://salesforcemaniacs.blogspot.in/2016/01/carousel-slide-in-visualforce.html (http://here is the solution http://salesforcemaniacs.blogspot.in/2016/01/carousel-slide-in-visualforce.html)