Member Avatar for AycheKay

I'd like to find a way to change photos on a website using Javascript or some type of Javascript framework. I think I've seen this done before but I can't recall where.

I need the photos to behave like a slide show and change automatically without any user interaction. And I don't want to use flash to accomplish this. Is this possible?

Also, I usually program in ASP Classic (AKA ASP 3.0) so I need it to be compatible with that if possible.

  • 2 Contributors
  • 3 Replies
  • 113 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

A Flash-free automatic slideshow is straightforward: Classic ASP simply emits the image markup (or a small JSON list) and the browser cycles them with JavaScript and a little CSS. you can do this without any library; was right that libraries exist if you want extra features, but a tiny dependency-free approach is often simpler and faster.

Here is a minimal pattern to drop into your ASP page.

HTML (server-side emits the img tags):

<div id="slideshow" aria-live="polite">
  <img src="images/1.jpg" alt="Caption 1">
  <img src="images/2.jpg" alt="Caption 2">
  <img src="images/3.jpg" alt="Caption 3">
</div>

CSS:

#slideshow { position:relative; width:100%; max-width:800px; height:450px; overflow:hidden; }
#slideshow img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s; }
#slideshow img.active { opacity:1; }

JS:

const imgs = document.querySelectorAll('#slideshow img');
let idx = 0;
imgs[idx].classList.add('active');

setInterval(() => {
  imgs[idx].classList.remove('active');
  idx = (idx + 1) % imgs.length;
  imgs[idx].classList.add('active');
}, 3500);

Classic ASP can generate the img tags from a folder or DB. Example (very small):

<%
Dim imgs: imgs = Array("images/1.jpg","images/2.jpg")
For Each i In imgs
%>
  <img src="<%= i %>" alt="">
<%
Next
%>

Practical tips: preload or include all src attributes so transitions are smooth; set a fixed container size to prevent layout shift; include meaningful alt text and a noscript fallback (show first image) for no-JS users; compress and responsively size images; add pause-on-hover or focus for accessibility; use requestAnimationFrame if you need frame-perfect animations. If you later want thumbnails, captions, or swipe/touch, consider a maintained slider library.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

Cool! Goahead...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.