An inline slide show for web pages

I’ve created a slideshow-style media browser for websites (aka slider). I proudly call it Media Collections Browser because why not.

MCB can be embedded directly in the page content (aka inline) in order to make user’s journey smoother, less interrupted.

It supports touch, mouse, scroll-wheel or two-finger scroll on a Mac, keyboard shortcuts and for traditionalists it also has navigation UI on screen ;-) It disappears when a user uses touch, though.

The task was to feature a large amount of photos on a single page. Photos were submissions for a competition. There were several categories.

I wanted to make something streamlined, that can be quick to access and fun to view. I came-up with an idea of a responsive image-slider that is embedded within the page, so user can scroll sideways to view more photos or just continue scrolling vertically to move to the next category.

Browsing a web page with few embedded slide-shows on a tablet phone.

The UI hides when it detects that user is using touch on a mobile.

Browsing a web page with nearly 200 photos grouped in 10 slide-shows on a mobile phone.

I wanted something that would work well with touch devices as well as other pointer types. And on any screen size.

The concept isn’t original but the execution is quite innovative. In the essence those slide-shows are just <div> elements with horizontal scroll, and that’s the default fallback should the JS fail or be disabled.

The outstanding performance is rather satisfying. I’ve tested it on a page containing 10 slideshows and nearly 200 photos. Good lading time and performance even on mobile devices has been achieved with ‘lazy loading’ of the photos – only low-res preview is pre-loaded, high-res media follows on demand.

Browsing a web page with nearly 200 photos grouped in 10 slide-shows. Using two finger scroll, click and keyboard arrows. Safari on a MacBook.

TBC

1 Comment

Anonymous
a