Mootools smooth scrolling gallery
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.
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.
Tags: css, javascript, tutorial
August 12th, 2008 at 6:20 am
Hi, how i can do X&Y Scroll?
Cheers
August 12th, 2008 at 6:21 am
Hi jordan, i would like to ask something, i been using the original script
to make some experiment and i remember one time o made y and x scroll but i
dont remember how i made it, can you tell me how i can mix both script to
use X and Y scroll, at the moment im studing a diploma uin web development
and i would like to use this script for a project in the schooll.
August 12th, 2008 at 10:10 pm
Felipe, this script as it stands will allow x & y scrolling. I just defined my thumbnails to not stretch past a certain width. If you put in larger images etc, it will scroll.
To see this, just make a few changes to the css:
#myContent img{border: none;
margin: 0;
padding: 0;
padding-left: 4px;
margin-top: 3px;
margin-bottom: 3px;
/*
width: 196px;
max-height: 160px;
*/
cursor:pointer;
}
#myContent a {
border: none;
}
#myContent a:hover {
border: none;
}
#myContent .inject {
/*
Display:none;
The class "inject" under MyContent is hidden, otherwise it would be displayed along with the thumbnails */
}
All I did here was stop hiding the material that would normally be sent to the large div, class .inject. This really isn’t a good thing, it just puts my large images into the thumbnail box rather than hiding them. Then I also got rid of my width restrictions on images, so that they could be full size. You will probably want to add an overflow-y: hidden; to the code so as to remove the horizontal scrollbar.
Let me know how that works out for you, and cool website.