Dynamic Drive DHTML Scripts- CMotion Image Gallery

FF1+ IE5+ Opr7+

CMotion Image Gallery

Author: Dynamic Drive

Note: Updated July 4th, 14' with swipe navigation in touch devices. Cleaned up HTML markup.

Description: CMotion Image Gallery is a versatile gallery script that uses the most intuitive input devise available, the user's mouse, to control it! 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+. FYI we named it "Cmotion" to stand for "Cursor Motion." :)

Improvements by Jscheuer1 (Aug 24th, 06') to this script are:

Allows for easy optional centering.
Percentage width may be used for the gallery to resize with the browser window.
Image train may be started left, center or right.
Eliminates 'b has no properties' error.

Demo. Move mouse to left or right of gallery. 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) motiongallery.js
2) gallerystyle.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:

Select All
<div id="motioncontainer" style="position:relative;overflow:hidden;"> <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;"> <div id="trueContainer" style="white-space: nowrap;"> <ul> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> <li><a href="#" onClick="enlargeimage('cat.jpg'); return false"><img src="cat.jpg"></a></li> </ul> </div> </div> </div>

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 <nobr> tag nor the two 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!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post