Pixelpost

rockyrapier · #1 01-16-2006, 02:39 AM

I was at a friends, and he runs his computer at high resolutions. My parents run their computer at low resolutions. Thus when picking the photo size to post, both have to be taken into consideration. I got to thinking, why can't we have pixelpost display the images in a relative fashion?

I worked out some javascript that does what I'm talking about, and I have posted here to see if anyone wants to help me integrate this functionality into pixelpost as a hack. I like the idea in theory. I can post a large image, and everyone sees it at their individual maximums.

http://thisyear.ca/resize/test.html

Basically as you scale the browser window the image scales to remain visible without sliders.

Code:

<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

</head>
<body>
<div style="width:100%;height:100%">
<img id="image1" src="ruins.jpg" size="600">
<script>
var scale=.95;
function fnResize() {
	//find image dimensions
	iw=document.getElementById("image1").width;
	ih=document.getElementById("image1").height;
	ir=iw/ih;
	
	//find window dimensions
	ww=document.body.offsetWidth;
	wh=document.body.offsetHeight;
	wr=ww/wh;
	
	if(wr<ir) {
		document.getElementById("image1").width=ww*scale; 
		document.getElementById("image1").height=ww*scale/ir;
	}
	else
	{
		document.getElementById("image1").height=wh*scale;
		document.getElementById("image1").width=wh*scale*ir;
	}

}
fnResize();
window.onresize=fnResize;

</script>
</div>
</body>
</html>

se.nsuo.us · #2 01-16-2006, 04:03 AM

Great idea - I like it very much - what kind of help you need, also I would like this to work in conjunction with the auto_resize addon where the full size image will be shown to people who have larger screen and so on...

rockyrapier · #3 01-16-2006, 01:37 PM

I wasn't really thinking straight before. This javascript should only need to be placed inside the template files, not any pixelpost core files.

I've quickly just gone and placed it inside the simple template, and get seimi-working functionality in IE, but poor results in FF. My coding ability is not great, so any help on this is greatly appreciated.

I'm just looking for a way to incorporate it into a basic theme. It seems right now that the extra text on the screen that was not present in my image only tests messes with the javascript calaculations on size.

Currently active at http://www.photos.thisyear.ca.
Works pretty good in IE, not so well in FF.

se.nsuo.us · #4 01-16-2006, 02:45 PM

OK! small bug - The resizing allows the picture to become larger than 100% this looks bad...

rockyrapier · #5 01-16-2006, 07:02 PM

The intention is that the source image will be uploaded in the highest resolution you want to be displayed. So the test is faulted in that my images are only 700px wide.

However, I should include a line that limits the maximum image size to the actual size of the image.

I think I've got it working okay in FF now, but have found an error in IE that seems to be caused by the properties i used to test the height of the window, were actually the height of the page. so when image gets bigger, page gets longer, keeps resizing things over thousands of iterations, and a due to rounding errors it finally gets square.

Pixelpost

Authentic Photoblog Flavour