Cmotion Gallery Script

Script Title: Cmotion Gallery Script

Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm


Hi There,

Please, please can you help me.

Okay so on my site I have a slide show that is cotrolled by play and pause controll buttons.

I would like to combine the the scrolling slide show with the one from you guys so that it will work with the on I have on my site.

I have managed to get it to work. The problem is that I would like to add

left, right and stop buttons so that it correspondes to your scrolling slide show.

I have attached the script that I downloaded from you guys, by the way thanks a mill.

and I tried it and couldn't get the left, right and stop buttons to work.


The website is for a Greek Orthodox Chruch here in South Africa, Johannesburg and my website address is

www.cosdam.co.za

if you would like to see what I mean

Many Many Thanks
I really appreciate it.

Jimmy

:)

Looks like you have it working just fine.

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the HTML page(s) using the script. Please reinstate the notice first.

Script Title: Cmotion Gallery Script

Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

Thanks so much jscheuer1(John)

I really apreaciate your help,

I will put the credit line thats missing right away.

Please could you see if I have done it right,

<script type="text/javascript" src="motiongallery.js">
/***********************************************
* CMotion Image Gallery- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>


I added that to the top of the line and

<script language="JavaScript1.1">

/***********************************************
* CMotion Image Gallery- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

within the script, I don't want to get into trouble with anyone.


Thanks so much

Jimmy

You only need the credit once on the page but, what you have is fine. OK, it seems as though you have the cmotion gallery and your added controls working pretty well. It is the thing above that on the page that seems to be a problem. What is that supposed to be? Is it a sort of menu for different galleries to be loaded in the cmotion space?

Oh, no, I see - it's an area for the enlarged images. Some of your large images are missing. And http://www.cosdam.co.za/St2.jpg is not there either.

There seems to be some layout problems too but, these may resolve if the missing content is added. If not, I will have another look.

Script Title: Cmotion Gallery Script

Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.ht


Hi John,

Once again I can't thank you enough for your help.

I have changed the path for the missing picture and all is working nicely.

2 last questions and then I won't worry you again :)

1. How do I change the text box "play" so that it is transparent?
2. When I move my mouse on the pictures they move from left to right, How do I stop that so I can only use the left, right and stop controls.

Many Many Many

Thanks

Jimmy
:) :)

1 ) I'm not sure what you mean by transparent, if you want it this way all the time, or just some of the time. Literally, transparent would mean that you wouldn't see it. If that is what you want, set in its style:

visibility:hidden;

This can be done inline or in a style sheet. Example using inline style:

HTML Code:

---

<input type="text" style="visibility:hidden;">

---

To have it appear and disappear is more complicated. I will not go into that at this time because, I'm not sure if you want that.

2 ) Find these portions in the fillup() function in motiongallery.js:

Code:

---

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
}

---

You can either just get rid of them or get rid of the first one and change the second one to:

Code:

---

crossmain.onmouseout=function(){
showhidediv("hidden")
}

---

Hi there, i have another issue.!
When trying to display pictures of different size, the cmotion gallery tends to align them to the top, which looks really ugly sometimes. Is there any way to align them in the middle?
Another: is there any way to have the images at some distance from one another. I could just add a dummy image in between, but first would like to know if its possible to change it somewhere in the settings

Thank for help

I am new to all these things so if its a stupid question -sorry.

Well, the default positioning is aligned to the bottom so, if you are seeing them at the top, you've either modified something (probably without realizing it) already, or just aren't seeing it clearly. However, to center them top to bottom and to create some space between them (working from a default installation of the script), first make sure that the height value here highlighted red is tall enough for the tallest image:

Code:

---

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

---

and add this to the gallerystyle.css styles:

Code:

---

#trueContainer img {
vertical-align:middle;
margin:0 10px;
}

---

Or if each image is linked, this will look better in some browsers, the same in others:

Code:

---

#trueContainer img {
vertical-align:middle;
}
#trueContainer a {
margin:0 10px;
}

---

Notes: This probably will work even with other modifications that you may have made but, then again it may not.

Hi tere, just tried that, does not work, looks like something is pulling it up. Here is the source code:

Code:

---

                <td colspan="2" valign="top"><head>
<link rel="stylesheet" type="text/css" href="cmotion/gallerystyle.css" />

<script type="text/javascript" src="cmotion/motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</head>


<table width="800" height="341" border="0">
  <tr>
    <td width="50%" height="341">

        <!-- TABLE UPPER LEFT -->
          <table width="100%"  valign="center" border="0">
      <tr>
        <td  height="341">
               
<div id="motioncontainer" style="position:relative;width:400px;height:330px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<a href="javascript:enlargeimage('/44be47bbd8094.jpeg',600, 600)">                                                               
<img src="/44be47bbd8094.jpeg" align="middle" border=1 width="686" height="200"></a>
                                                                                                                                       
<a href="javascript:enlargeimage('/44be47bbf0731.jpeg', 600, 400)">
<img src="/44be47bbf0731.jpeg" align="middle" border=1 width="496" height="200" ></a>
                                                                                                               

<a href="javascript:enlargeimage('/44be47bc0d669.jpeg', 600, 400)">
<img src="/44be47bc0d669.jpeg" align="middle" border=1 width="429" height="200" ></a> <a href="#">
</a></nobr>

</div>
</div>
               
                </td>
      </tr>
    </table> </td>

---

Another question, in java script pop up window, is it possible to have scroll bars? to view larger images

Thanks a lot, u r the best!

By the way, the distance between images increased, whit that style you provided, thanks for that!

That's invalid HTML. You can't have a head after a display element like a table cell. However, some browsers may ignore that. But the real problem is:

HTML Code:

---

<td colspan="2" valign="top">

---

What do you think valign="top" means? That is what is 'pushing things up'.

Now, in general, your page should be organized like so:

HTML Code:

---

DOCTYPE
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

---

With only one of each of the above tags in it. Things like tables, divisions and paragraphs go in the body, style in the head and scripts can go either place but usually belong in one place or the other according to their installation instructions.

You can ignore these basic rules of organization if you like. But, many browsers will not render your page if you do.

Thanks a lot for reply!!
Now about valign =top - i have a header and a footer on my website, everything in between is in the table with valign=top. I tried to change it to "middle", but pictures are still jumping to the top!!! Now inside that table i have another table --> thats where the actual gallery goes, and vaign =middle should align everything in that table to the middle ( it does except gallery!).

Regarding the <head> section - i was allready told that its illegal, but i need to load certain java scripts for certain pages. Now i could do all that in my "header" <head> -but then it would be overloaded with unnecessary scripts which would load every time. So i decided to have another <head> to load scripts on demand -- i've seen they do it on some websites. Is there any better way?

But the main question still stands, it looks like gallery does not obey table alignment rules, smething still pushing it to the top:(

Thanks again

Sounds like you have a very non-standard page, a very non-standard site in fact. I think to be of any further help I would need a link to the page in question.

BTW, many scripts that say that they belong in the head can go in the body of a page. In fact, if a page with two heads, one in the proper location and one in the body works, then the second 'head' is not a head at all but, just a typo or a misguided effort. Those extra <head></head> tags could be skipped and everything would work as well as it does without them. Further, if a script that is supposed to go in the head will work in the body section, it would be best to put it as close to the top of the body section as possible. It will work the best there.

Hey John,i folowed your advice and removed extra <head>, script seems to work fine, so i live it like that for now.
Now about the picture gallery, i removed header and footer, tried absolutely everything to align the gallery, no luck. Here is a stripped version of the page
http://www.netops-performance.com/He...p?device_id=10

there in no usual <html><head>... blabla, all of that is in the header, so if you could take a look and say what u think is wrong, thanks again, u are of a great help.

I think I misunderstood your original requirements. In the past whenever vertical centering of this script was requested, it was because the images were of different heights. On your example page, the images are all the same height. Since you are using a table with the display cell set to valign="middle", the content will be vertically centered, however it (the content) must be shorter than the td for this to be noticeable. I simply changed this (highlight red):

Code:

---

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

---

to the height of the images, and that took care of it. This height setting should always be the height of the tallest image plus twice the image border width (if any), no larger. If you decide to also use images of varying heights, then my previous suggestion of adding to gallerystyle.css:

Code:

---

#trueContainer img {
vertical-align:middle;
}

---

should also be used.