Uncharted Design

Daily Photos

Currently...

»

Mootools smooth scrolling gallery

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, or here from us. Just update to the current version of mootools, and replace your existing scroller.js with the new one.

You can see the 1.2 Demo or download the zip.

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.

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.

You also might enjoy…

Tags: , ,

This entry was posted on Monday, August 11th, 2008 at 12:12 am and is filed under Coding. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • 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.
  • 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.
  • Hi, how i can do X&Y Scroll?

    Cheers
blog comments powered by Disqus