Log in

View Full Version : 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:


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


<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:
<iframe id="dispics" src="1st.jpg" width="400px" height="400px" scrollbars="yes"></iframe>and then, make a bunch of thunbnails:
<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>
<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>
<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>
<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
:eek: WOW...Thanx For All Of Your Hard Work On This...You're The Greatest...You're Work Is Greatly Appreciated...The Code Works Great ;)