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.
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!!!!
on July 8th, 2008 at 8:03 am
thank you.......
on July 8th, 2008 at 3:12 pm
thank you.....
on January 30th, 2009 at 9:09 pm
It's an awsome script but incomplete
The first thing that i realized was that the images never stop at the limits (right and left) and that was very annoyed so what I did was this
scrolLeft:function(element,step){
if(element.fxoptions.active) element.fxoptions.active=false;
var margin = element.getStyle('marginLeft');
var totalAncho = element.getStyle('width');
var imagenes = $('imgs');
var anchoImagenes = imagenes.getStyle('width');
totalAncho = parseInt(totalAncho.replace('px',''));
anchoImagenes = parseInt(anchoImagenes.replace('px',''));
if( totalAncho > anchoImagenes ){
margin = parseInt(margin.replace('px',''));
margin1 = -1 * margin;
margin1 += anchoImagenes;
if( totalAncho > margin1){
margin = margin-element.fxoptions.step;
element.setStyle({marginLeft:margin+'px'});
}
}
element.fxoptions.timeoutHandler=setTimeout(element.scrolLeft.bind(element), element.fxoptions.timeout);
},
scrolRight:function(element,step){
element=$(element);
var margin = element.getStyle('marginLeft');
var totalAncho = element.getStyle('width');
var imagenes = $('imgs');
var anchoImagenes = imagenes.getStyle('width');
totalAncho = parseInt(totalAncho.replace('px',''));
anchoImagenes = parseInt(anchoImagenes.replace('px',''));
if( totalAncho > anchoImagenes ){
margin = parseInt(margin.replace('px',''));
if(margin
on January 30th, 2009 at 9:10 pm
scrolRight:function(element,step){
element=$(element);
var margin = element.getStyle('marginLeft');
var totalAncho = element.getStyle('width');
var imagenes = $('imgs');
var anchoImagenes = imagenes.getStyle('width');
totalAncho = parseInt(totalAncho.replace('px',''));
anchoImagenes = parseInt(anchoImagenes.replace('px',''));
if( totalAncho > anchoImagenes ){
margin = parseInt(margin.replace('px',''));
if(margin
on January 30th, 2009 at 9:12 pm
if(margin
on January 30th, 2009 at 9:15 pm
if(0 > margin ){
margin = margin+element.fxoptions.step;
element.setStyle({marginLeft:margin+'px'});
}
}
element.fxoptions.timeoutHandler=setTimeout(element.scrolRight.bind(element), element.fxoptions.timeout);
},
on April 20th, 2009 at 11:23 am
[...] Canvas gallery with thumb reflection. Based oin Prototype and reflection.js. Beta version. Requirements: Prototype [...]
on May 25th, 2009 at 8:04 am
[...] [...]
on May 27th, 2009 at 8:03 pm
[...] Canvas gallery with thumb reflection. Based oin Prototype and reflection.js. Beta version. Requirements: Prototype [...]
on June 22nd, 2009 at 10:43 am
[...] Canvas gallery with reflection [...]
on February 3rd, 2010 at 10:53 am
[...] Canvas Gallery with reflections (Beta), Prototype [...]
on March 1st, 2010 at 1:40 pm
[...] Canvas Gallery with reflections (Beta), Prototype [...]