Photo Album Script

**evilacme** · 01-10-2007, 03:09 PM

1) Script Title: Photo Album

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: Wondering if it is possible to resize an image to a specific WxH size using either exact pixels or can the image be resize based on a percentage of the width and height. So that this can be done for every image in the array. Right now, if the image is of a certain size, they can and will overlap.

Example
Image1 size is 1024x768 (original)
Image1 resize is 100x70 (pixels)
Image1 resize is 256x192 (25%x25% percentage of original)

**jscheuer1** · 01-10-2007, 07:50 PM

Which images are you talking about? It is best to resize your images to be the size that you need them to be rather than have the browser do it. Style for the images displayed is here:

Code:

<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: left;
width: 200px;
height: 270px;
}

.slideshow img{ 
width: 174px;
height: 146px;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 400px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>

You can use percentages and you can specify only the width, if desired, to scale the images but, this takes up extra browser overhead and may not be consistent across browsers and will look poorly in many browsers even if they get the size right. It is best no matter what you do that all images end up being the same size as each other in the layout.

**evilacme** · 01-11-2007, 06:08 PM

Alright, now for when a user clicks on the image, I have a script that does popImage() which does the full size picture. If I have a picture that is too large for someone's available screen size, how can I get the window to fit that available screen size and reduce the size of the image to fit the window?

Here is what I have currently for popImage()

Code:

var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle)
{
	if (isNN)
	{
		imgWin=window.open('about:blank','',optNN);
	}
	if (isIE)
	{
		imgWin=window.open('about:blank','',optIE);
	}
	with (imgWin.document)
	{
		writeln('<html><head><title>Loading...</title><style>body{margin:5px;}</style></head>');
		writeln('<sc'+'ript>');
		writeln('var isNN,isIE,width,height;');
		writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
		writeln('isNN=(navigator.appName=="Netscape")?1:0;');
		writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
		writeln('function reSizeToImage(){');
		writeln('if (isIE){');
		writeln('window.resizeTo(100,100);');
		writeln('width=300-(document.body.clientWidth-(document.images[0].width));');
		writeln('height=100-(document.body.clientHeight-(document.images[0].height))+20;');
		writeln('window.resizeTo(width,height);}');
		writeln('if (isNN){');
		writeln('window.innerWidth=document.images["George"].width+20;');
		writeln('window.innerHeight=document.images["George"].height+20;}}');
		writeln('function doTitle(){document.title="'+imageTitle+'";}');
		writeln('</sc'+'ript>');
		if (!AutoClose) 
			writeln('</head><body bgcolor=FFFFFF scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
		else 
			writeln('</head><body bgcolor=FFFFFF scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
		writeln('<div align="center"><img name="George" src='+imageURL+' border=0></div><div align="center"><a href="javascript: window.close();" style="font-size:10; color:#575757; font-family: Verdana; text-decoration: underline;">close window</a></div></body></html>');
		close();
	}
}

**jscheuer1** · 01-12-2007, 04:56 AM

If you do not writeln the document but instead link directly to the image, most browsers will take care of that for you, especially if you set the pop up window size on the basis of the user's available screen real estate.

Thread: Photo Album Script

Thread Tools

Search Thread

Photo Album Script

Bookmarks

Bookmarks

Posting Permissions