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.

Viewed 90384 times by 26868 viewers

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

Leave a Reply (English only)


All Rights Reserved, Copyright © 2007 Dragan Bajcic.
YourTree | Dragan@YourTree | LG Shop | Web Development and Consulting