QBox: A WebGL photo slideshow for your website
QBox uses WebGL technology in order to map a sequence of images on a rotating cube:
Features:
- It uses JQuery selector’s syntax in order to let identify wich images you want to use;
- It auto-resize and auto-center the images;
- Currently tried only on WebKit Nightly Builds.
You can:
- See QBox in a live demo (you need to use a WebGL enabled browser);
- Watch a 30 seconds screencast about QBox (just below this text).
How to install the latest release:
- Download Qbox zipped package from here;
- Uncompress it;
- Launch index.html with a WebGL enabled browser (eg: drag it over WebKit Nightly Build icon).
How it works:
To launch QBox you need to call the qbox function as follow:
qbox('#gallery img','qbox')
the first parameter uses the JQuery selector syntax to identify which images map on the cube (please note that the images can be more than 4, in that case the script auto implements an image rotation mechanism), the second parameter must be the id of the canvas tag we want to use as QBox slideshow.
To better results I’m used to wrap this instruction within a $(‘document’).ready() function and put it into the body as follow:
<body onload="$(document).ready(qbox('#gallery img','qbox'));">
You also need to provide the slideshow two piece of script called vertex-shader and fragment-shader, they must be placed wihtin the HTML file inside two <script> tags with ids ‘fshader’ and ‘vshader’, you can copy them from the file index.html (also from the demo source page).
More information about technical details of this script may be found on a dedicated blog post (italian only).
Acknowledgments:
Most of the base code is taken from ‘WebGL Spinning Box‘ example, I also take some inspiration from ‘procedural-texture-test‘ demo by Google.
GitHub Repository:
The code is also available from GitHub repository here: http://github.com/sandropaganotti/QBox–a-WebGL-photo-slideshow
