Member Avatar for chandelarrow

I have very limited cut and paste HTML/CSS Flash experience, but am in the process of redoing a design portfolio.

I want to incorporate an image lightbox interface like the one featured on this site. Does anybody know how this image scrolling area is created? Is there some open source code or 3rd party code for sale that anybody knows of?

thanks for the help.

  • 3 Contributors
  • 4 Replies
  • 108 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by chandelarrow

Dani AI

Generated

Quick clarification before diving in: the page you linked is not built with frames. s suggestion about framesets is incorrect; was right to point out that the effect is driven by JavaScript (jQuery + a serial/scroll plugin). For a portfolio, there are two practical routes: use a maintained slider library for built-in touch/ARIA/support, or build a tiny, accessible scroller yourself with CSS transforms and a bit of JS.

Practical checklist when recreating that interface:

  • Layout: a single overflow-hidden viewport with a horizontal track (flex) that holds full-width images. Animate with transform: translateX(...) for GPU-accelerated motion.
  • Controls: provide visible prev/next buttons, keyboard arrows, and swipe handling. Keep focusable controls and update ARIA states (e.g., aria-current on the active slide).
  • Performance: include width/height attributes or CSS to avoid layout shifts, lazy-load offscreen images (loading="lazy"), and preload only adjacent slides for smooth transitions.
  • Responsive images: use srcset/sizes or picture element so high-res images only load where needed.
  • Accessibility: meaningful alt text, focus management when opening a lightbox, and non-JS fallbacks (links to full-size images) where practical.

Minimal pattern (HTML/CSS/vanilla JS idea):

<div class="viewer" tabindex="0" aria-label="Gallery">
  <div class="track">
    <img src="1.jpg" alt="..." />
    <img src="2.jpg" alt="..." />
  </div>
</div>

.viewer { overflow:hidden; }
.track { display:flex; transition:transform .4s ease; }
.track img { flex:0 0 100%; width:100%; height:auto; display:block; }

<script>
const track = document.querySelector('.track');
let i = 0;
function show(n){ i=(n+track.children.length)%track.children.length; track.style.transform = `translateX(${-i*100}%)`; }
document.addEventListener('keydown', e => { if(e.key==='ArrowRight') show(i+1); if(e.key==='ArrowLeft') show(i-1); });
</script>

Notes: test any older jQuery plugin for compatibility if you go that route, and prefer a modern, maintained slider (or a tiny vanilla implementation) for touch, accessibility, and long-term maintenance. , this approach keeps the markup simple and scales well for a portfolio.

Recommended Answers

All 4 Replies

Member Avatar for untitledking

I have very limited cut and paste HTML/CSS Flash experience, but am in the process of redoing a design portfolio.

I want to incorporate an image lightbox interface like the one featured on this site. Does anybody know how this image scrolling area is created? Is there some open source code or 3rd party code for sale that anybody knows of?

thanks for the help.

Well that site is pretty simple to do, all it is, is just a frameset. That site used a frame set to the left for their links and used the right right frame set for their site layout.:icon_smile:

If you have Dreamweaver, it is really simple to do a Frameset, because it is a premade template.

Open Dreamweaver, click "New Document", go under the "general" tab, go to the "frameset" option, and choose the "fixed left", then click create.;)

If you need any help, just tell me via private message or reply to me.

Cheers

Member Avatar for drjohn

and where exactly in the source code do you see the tag frameset????

Member Avatar for drjohn

The source code shows, as you'd expect, references to JQuery and scrolling. Try googling on JQuery img scroller for examples and tutorials.

And ignore the bit about framesets. Geez. Some people.


Edit: I thought I'd save you some time. Here's where they got the code from
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html

Edited by drjohn because: n/a
Member Avatar for chandelarrow

Awesome, thats exactly what I was looking for... I wasn't familiar with JQuery so it didn't spark my attention, but the link is pretty cut and dry. I'll give the tuts a shot.

thanks for the help!

cheers

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.