Sexy Slider

This is an example of a dual slider technique where we slide the images horizontally, and the menu vertically. This is accomplished with Prototype, Scriptaculous, and the Glider.js script written by Bruno Bornsztein.

I've taken this script and modified it to work with a vertical menu on the side. So when you click an item in the menu, it glides the image over, as well as simultaneously closes the previously opened menu and opens the new one you clicked on. (That was wordy, just check out the example below).

Example

The Sold Project A non-profit organization setup to stop sex slavery and human traffiking. NewSpring Church Is It Lupus? V/M Turlock High School

How to Implement

Create a new glider, and give it your container div, in this case, example_viewer.


        var my_glider = new Glider('example_viewer', {duration:0.75});

Check out the source code for how to mark up your HTML and the CSS for how to style things. I'd write it all out here, but it would get excessive. I trust you can look at the source and figure things out. The possibilities are really endless with regards to customizing your own look and feel, so have at it. I'd love to see your take on this.

Downloads

Grab the modified Glider.js script here.

If you'd like to download a complete example including HTML, CSS and my modified Glider.js, you can grab it here.

Disclaimer

I've only tested this in a few browsers, so I can't attest to it's full functionality in your favorite non-standard-up-to-date browser of choice. Maybe it's time to switch.