PDA

View Full Version : CMotion Image Gallery



mike@parker-design.co.uk
07-26-2006, 04:19 PM
1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.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:

jscheuer1
07-27-2006, 06:34 AM
Put this script in the head of the page:


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


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


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

martino
07-31-2006, 09:19 PM
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

martino
07-31-2006, 09:21 PM
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>

martino
07-31-2006, 09:27 PM
Is is possible to add a fade effect such as filter:progid:DXImageTransform.Microsoft.Fade() to the enlarged image in the iframe?

Thanks,
Martin

jscheuer1
07-31-2006, 09:55 PM
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.

jscheuer1
07-31-2006, 10:33 PM
Turns out it isn't that hard, you can use the filter with the iframe. Put this style in the head:


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


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:


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

martino
08-01-2006, 02:50 PM
Thanks John, that works perfectly.

Much appreciated.

martino
08-11-2006, 03:49 PM
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

jscheuer1
08-11-2006, 06:06 PM
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.

martino
08-11-2006, 07:06 PM
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

jscheuer1
08-11-2006, 07:34 PM
Something like this:


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


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.

martino
08-11-2006, 08:14 PM
Where would I add the code to open the largest image, once the medium image is clicked?

Now its, but doesn't work:


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

martino
08-11-2006, 08:27 PM
I'm so close...but no cigar:



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

jscheuer1
08-12-2006, 04:34 AM
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):



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:


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


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:


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.

martino
08-14-2006, 02:52 PM
Thanks for explaining that...it works great.

Much appreciated...keep up the good work!

martino
08-16-2006, 03:16 PM
Hi again,

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

chas
08-17-2006, 02:19 AM
this mod for all browsers or just MS??

jscheuer1
08-17-2006, 04:58 AM
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):


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


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:


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.

jscheuer1
08-17-2006, 05:03 AM
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.

martino
08-17-2006, 02:34 PM
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.
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

jscheuer1
08-17-2006, 06:42 PM
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:


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:


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


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

martino
08-22-2006, 03:42 PM
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?

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



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

Thanks for your help!

jscheuer1
08-23-2006, 04:22 AM
Sure, but - do you intend for all of your pop-ups to be the same size? If so:


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();
}

martino
08-23-2006, 03:10 PM
Thanks! That works great for same size images but is it difficult to impliment centered various size popups?

jscheuer1
08-23-2006, 03:59 PM
Not too involved, but a little bit, that's why I asked:


. . . 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):


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:


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


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:


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

martino
09-02-2006, 06:49 PM
Thanks John, that works great...much appreciated.

builderbloke
09-04-2006, 10:44 PM
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.

jscheuer1
09-04-2006, 11:28 PM
<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:


document.images

for the blue part. Also:


document.images.mainpic1.src

would be better than document.mainpic1.src


The language attribute has been deprecated use:


type="text/javascript"

instead and for forward compatibility use lower case tag names.

builderbloke
09-05-2006, 03:52 PM
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