How To Create Image Slideshow In Html

[Master]

How can I have slideshow in my HTML Page?

[MayMusic]

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>

[skauntey]

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.

[MayMusic]

Where do you have this script, in details page? Where do you have images save at? Are these images, Image_1,Image_2, Image_3 and Image_4 fields in the table?

[skauntey]

Thanks MayMusic,

 

Yes these are the image fields in the table. A Caspio staff helped me to find and correct the issue.

 

Best,

[Master]

Where was the issue? Can you please tell us?

[skauntey]

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>

[MayMusic]

Thank you so much

[Kurumi]

Hi everyone! Just wanted to share a new solution for Image Slideshows or Touch Slider if you have multiple images in your Details Page. You may try using this JS snippet of Swiper:
https://swiperjs.com/get-started
https://swiperjs.com/demos

Here's a sample result:

Hope it helps!

[Kurumi]

Hi everyone! Just wanted to share a new solution for Viewing images or Touch Sliders if you have multiple images in your Details/Report Page. You may try using this jQuery lightbox of Swipebox:
http://brutaldesign.github.io/swipebox/
https://github.com/brutaldesign/swipebox

You can also use this to open video URL's from YouTube.