Uncharted Design - Blog http://www.uncharteddesign.com/blog Just another WordPress weblog Wed, 17 Dec 2008 16:55:05 +0000 http://wordpress.org/?v=2.6 en Mootools smooth scrolling gallery http://www.uncharteddesign.com/blog/2008/08/mootools-smooth-scrolling-gallery/ http://www.uncharteddesign.com/blog/2008/08/mootools-smooth-scrolling-gallery/#comments Mon, 11 Aug 2008 00:12:33 +0000 jordan http://www.uncharteddesign.com/blog/?p=10 The gallery on our site is using a JavaScript/Css method that I think worth sharing. You can use this on your site by just modifying the HTML and images.

 

Gallery Screen Shot
Live Demo or download
The end result came from combining two ideas, a smooth scrolling div and a script that injects the large container with information from the thumbnail that you click. The script I used for the basic gallery is “Javascript image gallery using mootools” by Devin R, available here

 

The other part is the scrolling based on mouse movement. I modified a script from Antonio Lupetti, “Using CSS and Mootools to simulate Flash horizontal navigation effect,” the original is here.

The challenges here involved integrating the structures of HTML, CSS and JavaScript that the two methods used, and making the site accessible for users with no JavaScript and for those on cellphone browsers.  Tested working in FF 2/3, IE 6/7, BlackBerry Mobile, Opera Mini.

I’ve made a simple demo for you to take a look at or download.

Let me know if you have any questions and I’ll do my best to answer them.

]]> http://www.uncharteddesign.com/blog/2008/08/mootools-smooth-scrolling-gallery/feed/