As the internet becomes increasingly image-driven, web developers and designers are tasked with finding innovative ways to showcase large amounts of visual media on a single page. Whether it’s for a photography competition, an online store, or a portfolio website, displaying numerous images in an accessible and streamlined way can be a challenge.
That’s where the Media Collections Browser (MCB) comes in. MCB is a slideshow-style media browser designed to showcase a large amount of visual media on a single page, while still maintaining a streamlined and responsive user experience. It’s embedded directly in the page content, which allows users to easily browse through photos without being interrupted or having to navigate away from the page.
One of the most significant advantages of MCB is its responsiveness to different types of user input. It supports touch, mouse, scroll-wheel or two-finger scroll on a Mac, keyboard shortcuts, and for those who prefer traditional navigation, it also has on-screen navigation UI. MCB’s GUI even disappears when a user is using touch on a mobile device, ensuring an uninterrupted browsing experience.
When tasked with featuring a large amount of photos on a single page, such as for a photography competition with several categories, as the creator of MCB I wanted to develop something that was quick to access and fun to view. Thus, the idea of a responsive image-slider that is embedded within the page was born. Users can scroll sideways to view more photos, or continue scrolling vertically to move to the next category.
The UI hides when it detects that user is using touch on a mobile.
The beauty of MCB lies in its simplicity. While the concept of a slide-show isn’t new, MCB’s execution is innovative. Essentially, each slideshow is just a <div> element with horizontal scroll, which is the default fallback if JavaScript fails or is disabled.
Another notable feature of MCB is its outstanding performance. The creator has tested it on a page containing 10 slideshows and nearly 200 photos. By using a custom ‘lazy loading’ of the photos, only low-resolution previews are pre-loaded, and high-resolution media follows on demand. This ensures good loading times and performance, even on mobile devices.
In conclusion, the Media Collections Browser is a versatile and user-friendly solution for displaying large amounts of visual media on a website. With its streamlined design, responsive user experience, and outstanding performance, MCB is an excellent choice for web developers and designers looking to showcase visual media in an accessible and engaging way.
Add a comment