CMotion Image Gallery

1) Script Title: CMotion Image Gallery

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

3) Describe problem: I am trying to get the script working so that the large image opens in an inline frame within my web page. This seams to work the first time an icon is clicked but won't work again until the page is refreshed.

I have changed the following line in motiongallery.js to:

window.open(path,"myframe", winattributes)

Any ideas??:confused:

Put this script in the head of the page:

Code:

---

<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="photo1.jpg"
dynimages[1]="photo2.jpg"
dynimages[2]="photo3.jpg"
dynimages[3]="photo4.jpg"
dynimages[4]="photo5.jpg"
dynimages[5]="photo6.jpg"
dynimages[6]="photo7.jpg"
dynimages[7]="photo8.jpg"
dynimages[8]="photo9.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}

function loadFrame(id, num){
document.getElementById(id).src=dynimages[num]
return false;
}

</script>

---

Use an iframe like this one:

HTML Code:

---

<iframe id="loadarea" src="" width="140" height="225" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

---

Use this type syntax in the cmotion images section:

HTML Code:

---

<nobr id="trueContainer"><a href="#" onClick="return loadFrame('loadarea', 0);"><img src="photo1_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 1);"><img src="photo2_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 2);"><img src="photo3_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 3);"><img src="photo4_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 4);"><img src="photo5_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 5);"><img src="photo6_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 6);"><img src="photo7_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 7);"><img src="photo8_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 8);"><img src="photo9_thumb.jpg" border="1"></a></nobr>

---

Hello,

I really like this modification to display the larger image in an iframe, how would I display the first image or a start image?

Thanks,
Martin

Quote:

---

Originally Posted by martino

Hello,

I really like this modification to display the larger image in an iframe, how would I display the first image or a start image?

Thanks,
Martin

---

Please disregard, I think I found a solution by adding
<iframe src="1.jpg" ... </iframe>

Is is possible to add a fade effect such as filter:progid:DXImageTransform.Microsoft.Fade() to the enlarged image in the iframe?

Thanks,
Martin

I think that to do that, you would need to put the image on a page with a script to apply the filter to it and load that page into the iframe. The page may or may not be able to be generated 'on the fly'. It could be a stock page into which each image could be loaded. I'll knock it around and get back to you. Alternatively, the filter might be able to be applied to the iframe itself.

Turns out it isn't that hard, you can use the filter with the iframe. Put this style in the head:

Code:

---

<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}
</style>

---

Change our function loadFrame(id, num) to this and add the variable declaration before it as shown:

Code:

---

var notloaded=1;
function loadFrame(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
return false;
}

---

Use this for the iframe:

HTML Code:

---

<iframe id="loadarea" src="about:blank" onload="if(notloaded){loadFrame('loadarea', 0);notloaded=0;};" width="140" height="225" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

---

Thanks John, that works perfectly.

Much appreciated.

Hello,

Great work with this mod, I have another question.
Is it possible to add this functionality to this code?

- can we link the larger image (iframe) to another larger image in a centered popup window?

Thanks!
Martin

If you were to be loading a page into the iframe that had the image on it, that image could be linked to do whatever you like. I'm not sure if the iframe itself would support a link though. If it would, that link could be dynamically changed along with the image. There is an easier way. You don't need an iframe for this at all, you could just use an image tag and have that linked. That link's href and/or onclick attributes could be dynamically updated along with the image tag's src attribute.

Hi John, thanks for you response and suggestion. I think that would be the best solution, can you explain how go about modifing the script as per your suggestion please.

Thanks,
Martin

Something like this:

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}
</style>
<script type="text/javascript" src="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>
<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="photo1.jpg"
dynimages[1]="photo2.jpg"
dynimages[2]="photo3.jpg"
dynimages[3]="photo4.jpg"
dynimages[4]="photo5.jpg"
dynimages[5]="photo6.jpg"
dynimages[6]="photo7.jpg"
dynimages[7]="photo8.jpg"
dynimages[8]="photo9.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
var theImage=dynimages[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=dynimages[num];
return false;
}

</script>
</head>
<body>
<div id="motioncontainer" style="position:relative;width:350px;height:113px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="#" onClick="return loadImage('loadarea', 0);"><img src="photo1_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 1);"><img src="photo2_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 2);"><img src="photo3_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 3);"><img src="photo4_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 4);"><img src="photo5_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 5);"><img src="photo6_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 6);"><img src="photo7_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 7);"><img src="photo8_thumb.jpg" border="1"></a> <a href="#" onClick="return loadImage('loadarea', 8);"><img src="photo9_thumb.jpg" border="1"></a></nobr>

</div>
</div>
<br>

<a href="javascript:void(0);" onclick="win=window.open(theImage,'gal','width=150, height=250');win.focus();"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>
</body>
</html>

---

Only, where I have it:

Code:

---

var theImage=dynimages[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=dynimages[num];
return false;
}

---

You would want to use the name of a different array that contains the names of the even larger images you are talking about.

Where would I add the code to open the largest image, once the medium image is clicked?

Now its, but doesn't work:

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable=no'
win = window.open(mypage,myname,settings)
}
</script>

<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}
</style>
<script type="text/javascript" src="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>
<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="torun1m.jpg"
dynimages[1]="torun2l.jpg"
dynimages[2]="torun3l.jpg"
dynimages[3]="torun4l.jpg"
dynimages[4]="basket1l.jpg"
dynimages[5]="basket2l.jpg"
dynimages[6]="alveol.jpg"
dynimages[7]="aquariusl.jpg"
dynimages[8]="barbakan1l.jpg"
dynimages[9]="barbakan2l.jpg"
dynimages[10]="barbakan3l.jpg"
dynimages[11]="naturallyl.jpg"
dynimages[12]="barbakan1l.jpg"
dynimages[13]="barbakan1l.jpg"
dynimages[14]="barbakan1l.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
var theImage=dynimages[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=dynimages[num];
return false;
}

</script>
</head>
<body>
<a href="javascript:void(0);" onClick="NewWindow(theImage,'gal','700','530','no');return false"><img src="torun1m.jpg" name="loadarea" width="426" height="289" border="0" id="loadarea"></a>
<div id="motioncontainer" style="position:relative;width:426px;height:113px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<a href="torun1l.jpg" onClick="return loadImage('loadarea', 0);"><img src="torun1_tb.jpg" border="1" width="100" height="100"></a>
<a href="#" onClick="return loadImage('loadarea', 1);"><img src="torun2_tb.jpg" border="1" width="100" height="100"></a> </nobr>

</div>
</div>
<br>
</body>
</html>

---

I'm so close...but no cigar:

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable=no'
win = window.open(mypage,myname,settings)
}
</script>

<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}
</style>
<script type="text/javascript" src="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>
<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="torun1l.jpg"
dynimages[1]="torun2l.jpg"
dynimages[2]="torun3l.jpg"
dynimages[3]="torun4l.jpg"
dynimages[4]="basket1l.jpg"
dynimages[5]="basket2l.jpg"
dynimages[6]="alveol.jpg"
dynimages[7]="aquariusl.jpg"
dynimages[8]="barbakan1l.jpg"
dynimages[9]="barbakan2l.jpg"
dynimages[10]="barbakan3l.jpg"
dynimages[11]="naturallyl.jpg"
dynimages[12]="barbakan1l.jpg"
dynimages[13]="barbakan1l.jpg"
dynimages[14]="barbakan1l.jpg"

var mediumImages=new Array()
mediumImages[0]="torun1m.jpg"
mediumImages[1]="torun2m.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
var theImage=dynimages[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=dynimages[num];
return false;
}
var theImageM=mediumImages[0];
function loadImage2(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=mediumImages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImageM=mediumImages[num];
return false;
}


</script>
</head>
<body>
<a href="javascript:void(0);" onClick="NewWindow(theImage,'gal','700','530','no');return false"><img src="torun1m.jpg" name="loadarea" width="426" height="289" border="0" id="loadarea"></a>
<div id="motioncontainer" style="position:relative;width:426px;height:113px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">
<a href="#" onClick="return loadImage2('loadarea', 0);"><img src="torun1_tb.jpg" border="1" width="100" height="100"></a>
<a href="#" onClick="return loadImage2('loadarea', 1);"><img src="torun2_tb.jpg" border="1" width="100" height="100"></a> </nobr>

</div>
</div>
<br>
</body>
</html>

---

Quote:

---

Originally Posted by martino

Where would I add the code to open the largest image, once the medium image is clicked?

---

No need, it is already in there, here (red):

Code:

---

var theImage=dynimages[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=dynimages[num];
return false;
}

---

and here:

Code:

---

<a href="javascript:void(0);" onclick="win=window.open(theImage,'gal','width=150, height=250');win.focus();"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>

---

All you need to do is change the red dynimages to the name of a new array and create that array, say like so:

Code:

---

var bigpictures=new Array();
bigpictures[0]="photo_huge1.jpg"
bigpictures[1]="photo_huge2.jpg"
bigpictures[2]="photo_huge3.jpg"
bigpictures[3]="photo_huge4.jpg"
bigpictures[4]="photo_huge5.jpg"
bigpictures[5]="photo_huge6.jpg"
bigpictures[6]="photo_huge7.jpg"
bigpictures[7]="photo_huge8.jpg"
bigpictures[8]="photo_huge9.jpg"

---

Put that right after the dynimages array in the script, then do like so:

Code:

---

var theImage=bigpictures[0];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=bigpictures[num];
return false;
}

---

as I explained in my previous post, replacing the code shown at the top of this post with the one right above this line.

Thanks for explaining that...it works great.

Much appreciated...keep up the good work!

Hi again,

Just wondering if its possible to close the bigpictures popup by simply clicking on the image?

this mod for all browsers or just MS??

Quote:

---

Originally Posted by martino

Hi again,

Just wondering if its possible to close the bigpictures popup by simply clicking on the image?

---

Yes. First off though, I omitted something that is a good idea in general from this part (addition red):

Code:

---

<a href="javascript:void(0);" onclick="win=window.open(theImage,'gal','width=150, height=250');win.focus();return false;"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>

---

And, incidentally, the green part is where the window is opened and the variable:

theImage

will hold the value from here that is active:

Code:

---

var bigpictures=new Array();
bigpictures[0]="photo_huge1.jpg"
bigpictures[1]="photo_huge2.jpg"
bigpictures[2]="photo_huge3.jpg"
bigpictures[3]="photo_huge4.jpg"
bigpictures[4]="photo_huge5.jpg"
bigpictures[5]="photo_huge6.jpg"
bigpictures[6]="photo_huge7.jpg"
bigpictures[7]="photo_huge8.jpg"
bigpictures[8]="photo_huge9.jpg"

---

If , instead of image names in this array, you use page names and have them each be a separate page containing one of the larger images, you will have much more control over how the images can be displayed in the new window. You could also substitute a function for:

Code:

---

win=window.open(theImage,'gal','width=150, height=250');win.focus();

---

And have that function generate a 'page on the fly' to a similar end. Specifications may be added or removed from the window.open() method itself regardless of its being in the onclick event or in a separate function, as well. The specifications most likely to add would be top and left, to position the new window on the user's screen. There are many to choose from though, you might want to look up the window.open() method and see. However, not all specifications are available in all browsers and many that used to be are now limited or blocked due to security reasons. Whenever you use pop ups, you should always bear in mind that the pop up itself may be block by any given browsers depending upon the user's settings. So, a DHTML pop up might actually be a better choice but, the disadvantage of that is - the larger image must fit into the current window even though it can be made to look much like it is in a separate one.

I think the 'on the fly' method is probably the most convenient. I will put something together for that when I get the chance but, if you are feeling adventurous, you might want to try some things out yourself.

Quote:

---

Originally Posted by chas

this mod for all browsers or just MS??

---

No and no. There are so many browsers and, pop ups can be problematical in any modern browser, including MS (IE), if the browser's settings aggressively block them. These techniques will work in FF, Opera, and IE and probably quite a few others, if their user configurable settings allow what are known as 'user initiated' pop ups. Most browser's default settings allow this.

Quote:

---

Originally Posted by jscheuer1

If , instead of image names in this array, you use page names and have them each be a separate page containing one of the larger images, you will have much more control over how the images can be displayed in the new window.

---

Thanks for your response John, I did what you suggested above and you're right, I was able to have more control of the images. (ie.

Code:

---

javascript:window.close();

---

on the large images.

I'm curious to see your 'on the fly' method because if there are many images in the gallery...it may be quite a lot of work creating individual pages.

Thanks!
Martin

Yah, you can get pretty involved with these 'on the fly' pages but, this should be sufficient, put this function at the end of your script:

Code:

---

function openDa(im){
var win=window.open('','gal','width=150, height=250, top=200, left=200');
win.document.write('<body style="margin:0;padding:0;margin-top:5px;text-align:center;">');
win.document.write('<a href="javascript:self.close();"><img src="'+im+'" border="0"><\/a>');
win.document.close();
win.focus();
}

---

Change this:

HTML Code:

---

<a href="javascript:void(0);" onclick="win=window.open(theImage,'gal','width=150, height=250');win.focus();"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>

---

to:

HTML Code:

---

<a href="javascript:void(0);" onclick="openDa(theImage);return false;"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>

---

Notes: Since you are making a page, use the image's names not page names in bigpictures array. You can add other stuff to the function openDa(im) if you like but, the simpler it is, the quicker it will load and the less likely that it may give some browser's any problems. Still, keep in mind pop ups will sometimes be blocked or sometimes displayed in tabs by some browsers.

Hi John,

Thanks for the update, it works well. However, since there as so many different resolutions and monitor sizes these days, it would be great to have the popup centered regardless of the resolution or screen size.

Is it possible to incorporate this centering script into your mod?

Code:

---

<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable=no'
win = window.open(mypage,myname,settings)
}
</script>

---

Code:

---

<a href="javascript:void(0);" onClick="NewWindow(theImage,'gal','700','530','no');return false">

---

Thanks for your help!

Sure, but - do you intend for all of your pop-ups to be the same size? If so:

Code:

---

function openDa(im){
LeftP = (screen.width) ? (screen.width-150)/2 : 200;
TopP = (screen.height) ? (screen.height-250)/2 : 200;
var win=window.open('','gal','width=150, height=250, top='+TopP+', left='+LeftP);
win.document.write('<body style="margin:0;padding:0;margin-top:5px;text-align:center;">');
win.document.write('<a href="javascript:self.close();"><img src="'+im+'" border="0"><\/a>');
win.document.close();
win.focus();
}

---

Thanks! That works great for same size images but is it difficult to impliment centered various size popups?

Not too involved, but a little bit, that's why I asked:

Quote:

---

Originally Posted by myself

. . . do you intend for all of your pop-ups to be the same size?

---

You need to have a way to pass the individual dimensions to it. For that, I think the best way would be to go back to and expand our 'bigpictures' array (additions red for first entry, observe the expanded syntax for all entries, as shown):

Code:

---

var bigpictures=new Array();
bigpictures[0]=["photo_huge1.jpg", 200, 200]
bigpictures[1]=["photo_huge2.jpg", 300, 250]
bigpictures[2]=["photo_huge3.jpg", 250, 250]
bigpictures[3]=["photo_huge4.jpg", 400, 450]
bigpictures[4]=["photo_huge5.jpg", 350, 200]
bigpictures[5]=["photo_huge6.jpg", 150, 225]
bigpictures[6]=["photo_huge7.jpg", 345, 500]
bigpictures[7]=["photo_huge8.jpg", 600, 400]
bigpictures[8]=["photo_huge9.jpg", 250, 100]

---

The added numbers are the width and height, respectively. Now our function could be:

Code:

---

function openDa(im, w, h){
LeftP = (screen.width) ? (screen.width-w)/2 : 200;
TopP = (screen.height) ? (screen.height-h)/2 : 200;
var win=window.open('','gal','width='+w+', height='+h+', top='+TopP+', left='+LeftP);
win.document.write('<body style="margin:0;padding:0;margin-top:5px;text-align:center;">');
win.document.write('<a href="javascript:self.close();"><img src="'+im+'" border="0"><\/a>');
win.document.close();
win.focus();
}

---

We would also need to change this bit (additions red):

Code:

---

var theImage=bigpictures[0][0];
var theW=bigpictures[0][1];
var theH=bigpictures[0][2];
function loadImage(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
theImage=bigpictures[num][0];
theW=bigpictures[num][1];
theH=bigpictures[num][2];
return false;
}

---

And, finally the call in the markup:

Code:

---

<a href="javascript:void(0);" onclick="openDa(theImage, theW, theH);return false;"><img id="loadarea" src="photo1.jpg" width="140" height="225" border="0"></a>

---

Thanks John, that works great...much appreciated.

In response to the original question in the thread about wanting to put a large image on the same webpage as the Cmotion scrolling image menu - I wanted to do the same but for various reasons didnt want to get into IFrames or var and arrays etc and the solution in the end was relatively simple adapting a freeware code I had used earlier and thanks to the versatility of the CMotion script and only requires a few lines of extra code.

In the head of your document paste the following:
------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic1(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic1.src = imgOn;
start();
}
}
</SCRIPT>
--------------------------------------------------------
doPic1 will be the main image on the wbepage next in the body of your document add a standard DIV entry for your main pic - this can be an introductory image to the gallery if you wish - e.g:
---------------------------------------------------------
<div style="position:absolute; z-index:7; visibility:visible; left:10px; top:10px; width:320px; height:240px"><img name="mainpic1" src="your image url & title" width="320px" height="240px">
----------------------------------------------------------
Change the position, width and height co-ords to suit your needs - then after the Cmotion gallery tab <nobr id="trueContainer"> add the following ahref to your motion menu images ....
-------------------------------------------------------------
<a href="javascript:doPic1('your img 1 src url and title');"<image src="your url and image 1 title">
<a href="javascript:doPic1('your img 2 src url and title');"<image src="your url and image 2 title">

and so on - mainpic1 will change to whatever menu image you click on - hope this is useful.

Quote:

---

Code:

---

<SCRIPT LANGUAGE="JavaScript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic1(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic1.src = imgOn;
start();
}
}
</SCRIPT>

---

---

Short and simple but, this type of browser testing will inevitably exclude some browsers capable of displaying your larger image. Skip the red part and substitute:

Code:

---

document.images

---

for the blue part. Also:

Code:

---

document.images.mainpic1.src

---

would be better than document.mainpic1.src


The language attribute has been deprecated use:

Code:

---

type="text/javascript"

---

instead and for forward compatibility use lower case tag names.

Excellent John... I'm still a relative beginner as must be painfully obvious! - but thats the joy of a forum on a excellent website like this - will amend my code accordingly as yours is much more elegant in its simplicity and function - Thanks