View Full Version : Modiying CMotion Image Gallery - Please Help !

01-01-2006, 03:08 AM
Does anyone know how to modify the CMotion Image Gallery to:

1. Set the images to display in a box on the same page when clicking on them, instead of popping up in a new window?

2. Have those images fade into the box, instead of just appearing?

Any help would be GREATLY appreciated.

P.S. Happy New Year ! Sorry to bother you all now...

01-01-2006, 09:51 AM
Happy New Year! I've set up a demo (http://home.comcast.net/~jscheuer1/side/files/cmotion_thunmbII_xbrowser.htm). It uses the cmotion script almost 'as is' except you no longer need the enlargeimage() function. Also, the HTML portion is now mostly generated by an on page script. This is the last script on the page. I have actually doubled a portion of it (as noted by comments) to make for a longer image train, just for demonstration purposes. The rest of the additions are another script that I have documented fairly well on the page. If you have any questions, let me know.

Notes: This is on a slow server so load times will generally be faster than encountered with this demo, at least for a comparable number of similarly sized images. To help the browser load things more quickly, it would be a good idea to include width and height in (as added in red below):

document.write('<a href="javascript:switchFade('+[i_tem]+', dynimages)"><img src="'+dynimages[i_tem][0]+'" width="70" height="113" border="1"></a>')

this otherwise exact copy of a line near the end of the page. This will only work if all the thumbnails (which are the images for the cmotion part) are of the same dimensions. If not, you can do without it or replace the document write statements with the original type of statement from cmotion -

Replace this sort of thing:

<script type="text/javascript">
document.write('<nobr id="trueContainer">')
for (var i_tem = 0; i_tem < dynimages.length; i_tem++)
document.write('<a href="javascript:switchFade('+[i_tem]+', dynimages)"><img src="'+dynimages[i_tem][0]+'" border="1"></a>')

with this sort of thing but using the switchFade() function instead of the enlargeimage() function and include each individual thumnail's dimensions in the image tags:

<nobr id="trueContainer"><a href="javascript:switchFade(0, dynimages)"><img src="photo1_thumb.jpg" border=1></a> <a href="javascript:switchFade(1, dynimages)"><img src="photo2_thumb.jpg" border=1></a> <a href="javascript:switchFade(2, dynimages)"><img src="photo3_thumb.jpg" border=1></a> <a href="javascript:switchFade(3, dynimages)"><img src="photo4_thumb.jpg" border=1></a> <a href="javascript:switchFade(4, dynimages)"><img src="photo5_thumb.jpg" border=1></a> <a href="javascript:switchFade(5, dynimages)"><img src="photo6_thumb.jpg" border=1></a> <a href="javascript:switchFade(6, dynimages)"><img src="photo7_thumb.jpg" border=1></a> <a href="javascript:switchFade(7, dynimages)"><img src="photo8_thumb.jpg" border=1></a> <a href="javascript:switchFade(8, dynimages)"><img src="photo9_thumb.jpg" border=1></a></nobr>

01-01-2006, 08:51 PM
THANK YOU so much for taking the time to reply!

I truly appreciate your time and wish you the happiest new year!

01-12-2006, 10:37 PM
Hiya thanks for the question was exactly the same as what I was looking for. The solution is great. Just one thing if i could ask, how do I change the border colour of the scrolling gallery at the moment it is set at purple. I've looked at every thing i can think of and cannot see where this is set.
Any assistance would be great


01-13-2006, 02:43 AM
That is set in the gallerystyle.css file.

01-18-2006, 09:47 AM
Hi, really great script, thanks. I plan to use it for a gallery with both landscape and portrait images. The largest dimension on either will be 380px, so have set the area to be 380 x 380, the portrait images position nicely in the centre, but the landscape align to the top, is it possible to centre them vertically?

01-18-2006, 10:22 AM
Add this to the stylesheet (gallerystyle.css):

#motiongallery img {

01-19-2006, 12:56 PM
Thanks for the reply, one more quick question though - I have the script inside a table that is fixed width and height and centred vertically and horozontally. The gallery renders fine in Firefox but in IE, the gallery floats seperate from the other page content. Any suggestions of how to fix this?

01-19-2006, 08:01 PM
I have the script inside a table that is fixed width and height and centred vertically and horozontally. The gallery renders fine in Firefox but in IE, the gallery floats seperate from the other page content. Any suggestions of how to fix this?

It would be much easier for me, if I could see your code:

Please provide your code -



Put code tags:

code goes here

around your code in a message here so that it appears like so:

code goes here

01-23-2006, 07:38 AM

the site is being hosted at
Thanks for your help

01-23-2006, 08:06 AM
I'm not seeing what you are talking about. However, the cmotion part of your page is not working at all in either IE or FF. To fix that, remove the id 'motiongallery' from the script block here:

<script type="text/javascript" id="motiongallery">
new displayarea(dynimages, 380, 380, 0) //new displayarea(IMAGES_ARRAY_NAME, images_width, images_height, borderwidth)

01-23-2006, 11:54 AM
Hi, the problem I currently have is that the motion gallery (scrolling object and larger image) are working independently of the table - but only in IE, its fine in Firefox. When the page is loaded it looks ok but moving or resizing the screen the two elements move independently, itís a bit of a weird one that I just canít work out.
Also, with the id=motiongallery trying to centre the landscape images onto the image area, where is the best place for that to go.
Thanks again.

01-23-2006, 12:43 PM
It goes one and only one place - where it is in the demo. It is part of the supporting HTML code for the cmotion part of the script. It has nothing to do with the display area for the larger images.