Printable View
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.Quote:
Originally Posted by jscheuer1
on the large images.Code:javascript:window.close();
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:
Change this: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();
}
to: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>
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.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>
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>
Thanks for your help!Code:<a href="javascript:void(0);" onClick="NewWindow(theImage,'gal','700','530','no');return false">
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:
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):Quote:
Originally Posted by myself
The added numbers are the width and height, respectively. Now our function could be: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]
We would also need to change this bit (additions red):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();
}
And, finally the call in the markup: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;
}
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.
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: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>
for the blue part. Also:Code:document.images
would be better than document.mainpic1.srcCode:document.images.mainpic1.src
The language attribute has been deprecated use:
instead and for forward compatibility use lower case tag names.Code:type="text/javascript"
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