Canvas Gallery with reflections
Canvas gallery with thumb reflection. Based oin Prototype and reflection.js
Coding time (6-8 hours, done in two days)
For last two days I was playing with canvas (again 
).
This time i decided to build Gallery, but i wanted to add reflection to images, and to make them scroll left and right, instead of usual scrolling.
First task was to extend Prototype and add 3 new functions: scrollLeft, scrollRight, and stopScroll.
This may not seams completley necessary but it makes code a lot cleaner. Take scroll buttons for example:
//Add event listeners on scroll buttons
$('md').observe('mouseover',function(event){
$('img-holder').scrolRight();
});
$('md').observe('mouseout',function(event){
$('img-holder').stopScroll();
});
// as simple as that :]
I really learned a lot from this project, mostly about prototype.
Prototype really have awesome possibilities, all that you need is good plan and some coding skills.
Even if you are not top-notch ajax programmer there is a lot of examples and resources on the Internet.
Future of this project and usage
This project is still in deep beta, and if someone wants to use this gallery i advise to take demo page and modify it to your needs.
Otherwise you risk to loose some css or javascript dependency.
I will try to make new version of this as soon as possible.
If you have any comments or ideas please let me know.
Viewed 90384 times by 26868 viewers
on November 14th, 2007 at 8:37 pm
[...] Visit Digg This! Add to Del.icio.us Google Bookmark It! Stumble it! [...]
on November 22nd, 2007 at 10:22 am
Oh,very good.
on January 27th, 2008 at 7:36 pm
This is really nice-- exactly what I was looking for! Nice work.
on January 31st, 2008 at 5:11 pm
Thanks! This is great. I'll be using this for my gallery.
on February 23rd, 2008 at 3:41 pm
Hi, Would just like to say, I have been looking at lots of galleries that I could possibly use on my site, its just a friends and family site! photos and stuff. I cam across your viewer and have to say... it is simply stunning, its very smooth and looks fantastic! the best I have seen. I am trying to get it to work on my site, I have copied the file as said, but I am not sure where to put all the code bits, if you have the time and wouldnt mind, could you tell me? I would be truly grateful as nothing comes close to how good this one looks!
Rgds
on March 20th, 2008 at 10:06 pm
I don't notice that you are using XML to store the images externally. Are they loaded in the HTML?
on March 21st, 2008 at 6:42 pm
Hi, I read the blog but actually I want to use it, buy I found some problems. What are the necesary js and files to attach to the html?
Thanks!!
on June 27th, 2008 at 6:46 pm
dosn't work with Opera browser!!!!