Jump to content
  • 0

How To Create Image Slideshow In Html


Master
 Share

Question

9 answers to this question

Recommended Posts

  • 0

You can try to add this to the header

<script type="text/javascript">
var image1 = new Image()
image1.src = "images/image1.jpg"
var image2 = new Image()
image2.src = "images/image2.jpg"
</script>

And the code below where you want to show the slide

<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500);
}
slideit();
</script>
Link to comment
Share on other sites

  • 0

MayMusic,
 
Thanks for posting this. I have tried few variations of the script below - as you have indicated in your reply but with no success !
 
Am I doing anything wrong here?
 

Script in Header:

 

<script type="text/javascript">
var image1 = new Image()
image1.src = "[@field:Image_1/]"
var image2 = new Image()
image2.src = "[@field:Image_2/]"
var image3 = new Image()
image3.src = "[@field:Image_3/]"
var image4 = new Image()
image4.src = "[@field:Image_4/]"
</script>

 

Script in HTML Block ( I too have tried with footer)

 

<p><img src="[@field:Image_1/]" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",500);
}
slideit();
</script>
 
 
Thanks in advance.
Link to comment
Share on other sites

  • 0

Hi Master,

 

Please find working script below. Other than a change in timings (from 500 to 3500), bit of extra luck and help from Caspio, I can't spot much difference. My technical knowledge around coding etc.. is nearly zero hence I don't know what was the issue.

 

Hope this helps :)

 

 

Header:

 

<script type="text/javascript">

var image1 = new Image()

image1.src = "[@field:Image_1/]"

var image2 = new Image()

image2.src = "[@field:Image_2/]"

var image3 = new Image()

image3.src = "[@field:Image_3/]"

var image4 = new Image()

image4.src = "[@field:Image_4/]"

</script>

 

 

Added to an HTML Block:

 

 

<p><img src="[@field:Image_1/]" width="650" height="400" name="slide" /></p>

<script type="text/javascript">

var step=1;

function slideit()

{

document.images.slide.src = eval("image"+step+".src")

if(step<4)

step++

else

step=1

setTimeout("slideit()",3500);

}

slideit();

</script>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...