Adding Scrollbars

**Man of Wonder** · 04-03-2005, 09:08 PM

Hi

I Found A Code That I Would Like To Use, But I Was Wondering If Somebody Could Tweak It For Me...It's A Code That Allows An Image To Pop Up When You Click On A Thumbnail...Well The Only Problem Is, Is That It Doesn't Allow Scrollbars And Just Shrinks The Image...So I Was Wondering If ANybody Could Add Scrollbars To The Code...I've Posted The Code Under This...If Anybody Could Help, It Would Be Greatly Appreciated:

Javascript Code:

Code:

<script language="JavaScript" type="text/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+'  >');  
    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+' >'); 
    newWindow.document.write('</td></tr></table></body></html>');
    newWindow.document.close();
    newWindow.focus();
    }
}

function Lvl_openWin(u,n,w,h,l,t,c,f) { //v2.2 4LevelWebs
  var x=((screen.width-w)/2);if(c==1){l=x;t=(screen.height-h)/2;}if(c==2){l=x}
    f+=',top='+t+',left='+l;LvlWin=window.open(u,n,f);LvlWin.focus();
}
//-->
</script>

Action Code:

Code:

<a href="javascript:;" onClick="JustSoPicWindow('manofwonderland.vzz.net/graphic-design-scans-wrestlers-big-show-kurt-angle-1-thumbnail.jpg','728','600','TNA Wrestling','#000000','hug image','0');return document.MM_returnValue"><img src="graphic-design-scans-wrestlers-big-show-kurt-angle-1-thumbnail.jpg" border="0"/></a>

I Have Tried Everything I Could To Add Them, But Unfortunately I'm ot That Good With Javascript And Was Not Suucessful...Thanx Anybody That Can Contribute

**jscheuer1** · 04-03-2005, 10:07 PM

Well, you could try setting the size to the size of the largest image and putting it in an iframe.

**Man of Wonder** · 04-03-2005, 10:18 PM

If I Was To Add An Iframe Then I Would Have To Make A Page For Every Image, Wouldn't I...And I'm Dealing With Images Over 1000x1000 So When The Images Pop Up, That Code Strinks Them Instead Of Automatically Converting To Scrollbars

**jscheuer1** · 04-03-2005, 11:19 PM

mmm, images over 600x600, you say . . . that's odd. Well an Iframe has lots of things we can play with:

HTML Code:

<iframe id="dispics" src="1st.jpg" width="400px" height="400px" scrollbars="yes"></iframe>

and then, make a bunch of thunbnails:

HTML Code:

<img src="1st_thumb.jpg" onclick="getElementById('dispics').src='1st.jpg'">
<img src="2nd_thumb.jpg" onclick="getElementById('dispics').src='2nd.jpg'">

yes, you might need a page for each image I'd try without first (having a scrolling iframe might prevent shrinking), they would each be very simple pages though. Possibly you could use one page and pass it a variable to have it display the picture called for. Try with the images first, I have to run, I will get back to you.

**jscheuer1** · 04-04-2005, 03:17 AM

OK, I'm back. Worked OK in IE but in FF, the image did shrink. So, here is the work around, sample code for page with thumbnails:

HTML Code:

<html>
<head>
<title>Display Large Pics in Iframe Demo</title>
<!--copyright John Scheuer, permission to use granted, leave this message intact -->
</head>
<body>
<iframe name="dispics" src="disp.htm?var1=1st.jpg" width="400px" height="400px" scrollbars="yes"></iframe><br>
<a href="disp.htm?var1=1st.jpg" target="dispics"><img src="1st_thumb.jpg" border=0></a><br>
<a href="disp.htm?var1=2nd.jpg" target="dispics"><img src="2nd_thumb.jpg" border=0></a>
</body>
</html>

and here is the code for disp.htm:

HTML Code:

<html>
<head>
<title>Content Page for Display Large Pics in Iframe Demo</title>
<!--copyright John Scheuer, permission to use granted, leave this message intact -->
</head>
<body>
<form name="receive">
<input type="hidden" name="var1">
</form>
<script type="text/javascript">
var locate = window.location;
document.receive.var1.value = locate;
var text = document.receive.var1.value;
function delineate(str) {
theleft = str.indexOf("=") + 1;
theright = str.indexOf("&");
return(str.substring(theleft, str.length));
}
document.write("<img src=\"" +delineate(text)+"\">");
</script>
</body>
</html>

You only need one disp.htm

**jscheuer1** · 04-04-2005, 03:53 AM

I noticed that in FF (not IE) that the history stack was getting added to with each image change, to avoid that, use this for the thumbnails page:

HTML Code:

<html>
<head>
<title>Display Large Pics in Iframe Demo</title>
<!--copyright John Scheuer, permission to use granted, leave this message intact -->
</head>
<body>
<iframe name="dispics" src="disp.htm?var1=1st.jpg" width="400px" height="400px" scrollbars="yes"></iframe><br>
<img src="1st_thumb.jpg" border=0 onClick="dispics.location.replace('disp.htm?var1=1st.jpg')"><br>
<img src="2nd_thumb.jpg" border=0 onClick="dispics.location.replace('disp.htm?var1=2nd.jpg')">
</body>
</html>

**jscheuer1** · 04-04-2005, 05:06 PM

scrollbars=yes in the all my above should be scrolling=yes but, it makes little if any difference for the large images being used.

**Man of Wonder** · 04-04-2005, 07:43 PM

WOW...Thanx For All Of Your Hard Work On This...You're The Greatest...You're Work Is Greatly Appreciated...The Code Works Great

Thread: Adding Scrollbars

Thread Tools

Search Thread

Adding Scrollbars

Bookmarks

Bookmarks

Posting Permissions