CMotion Image Gallery

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

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.

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

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>

**martino** · 08-11-2006, 08:27 PM

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>

**jscheuer1** · 08-12-2006, 04:34 AM

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.

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

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.

**jscheuer1** · 08-17-2006, 05:03 AM

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.

Thread: CMotion Image Gallery

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions