9 Replies - 4067 Views - Last Post: 17 September 2002 - 08:05 PM

#1 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Opening A New Window

Posted 11 September 2002 - 07:38 PM

how do you resize windows?

like you click on a picture and it comes up smaller, like on this SITE (in the eye candy section/graphics)
Is This A Good Question/Topic? 0
  • +

Replies To: Opening A New Window

#2 supernova333   User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Opening A New Window

Posted 11 September 2002 - 09:40 PM

They use a javascript to open a new window. Here's the script (which would go in the head of your html doc):

<script language="Javascript">
<!--
function JustSoPicWindow(imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin) {
// by E Michael Brandt of ValleyWebDesigns.com - Please leave these comments intact.
// version 3.0.4  

	if (bgcolor=="") {
  bgcolor="#FFFFFF";
	}
	var adj=10
	var w = screen.width;
	var h = screen.height;
	var byFactor=1;

	if(w<740){
   var lift=0.90;
	}
	if(w>=740 & w<835){
   var lift=0.91;
	}
	if(w>=835){
   var lift=0.93;
	}
	if (imageWidth>w){	
   byFactor = w / imageWidth; 	 
   imageWidth = w;
   imageHeight = imageHeight * byFactor;
	}
	if (imageHeight>h-adj){
   byFactor = h / imageHeight;
   imageWidth = (imageWidth * byFactor);
   imageHeight = h; 
	}
    
	var scrWidth = w-adj;
	var scrHeight = (h*lift)-adj;

	if (imageHeight>scrHeight){
     imageHeight=imageHeight*lift;
   imageWidth=imageWidth*lift;
	}

	var posLeft=0;
	var posTop=0;

	if (hugger == "hug image"){
   if (hugMargin == ""){
     hugMargin = 0;
   }
   var scrHeightTemp = imageHeight - 0 + 2*hugMargin;
   if (scrHeightTemp < scrHeight) {
  scrHeight = scrHeightTemp;
   } 
   var scrWidthTemp = imageWidth - 0 + 2*hugMargin;
   if (scrWidthTemp < scrWidth) {
  scrWidth = scrWidthTemp;
   }
   
   if (scrHeight<100){scrHeight=100;}
   if (scrWidth<100){scrWidth=100;}

   posTop =  ((h-(scrHeight/lift)-adj)/2);
   posLeft = ((w-(scrWidth)-adj)/2);
  }

	if (imageHeight > (h*lift)-adj || imageWidth > w-adj){
  imageHeight=imageHeight-adj;
  imageWidth=imageWidth-adj;
	}
	posTop = parseInt(posTop);
	posLeft = parseInt(posLeft);  
	scrWidth = parseInt(scrWidth); 
	scrHeight = parseInt(scrHeight);
	
	var agt=navigator.userAgent.toLowerCase();
	if (agt.indexOf("opera") != -1){
   var args= new Array();
   args[0]='parent';
   args[1]=imageName;
   var i; document.MM_returnValue = false;
   for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	} else {
	newWindow = window.open("vwd_justso.htm","newWindow","width="+scrWidth+",height="+scrHeight+",left="+posLeft+",top="+posTop);
	newwindow.document.open();
	newwindow.document.write('<html><title>'+alt+'</title><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor='+bgcolor+' onblur="self.close()" onclick="self.close()">');  
	newwindow.document.write('<table width='+imageWidth+' border="0" cellspacing="0" cellpadding="0" align="center" height='+scrHeight+' ><tr><td>');
	newwindow.document.write('<img src="'+imageName+'" width='+imageWidth+' height='+imageHeight+' alt="Click screen to close" >'); 
	newwindow.document.write('</td></tr></table></body></html>');
	newwindow.document.close();
	newwindow.focus();
	}
}
//-->
</script>



Here is the code you put on the page with your small image:

<a href="javascript:;"><img src="../121001/thumbs/12100004.jpg" width="100" height="75" onclick="JustSoPicWindow('../121001/12100004.jpg','402','302','* * Click screen to close * *','#ff0099','hug image','2');return document.MM_returnValue" border="0"></a>


All the stuff inside the onclick string are the attributes that get passed to the script. As seen in the script above they are (imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin).

If you use Dreamweaver, the guy that made the script has an extention you can use at http://valleywebdesi...vwd_dw_JSPW.htm
Was This Post Helpful? 0
  • +
  • -

#3 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Opening A New Window

Posted 14 September 2002 - 12:21 AM

thanks, that was a big help, except the thumbnail is not opening the full-size image in a new window...

HERE'S THE PAGE

what's wrong?
Was This Post Helpful? 0
  • +
  • -

#4 supernova333   User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Opening A New Window

Posted 14 September 2002 - 11:40 AM

I am getting runtime errors. I think this is the problem, here is what you have at the end of your script section:

<!--
window.open("http://www.truepath.com/ads/popup.shtml","popup","resizeable=YES,width=480,height=100");
//-->
</SCRIPT>
</body></html>');
newwindow.document.close();
newwindow.focus();
}
}
//-->
</script>


It looks like you added some extra script in there, it doesn't look like what I gave you. try it agin with just the script I gave you and once that works, then add your other scripts and things, that way you can see what is causing the problem.
Was This Post Helpful? 0
  • +
  • -

#5 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Opening A New Window

Posted 14 September 2002 - 12:05 PM

i took that out, but now i'm just getting THIS

:angry:
Was This Post Helpful? 0
  • +
  • -

#6 supernova333   User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Opening A New Window

Posted 14 September 2002 - 12:16 PM

It works here, use this as you "template" and add your personal stuff from there:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="Javascript">
<!--
function JustSoPicWindow(imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin) {
// by E Michael Brandt of ValleyWebDesigns.com - Please leave these comments intact.
// version 3.0.4  

if (bgcolor=="") {
 bgcolor="#FFFFFF";
}
var adj=10
var w = screen.width;
var h = screen.height;
var byFactor=1;

if(w<740){
  var lift=0.90;
}
if(w>=740 & w<835){
  var lift=0.91;
}
if(w>=835){
  var lift=0.93;
}
if (imageWidth>w){ 
  byFactor = w / imageWidth;   
  imageWidth = w;
  imageHeight = imageHeight * byFactor;
}
if (imageHeight>h-adj){
  byFactor = h / imageHeight;
  imageWidth = (imageWidth * byFactor);
  imageHeight = h; 
}
   
var scrWidth = w-adj;
var scrHeight = (h*lift)-adj;

if (imageHeight>scrHeight){
    imageHeight=imageHeight*lift;
  imageWidth=imageWidth*lift;
}

var posLeft=0;
var posTop=0;

if (hugger == "hug image"){
  if (hugMargin == ""){
    hugMargin = 0;
  }
  var scrHeightTemp = imageHeight - 0 + 2*hugMargin;
  if (scrHeightTemp < scrHeight) {
 scrHeight = scrHeightTemp;
  } 
  var scrWidthTemp = imageWidth - 0 + 2*hugMargin;
  if (scrWidthTemp < scrWidth) {
 scrWidth = scrWidthTemp;
  }
  
  if (scrHeight<100){scrHeight=100;}
  if (scrWidth<100){scrWidth=100;}

  posTop =  ((h-(scrHeight/lift)-adj)/2);
  posLeft = ((w-(scrWidth)-adj)/2);
 }

if (imageHeight > (h*lift)-adj || imageWidth > w-adj){
 imageHeight=imageHeight-adj;
 imageWidth=imageWidth-adj;
}
posTop = parseInt(posTop);
posLeft = parseInt(posLeft);  
scrWidth = parseInt(scrWidth); 
scrHeight = parseInt(scrHeight);

var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1){
  var args= new Array();
  args[0]='parent';
  args[1]=imageName;
  var i; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
} else {
newWindow = window.open("vwd_justso.htm","newWindow","width="+scrWidth+",height="+scrHeight+",left="+posLeft+",top="+posTop);
newwindow.document.open();
newwindow.document.write('<html><title>'+alt+'</title><body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" bgcolor='+bgcolor+' onblur="self.close()" onclick="self.close()">');  
newwindow.document.write('<table width='+imageWidth+' border="0" cellspacing="0" cellpadding="0" align="center" height='+scrHeight+' ><tr><td>');
newwindow.document.write('<img src="'+imageName+'" width='+imageWidth+' height='+imageHeight+' alt="Click screen to close" >'); 
newwindow.document.write('</td></tr></table></body></html>');
newwindow.document.close();
newwindow.focus();
}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<a href="javascript:;"><img src="../121001/thumbs/12100004.jpg" width="100" height="75" onclick="JustSoPicWindow('../121001/12100004.jpg','402','302','* * Click screen to close * *','#ff0099','hug image','2');return document.MM_returnValue" border="0"></a>
</body>
</html>



Just change the image paths and dimentions to match yours.

I am also attaching the file:

Attached File(s)

  • Attached File  main.htm (3.06K)
    Number of downloads: 101

Was This Post Helpful? 0
  • +
  • -

#7 supernova333   User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Opening A New Window

Posted 14 September 2002 - 12:24 PM

Ok, attached here is your actual web page with the javascript fixed.

You need to edit the properties of the onclick=" stuff to match the location and dimentions of your image. All the stuff inside the onclick string are the attributes that get passed to the script. As seen in the script they are (imageName,imageWidth,imageHeight,alt,bgcolor,hugger,hugMargin).

Hope that works :)

Attached File(s)

  • Attached File  main.htm (3.55K)
    Number of downloads: 100

Was This Post Helpful? 0
  • +
  • -

#8 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Opening A New Window

Posted 14 September 2002 - 12:37 PM

ok, i don't understand this. i copied the EXACT code that was in the attachment (which worked by the way) into the real file and it still doesn't work! i don't understand this!

i mean, why would it not work if i copied it right from the working source?
Was This Post Helpful? 0
  • +
  • -

#9 supernova333   User is offline

  • D.I.C Addict

Reputation: 4
  • View blog
  • Posts: 590
  • Joined: 12-March 02

Re: Opening A New Window

Posted 14 September 2002 - 01:56 PM

I'm not sure what you mean, the second attachment IS the real file. I copied it from YOUR file and just fixed the javascript. You don't have to copy it into anything else, just take that file and add your other pics or text to it.
Was This Post Helpful? 0
  • +
  • -

#10 rocks.in.my.shoes   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 445
  • Joined: 11-July 02

Re: Opening A New Window

Posted 17 September 2002 - 08:05 PM

how do i center the new windows (so when you click on the thumbnail, the new window opens in center of screen instead of top left)...

...and how do you add/link new pictures of the full-size images to open from thumbnails (click on the barn picture to see what i mean)

THE SITE
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1