CMotion Image Gallery II
Description: CMotion Image Gallery II is based on the original Cmotion Gallery script, modified by jscheuer1 for a vertical orientation instead. The script uses the most intuitive input devise available, the user's mouse, to control its scrolling action! The user can direct both the image scrolling direction and speed just by placing the mouse on either spectrums of the image gallery. Clicking on an image can then load a larger version of it, navigate to a page etc. Apart from the gallery's dimensions, you can also specify its top scrolling speed, with the script then creating a range from 0-top speed and distributing it evenly across the gallery. Cool!
This script works in all modern DHTML browsers- IE5+, NS6/ Firefox 1.0+, Opera 7+.
Demo. Move mouse around top or bottom of gallery to scroll up or down. Speed increases depending on how far you move.
)
)
Directions
Step 1: Add the following code to the <head> section of your page:
This script references an external .js and .css file. Download them below (by right clicking, and selecting "Save As"):
1)
motiongallery2.js
2) gallerystyle2.css
Step 2: Add the below HTML code to the <BODY> section of your page. It contains the actual HTML for all your images in the gallery:
In the code of Step 2 above, modify the HTML contained within the two DIV tags as desired to reference your images. Do NOT remove the three outer DIV tags! To customize the dimensions of the gallery, change the "width" and "height" CSS attributes of the first DIV.
It's up to you to set up a desired post action upon clicking on a particular image within the gallery, whether to go to a URL, pop up an enlarged version of the thumbnail, or nothing at all (remove the link then). We specifically designed the script to be as versatile as possible in this area. However, included in the script is a simple "enlargeimage()" function you can use to pop up a window with any URL passed from the link.
Have fun!