Logo


Canvas Gallery with reflections

Posted in ajax, Programming, Javascript by Dragan on the November 13th, 2007




Canvas gallery with thumb reflection. Based oin Prototype and reflection.js


Coding time (6-8 hours, done in two days)


Demo

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.

20 Responses to 'Canvas Gallery with reflections'

Subscribe to comments with RSS or TrackBack to 'Canvas Gallery with reflections'.


  1. on November 14th, 2007 at 8:37 pm

    [...] Visit Digg This!   Add to Del.icio.us   Google Bookmark It!   Stumble it!  [...]

  2. Jonewin said,

    on November 22nd, 2007 at 10:22 am

    Oh,very good.

  3. Libbey said,

    on January 27th, 2008 at 7:36 pm

    This is really nice-- exactly what I was looking for! Nice work.

  4. sweetperceptions said,

    on January 31st, 2008 at 5:11 pm

    Thanks! This is great. I'll be using this for my gallery. :)


  5. 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

  6. Dan Owen said,

    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?

  7. Matias said,

    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!!

  8. Cyber said,

    on June 27th, 2008 at 6:46 pm

    dosn't work with Opera browser!!!!


  9. on July 8th, 2008 at 8:03 am

    thank you.......


  10. on July 8th, 2008 at 3:12 pm

    thank you.....

  11. proimond said,

    on January 30th, 2009 at 9:09 pm

    It's an awsome script but incomplete :P

    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

  12. proimond said,

    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

  13. proimond said,

    on January 30th, 2009 at 9:12 pm

    if(margin

  14. proimond said,

    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);

    },


  15. on April 20th, 2009 at 11:23 am

    [...] Canvas gallery with thumb reflection. Based oin Prototype and reflection.js. Beta version. Requirements: Prototype [...]


  16. on May 25th, 2009 at 8:04 am

    [...] [...]


  17. on May 27th, 2009 at 8:03 pm

    [...] Canvas gallery with thumb reflection. Based oin Prototype and reflection.js. Beta version. Requirements: Prototype [...]


  18. on June 22nd, 2009 at 10:43 am

    [...] Canvas gallery with reflection [...]


  19. on February 3rd, 2010 at 10:53 am

    [...] Canvas Gallery with reflections (Beta), Prototype [...]


  20. on March 1st, 2010 at 1:40 pm

    [...] Canvas Gallery with reflections (Beta), Prototype [...]

Leave a Reply (English only)


All Rights Reserved, Copyright © 2007 Dragan Bajcic.
YourTree | Dragan@YourTree | Web Development and Consulting | rent a car srbija