CMotion for dummies help

[AYJ]

Script: CMotion Image Gallery
http://www.dynamicdrive.com/dynamici...iongallery.htm

I am very new to web design (I have been teaching myself) and I would appreciate some help. I have not yest published my website, so I apologize in advance for not having a working sample for you.

This is what I have as a starter to work with:

<nobr><a href="javascript:enlargeimage('126038.jpg')"><img
src="images/126038.jpg" border=1 width="450" height="452"></a> <a
href="javascript:enlargeimage('images/lv1801.jpg', 300, 300)"><img
src="images/lv1801.jpg" border=1 width="415" height="550"></a> <a
href="http://www.wishesdivine.com"><img src="images/LV1801.jpg"
border=1 width="415" height="468"></a> <a href="#"><img src="LV1801.jpg"
border=1></a> <a href="#"><img src="LV1901.jpg"
border=1></a> <a href="#"><img src="LV2001.jpg"
border=1></a> <a href="#"><img src="images/126038.jpg"
border=1 width="300" height="300"></a> <a href="#"><img src="images/126038.jpg"
border=1 width="300" height="300"></a> <a href="#"><img src="images/126038.jpg"
border=1 width="300" height="300"></a></nobr>

This will be an online store, and I would like to have each picture so that when you click on the picture, it will pop up in a pop up window (http://www.dynamicdrive.com/dynamicindex8/popwin.htm). The customer will be able to see detailed product information and the option to buy (link to shopping cart). My problem is, I don't know where one picture ends and where the other begins. So I don't know how to modify the individual picture.

Can someone help me? I would so appreciate it.

[jscheuer1]

This is one image with a link which uses code in motiongallery.js to display the image in a separate window when clicked:

<a href="javascript:enlargeimage('126038.jpg')"><img src="images/126038.jpg" border=1 width="450" height="452"></a>

This is one image all by itself:

<img src="images/126038.jpg" border=1 width="450" height="452">

[AYJ]

Wow, that seemed so simple. Thank you!

So I have a lot going on here from the original copy/paste that I don't need.

Can the seperate window "javascript:enlargeimage" be used as a hyperlink to another page once opened? Thus I would not need to use the seperate pop up window script?

And can I assume that the height and width is controlling the size of the gallery, not the indiviual picture, thus I would need to modify the picture prior to placing in the gallery?

What is the significance of <a href="#">

Thanks again.

[jscheuer1]

Can the separate window "javascript:enlargeimage" be used as a hyperlink to another page once opened?

Not exactly, not 'once opened' but, instead of the image name, you can use a page name and it will open that page, ex:

<a href="javascript:enlargeimage('some.html')">

It also accepts optional width and height parameters for the window's size:

<a href="javascript:enlargeimage('some.htm', 300, 200)">

And can I assume that the height and width is controlling the size of the gallery, not the individual picture, thus I would need to modify the picture prior to placing in the gallery?

The height and width in the image tag should be set to the true dimensions of the image or, not at all. If this is too large, resize the image in a paint or image program. It is best to use images all of the same dimensions (especially height) in the motion gallery. This tag sets the actual dimensions of the gallery:

<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">

What is the significance of <a href="#">

That means basically 'reload the page from the top'. It is the same as having a link to the page itself. Mostly it is used as a placeholder with the expectation that it will either be replaced or removed by the person configuring the page. If left as is it can have unexpected results when clicked. Often though, it is used to give a dummy link with an onclick event that returns false:

<a href="#" onclick="alert('Hello!');return false;">Click for Greeting</a>

The 'return false;' means that the link will not get executed but, the onclick event will.

[AYJ]

I hope you are an instructor somewhere, because you keep this in a K.I.S.S. fashion that makes it very easy to understand.

I have only two final question regarding this script..

1. If I were to use the pop up window script (http://www.dynamicdrive.com/dynamicindex8/popwin.htm) for each picture, would I place it inside or outside the tags for each picture?

2. How would I adjust the speed?

Believe it or not, I have to teach myself MySQL after this becuase it is the only database available to me right now through my service provider...unless I pay more money. But I have to make the money before I can pay it

[jscheuer1]

With a little fiddling, you could place it inside the image tag however, the code as generated by the pop-up script would be used like so:

<a href="http://www.google.com" onclick="NewWindow(this.href,'mywin','800','200','no','center');return false" onfocus="this.blur()"><img src="some.jpg"></a>

Tinkering to eliminate the need for the anchor tag, it would be used like so:

<img src="some.jpg" onclick="NewWindow('http://www.google.com','mywin','800','200','no','center')" onfocus="this.blur()">

However, simplifying things in this manner will make it so the cursor is an arrow instead of the familiar pointing finger we all associate with links. There are several ways this can be worked around but none, that is free of potential complications, is much simpler than using the anchor tag to begin with.

The speed is controlled using the maxspeed variable near the top of the motiongallery.js external file.

[AYJ]

I appreciate it, again, thank you! It makes sense now. I will tinker around with that. This project of mine has been hard work, but surprisingly fun.