Mootools smooth scrolling gallery
Preserved from the old Uncharted Design blog for nostalgia. This is old web-business advice, not current guidance.
Update: Mootools is now on 1.2, with changes that break this script. What really needs updating is the scroller.js, you can download it from mootools. Just update to the current version of mootools, and replace your existing scroller.js with the new one.
The original gallery demo and download files were not preserved in the static archive.
The gallery on our old site used a JavaScript/Css method that I think is worth sharing. You can use this on your site by just modifying the HTML and images.
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 in the original archive.
Let me know if you have any questions and I’ll do my best to answer them.