A little help with this code please?

@MephistoAug 16.2005

Hello,

I’m using this code to open images on my site:

[CODE]<a target=”_blank” href=”%%image2%%” onClick=”window.open(this.href,’winname’,’width=330,height=280′); return false;”>[/CODE]

Can anyone tell me how i can make this open pictures in their original size with no blank space on the sides? Perhaps without the ~~[B]~~‘width=330,height=280’[/B] ?

In avance, thank you.

to post a comment

JavaScript

9 Comments(s) _↴

@rigadonAug 16.2005 — #I think you'll need to resize the window to fit. Have a look at [URL=http://www.pawsoft.net/cats/peach_photos.html]this page[/URL] which has a photo album I did for my sister. Click on a photo for a larger version in a resized window. The relevant code is in [URL=http://www.pawsoft.net/cats/album.js]album.js[/URL].

@CharlesAug 16.2005 — #Your best bet is to put each image ventered in its own HTML page with a neutral background.

@MephistoauthorAug 16.2005 — #rigadon > That was exactly what i was looking for. The only problem is, I have no idea where to put that code.. The site i'm working now is my second website. The first one was just a geocities homepage.. Now, i'm trying to build an online community, which i've sort of managed to do.

Here's a random profile from my site where you can see how the photos open:

[URL=http://www.wickedvirtuality.com/cgi-bin/members/pm.cgi?action=display&login=heggy][ LINK ][/URL]

Isn't there a simpler way to make them open the way 'rigadons' photos did?

@rigadonAug 16.2005 — #Okay all you need to do is add the following to your <head>...</head> section:

[CODE]<script language='JavaScript'><!--
 function openWindow(html,t)
 { var win = window.open("", "win", "width=600,height=450,location=no,menubar=no,resizable=yes,scrollbars=no,status=no,titlebar=no,toolbar=no"); // a window object
 var script="<script language='javascript'> var NS = (navigator.appName=='Netscape')?true:false; function fitPic() { iWidth = (NS)?window.innerWidth:document.body.clientWidth; iHeight = (NS)?window.innerHeight:document.body.clientHeight; iWidth = document.images[0].width - iWidth; iHeight = document.images[0].height - iHeight; window.resizeBy(iWidth, iHeight); self.focus(); }; </script>";
 
 with (win.document)
 { open("text/html", "replace");
 write("<HTML><HEAD><LINK rel=stylesheet href="../main.css" type="text/css">");
 write("<TITLE>" + t + "</TITLE>");
 write(script);
 write("</HEAD><BODY onLoad="fitPic();" style="MARGIN: 0px;">");
 write(html);
 write("</BODY></HTML>");
 close();
 }
 }
 --></script>[/CODE]

And then for each photo do something like this:

[CODE]<span onClick="openWindow('<img src='<photo_url>'>', '<photo_name>');"> <IMG alt="<photo_name>" src="<thumbnail_url>"> </a>[/CODE]

@Jonny_LangAug 16.2005 — #

[CODE]<HTML>
 <Head>
 <Script Language=JavaScript>
 
  var largerView = "";
  var winToggle = false;
 
  function openFullSize(Pix,isDesc){
 
   if (winToggle){largerView.close()}
   document.getElementById('nullIMG').src = Pix;
   wStr = document.getElementById('nullIMG').width;
   offsetW = wStr;
   wStr = wStr+20;
   wStr = "width="+wStr;
   hStr = document.getElementById('nullIMG').height;
   offsetH = hStr;
   hStr = hStr+20;
   hStr = "height="+hStr;
   lStr = (screen.width-50-offsetW)/2;
   lStr = "left="+lStr;
   tStr = (screen.availHeight-50-offsetH)/2;
   tStr = "top="+tStr;
   largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
   largerView.document.images[0].alt = isDesc;
   largerView.document.title = isDesc;
   winToggle = true;
  }
 
  function buildSupport(){
 
   styleStr = "<style>.thumb{cursor:pointer;border:solid blue 2px}</style>"
   divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
   document.write(divStr);
   document.write(styleStr);
  }
 
  buildSupport();
 
  window.onunload=function(){
 
   if (winToggle && !largerView.closed){largerView.close()}
  }
 </Script>
 </Head>
 <Body>
 <Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
 <Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
 <!-- The following line must be the LAST line in the Body -->
 <Script> document.getElementById('nullIMG').src = document.images[1].src </Script>
 </Body>
 </HTML>[/CODE]

@MephistoauthorAug 16.2005 — #Jonny Lang > I did exactly what you said, and it works fine, but there are still some issues that I cannot figure out. When I click a thumbnail that leads to a large image, close it, and then click a thumb that leads to a smaller image, the frame will still remain the same size as the first. I have to click the thumbs twise in order to make them full sized.

Here Is a [URL=http://www.wickedvirtuality.com/cgi-bin/members/pm.cgi?action=display&login=DemDeBlu]sample[/URL] of a profile. Try clicking the different images and you will see what I mean.

Also, there is a white "inner frame" that i'd like to get rid of. Is there a way to set a background color into these frames?

@Jonny_LangAug 16.2005 — #Mephisto:

I never told you to do anything.

Sorry, but the code works AS IS. I won't go to your page and test it, because it's not the code I posted. MANY others have used this code without incident.

Simply put, if it doesn't suit you, don't use it.

Otherwise, please, take the code I posted, copy it to a blank NotePad document, save it with the name of your choice, and give it the .html extension.

Test that file AS IS. If that means creating a folder named 1, and changing the names of your images to Any.jpg and Some.jpg, then that's what it takes.

Unless and until you test the code AS IS, please, don't attempt to incorporate it into an existing document.

Forgive me but, the "white inner frame" of which you complain, is rather a picayune, and trite criticism, and I won't take further notice of it.

@MephistoauthorAug 16.2005 — #?

I didn't mean to criticise anything. The code you posted worked great. I was just asking for some further advice..

Anyway, thank you for helping me out.

@sunkmanAug 16.2005 — #Mephisto:

I never told you to do anything.

Sorry, but the code works AS IS. I won't go to your page and test it, because it's not the code I posted. MANY others have used this code without incident.

Simply put, if it doesn't suit you, don't use it.

Otherwise, please, take the code I posted, copy it to a blank NotePad document, save it with the name of your choice, and give it the .html extension.

Test that file AS IS. If that means creating a folder named 1, and changing the names of your images to Any.jpg and Some.jpg, then that's what it takes.

Unless and until you test the code AS IS, please, don't attempt to incorporate it into an existing document.

Forgive me but, the "white inner frame" of which you complain, is rather a picayune, and trite criticism, and I won't take further notice of it.[/QUOTE]

Jonny has anger management issues ?

Also in #JavaScript _↴

Clean contents of Table and put them into their own divs?javascript equiv to right(var,1)about Dropdown Box Population (Revised)

Success!

Help @Mephisto spread the word by sharing this article on Twitter...

Tweet This

A little help with this code please?

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

A little help with this code please?

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴