Canvas Gallery with reflection demo

Example

About

Download & links

• Official blog post
• canvasGallery.js

Usage

Now, this is tricky part :)
Basicly you should add your images, minding naming rules

<div id="img-holder"> <div class="gallery-item"> <img src="001_s.jpg" id="img001"/> <canvas width="77" height="77" id="canvas001"/> </div> <div class="gallery-item"> <img src="002_s.jpg" id="img002"/> <canvas width="77" height="77" id="canvas002"/> </div> <div class="gallery-item"> <img src="003_s.jpg" id="img003"/> <canvas width="77" height="77" id="canvas003"/> </div>

So, first image thumb is 001_s.jpg and larger size is 001_m.jpg and so on. (Yes, exactly like on Flickr)

Then in canvasGallery.js add reflections to all that images and set scroll speed.
(combination of timeout and step)

Gallery.addItem('001'); Gallery.addItem('002'); Gallery.addItem('003'); Gallery.addItem('004'); Gallery.addItem('005'); Gallery.addItem('006'); Gallery.addItem('007'); Gallery.addItem('008'); Gallery.addItem('009'); //set scroll options (timeout,step) $('img-holder').setFXOptions(40,4);