3D Cubic Gallery - Advanced Media Gallery

Update

16/12/2020: Set pixel ratio on mobile devices

5/12/2020: Optimize sample assets, add link media panel in Designer

Introduction

3D Cubic gallery is a performant WebGL 3D photo application where items are distributed in spaces using cubic topology.

Modular design

Application components are designed and split into separated modules with different responsibilities. Effortlessly swap out one component with another to modify the app functionalities.

Flexibility

Various controls, parameters and configuration options are implemented to make the application extremely easy to customize and extend further.

Quality Control

Source code are well commented and thoroughly tested and checked to ensure its bug free quality for production.

Component Architect

Every UI elements are designed as separated components from the ground up. Components are loosely coupled widget objects that can be reused and customized in different projects.

Full Features

• Over 40 configuration options
• Default dark theme and light theme
• Multi media support: photo, audio, video, ajax, inline, embedded iframe
• 2 mouse mode: mousemove and mousedrag
• Advanced full fledged 2D gallery mode: auto activated on non webgl browser
• Multiple screen support: mobile, tablet. desktop
• Multi categories support
• Full screen support
• Full width support
• High quality code commenting
• High quality documentation
• Lightweight: only 26KB in gzip format
• Advanced MediaViewer component, a feature rich lightbox application to view extended contents
• CSS preprocessor using SASS and Compass framework
• animejs as core animation engine: multiple easing equations support, configure delay, duration, callback with ease
• Multiple SASS variables offering extreme flexibility to customize application look and feel
• HTML preprocessor using Pug templates
• Advanced build system with Grunt: easily create distribution and examples file with builtin tasks
• Custom components: ItemTitle, ItemDescription
• videojs as main video playback engine
• audio5js as main audio playback engine
• Multiple examples included

Image Credits:unsplash.com

Video Credits:pexels.com