Back to Top
The nuts and bolts for
Creative web development

Dynamic Fullscreen Gallery with Bullet Navigation

“Awesome gallery with Data Bindings extensions ”

In our latest showcase we created an awesome dynamic, fullscreen gallery using our latest released extensions. We built up the gallery, with images from a local JSON file, and paging(bullets) navigation using HTML5 Data Bindings and HTML5 Data Bindings Extended Repeater. Using HTML5 Data Bindings Browser Properties we set the width and height of the gallery to match the width and height of the browser viewport. We also used orientation check. When a user loads the page into a portrait-oriented device, a message is being displayed - "Please use your device in landscape orientation". Additionally, HTML5 Animate CSS is used for the fade effect when an image is changed.

Showcases


Dynamic Fullscreen Gallery Showcase

We created the gallery, with images from a local JSON file, and paging(bullets) navigation using HTML5 Data Bindings and HTML5 Data Bindings Extended Repeater. Using HTML5 Data Bindings Browser Properties we set the width and height of the gallery to match the width and height of the browser viewport. We also used orientation check. When a user loads the page into a portrait-oriented device, a message is being displayed - 'Please use your device in Landscape orientation'. Additionally, HTML5 ...

Extensions


HTML5 Data Bindings
Connect to your data
HTML5 Data Bindings Browser Properties
Rich information about the browser and device your visitor is using
HTML5 Data Bindings Extended Repeater
Powerful repeat regions
HTML5 Animate CSS
Just-add-water CSS animations

Share this Article