Modiying CMotion Image Gallery - Please Help !

**bsjd00** · 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...

**jscheuer1** · 01-01-2006, 09:51 AM

Happy New Year! I've set up a demo. 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):

Code:

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:

Code:

<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>')
document.write('</nobr>')
</script>

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:

HTML Code:

<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>

**bsjd00** · 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!

**elgoochio** · 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

Cheers

**jscheuer1** · 01-13-2006, 02:43 AM

That is set in the gallerystyle.css file.

**horse** · 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?

**jscheuer1** · 01-18-2006, 10:22 AM

Add this to the stylesheet (gallerystyle.css):

Code:

#motiongallery img {
vertical-align:middle;
}

**horse** · 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?

**jscheuer1** · 01-19-2006, 08:01 PM

Originally Posted by horse

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 -

PLEASE: Include the URL to your problematic webpage that you want help with.

OR:

Put code tags:

[code]

code goes here

[/code]

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

Code: