CMotion Image Gallery

**martino** · 08-17-2006, 02:34 PM

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

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

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.

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

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!

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

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

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

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>

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

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.

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

Thread: CMotion Image Gallery

Thread Tools

Search Thread

Putting a large image on the same page as CMotion

Well I never said I was Clever...

Bookmarks

Bookmarks

Posting Permissions