Tech How to make an infinite slideshow in HTML? - GoFuckYourself.com

INever · 04-22-2024, 06:08 AM

Searching google is nearly useless these days.

What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images?

I did something like this a million years ago...

Colmike9 · 04-22-2024, 06:17 AM

Dynamically populating a JavaScript image slideshow

INever · 04-22-2024, 07:21 AM

Ok will read this. If there's non java methods that's good too.

And to all, belated happy 419 or 420 as per your interests.

fris · 04-22-2024, 08:06 AM

Quote:

Originally Posted by INever

Ok will read this. If there's non java methods that's good too.

And to all, belated happy 419 or 420 as per your interests.

could use php to grab the file list of the directory and have that spit out the markup needed for the slideshow.

INever · 04-22-2024, 08:17 AM

Quote:

Originally Posted by fris

could use php to grab the file list of the directory and have that spit out the markup needed for the slideshow.

Thnx. Will print and save this page.

I admit I'm at the Paul Markam level of coding ability but isn't there something simple like:

<script> xyxabnd rotate images from <a href="https://image-files.domain.com" #images interval in seconds# </script></a>

Colmike9 · 04-22-2024, 09:22 AM

Quote:

Originally Posted by INever

And to all, belated happy 419 or 420 as per your interests.

Happy late 420!
This year was the first year I bought it legally, and it was high quality indoor and I got 20% off an ounce with a coupon. Fun times

blackmonsters · 04-22-2024, 10:35 AM

Quote:

Originally Posted by INever

Searching google is nearly useless these days.

What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images?

I did something like this a million years ago...

What happened to chatgtp giving us the code with AI?

zerovic · 04-22-2024, 10:19 PM

i would use php glob to get all images from the folder and jquery setinterval to rotate them.

fris · 04-23-2024, 10:50 AM

Quote:

Originally Posted by INever

Thnx. Will print and save this page.

I admit I'm at the Paul Markam level of coding ability but isn't there something simple like:

<script> xyxabnd rotate images from <a href="https://image-files.domain.com" #images interval in seconds# </script></a>

this will use glob to get a list of images and output the html markup (of course you will need to use the proper markup for the js slideshow)

Code:

<?php

$path = 'images/';
$file_types = ['*.jpg', '*.png', '*.gif'];

$images = [];
foreach ($file_types as $file_type) {
    foreach (glob($path . $file_type) as $file) {
        $images[$file] = $path . basename($file);
    };
}

foreach ($images as $i) {
    echo sprintf('<a href="%s"><img src="%s" alt="%s" /></a>', $i, $i, basename($i));
}

just a punk · 04-23-2024, 12:20 PM

ChatGPT will write this code for you in seconds...

blackmonsters · 04-23-2024, 12:46 PM

Quote:

Originally Posted by just a punk

ChatGPT will write this code for you in seconds...

Show us.

blackmonsters · 04-23-2024, 01:00 PM

User
What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images?

ChatGPT
You can achieve an infinite slideshow with a simple HTML script using JavaScript. Here's a basic example:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<base href="https://gfy.com/" />
<base href="https://gfy.com/" />
Ignore this line; was inserted by gfy because I didn't use the code tags
<title>Infinite Slideshow</title>
<style>
#slideshow {
position: relative;
max-width: 100%;
max-height: 100%;
margin: auto;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<div id="slideshow"></div>

<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // List your image filenames here
var index = 0;

function nextImage() {
index = (index + 1) % images.length;
document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">';
setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed)
}

nextImage(); // Start the slideshow
</script>

</body>
</html>

Followed up with :

How can I do this from a folder of images though?

ChatGPT
To create a slideshow from a folder of images dynamically, you'll need to use server-side scripting languages like PHP to fetch the images from the folder and then serve them to the client-side script. Here's how you can modify the previous example to achieve this using PHP:

Create an HTML file (e.g., slideshow.html) with the following content:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Infinite Slideshow</title>
<style>
#slideshow {
position: relative;
max-width: 100%;
max-height: 100%;
margin: auto;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<div id="slideshow"></div>

<script>
var images = <?php echo json_encode(glob('images/*.jpg')); ?>;
var index = 0;

function nextImage() {
index = (index + 1) % images.length;
document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">';
setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed)
}

nextImage(); // Start the slideshow
</script>

</body>
</html>

That worked; but the file has to have PHP extension

INever · 04-24-2024, 12:15 AM

Page Pdf'd/saved.

adultinnovation · 04-24-2024, 05:47 AM

out of business

blackmonsters · 04-26-2024, 09:25 AM

Quote:

Originally Posted by adultinnovation

out of business

How is this different than looking it up on stackoverflow, or github?
Who went out of business because of those sites?

NatalieK · 04-29-2024, 12:18 PM

would you use html now for a slideshow now?

and for an infinitive slide show, you need either to loop or have infinitive pics or clips...

so are you looking for a loop, or zillions of images?

04-22-2024, 06:08 AM	#1
INever Confirmed User Join Date: Jan 2005 Location: .......in a niche, in orbit...... Posts: 3,647	How to make an infinite slideshow in HTML? Searching google is nearly useless these days. What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images? I did something like this a million years ago... __________________ I love Camdough

04-22-2024, 06:17 AM	#2
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	Dynamically populating a JavaScript image slideshow __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years..

04-22-2024, 07:21 AM	#3
INever Confirmed User Join Date: Jan 2005 Location: .......in a niche, in orbit...... Posts: 3,647	Ok will read this. If there's non java methods that's good too. And to all, belated happy 419 or 420 as per your interests. __________________ I love Camdough

04-22-2024, 10:19 PM	#8
zerovic Confirmed User Industry Role: Join Date: Apr 2010 Posts: 1,111	i would use php glob to get all images from the folder and jquery setinterval to rotate them. __________________ php, html, jquery, javascript, wordpress - contact me at contact at zerovic.com

04-23-2024, 12:20 PM	#10
just a punk So fuckin' bored Industry Role: Join Date: Jun 2003 Posts: 32,386	ChatGPT will write this code for you in seconds... __________________ Obey the Cowgod

04-23-2024, 01:00 PM	#12
blackmonsters Making PHP work Industry Role: Join Date: Nov 2002 Location: 🌎🌅🌈🌇 Posts: 20,652	User What is the easiest one or two line script/html that will serve an infinite slide show out of a folder of images? ChatGPT You can achieve an infinite slideshow with a simple HTML script using JavaScript. Here's a basic example: html Copy code <!DOCTYPE html> <html> <head> <base href="https://gfy.com/" /><!--[if IE]></base><![endif]--> <base href="https://gfy.com/" /><!--[if IE]></base><![endif]--> Ignore this line; was inserted by gfy because I didn't use the code tags <title>Infinite Slideshow</title> <style> #slideshow { position: relative; max-width: 100%; max-height: 100%; margin: auto; } img { width: 100%; height: auto; } </style> </head> <body> <div id="slideshow"></div> <script> var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // List your image filenames here var index = 0; function nextImage() { index = (index + 1) % images.length; document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">'; setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed) } nextImage(); // Start the slideshow </script> </body> </html> Followed up with : How can I do this from a folder of images though? ChatGPT To create a slideshow from a folder of images dynamically, you'll need to use server-side scripting languages like PHP to fetch the images from the folder and then serve them to the client-side script. Here's how you can modify the previous example to achieve this using PHP: Create an HTML file (e.g., slideshow.html) with the following content: html Copy code <!DOCTYPE html> <html> <head> <title>Infinite Slideshow</title> <style> #slideshow { position: relative; max-width: 100%; max-height: 100%; margin: auto; } img { width: 100%; height: auto; } </style> </head> <body> <div id="slideshow"></div> <script> var images = <?php echo json_encode(glob('images/*.jpg')); ?>; var index = 0; function nextImage() { index = (index + 1) % images.length; document.getElementById('slideshow').innerHTML = '<img src="' + images[index] + '">'; setTimeout(nextImage, 3000); // Change slide every 3 seconds (adjust as needed) } nextImage(); // Start the slideshow </script> </body> </html> That worked; but the file has to have PHP extension __________________ Get paid, get tools, get going with Camsoda Join Chaturbate get your cut of the pie

04-24-2024, 12:15 AM	#13
INever Confirmed User Join Date: Jan 2005 Location: .......in a niche, in orbit...... Posts: 3,647	Page Pdf'd/saved. __________________ I love Camdough

04-24-2024, 05:47 AM	#14
adultinnovation WIFE CHANGING MONEY Industry Role: Join Date: Mar 2019 Location: usa Posts: 5,095	out of business __________________ Adult Design HTML5 programming, Wordpress, Paysite Design, Logo Design & branding, Motion graphics, Tutorial Videos, Motion Advertisement's, 3D and 2D animation

04-29-2024, 12:18 PM	#16
NatalieK Natalie K Industry Role: Join Date: Apr 2010 Location: Spain Posts: 19,607	would you use html now for a slideshow now? and for an infinitive slide show, you need either to loop or have infinitive pics or clips... so are you looking for a loop, or zillions of images? __________________ My official site Custom vids Make money & get into the business First time girls Skype: GspotProductions - "Converting traffic into income since 2005"