Automatic Picture Resizing

p27rpy

New Member
I have noticed how alot of people here post huge images that take up the whole screen, making you scroll to see the whole thing (yes, im guilty too). i like how TeamIntegra.net has an automatic picture resizing code in it, so that it resizes pictures to a pre-determined size, and you click on it to see a bigger image. (example of one of my TI.net threads with auto-resized pics) i researched it, and found this code:

Code:
function ResizeImages() {
	var MaxWidth = 640;
	var img, hgt, wdth;
	for(var i=0;i < document.images.length; i++) {
		if (document.images[i].width > MaxWidth) {
			img = document.images[i];
			wdth = img.width;
			hgt = img.height;
			img.width = MaxWidth;
			img.style.border = 'solid 2px #0000ff';
			img.title = 'Click to See Full Size Image (' + wdth + ' x ' + hgt + ' Pixels)';
			if (window && window.event) {
				img.style.cursor = 'hand';
				img.onclick = function (e) {window.open(window.event.srcElement.src)}
			}
			else {
				img.style.cursor = 'pointer';
				img.onclick = function (e) {window.open(e.target.src)}
			}
			
		}
	}
}
and just call <body onLoad="ResizeImages()"> [:)]

if you put that code in, it should automatically resize all the pics in the forum, and its something that i think would be very beneficial. think about it!
thanks
theo

Link was found here . it was actually posted by MorningZ, the owner of TI.net!
 
Last edited:

p27rpy

New Member
heres another one that he says works.

Code:
<td class="ForumMessageBox" id="Table983798" height="100%">    <div id="MsgText983798"><img src="/images/blank.gif" width="10" height="1" /></div>    Message Text from the base....</td>


Where "983798" is the Message ID of the form post...

and the code that i run in <body onLoad="ResizeImages()"> :


function ResizeImages() {	var MaxWidth = 640;	var img, hgt, wdth;	var firstIndex = -1;	var blnDidResize = false;	for(var i=0; i < document.images.length; i++) {		if (document.images[i].width > MaxWidth) {			if (firstIndex == -1) firstIndex = i;			img = document.images[i];			wdth = img.width;			hgt = img.height;			img.width = MaxWidth;			img.style.border = 'solid 3px #0000ff';			img.title = 'Click to See Full Size Image (' + wdth + ' x ' + hgt + ' Pixels)';			if (window && window.event) {				img.style.cursor = 'hand';				img.onclick = function (e) {window.open(window.event.srcElement.src)}			}			else {				img.style.cursor = 'pointer';				img.onclick = function (e) {window.open(e.target.src)}			}		}	}	if (firstIndex > -1) SetResizedText(document.images[firstIndex]);}function SetResizedText(tag) {	var SpinCount = 0; 	do {		SpinCount += 1;		tag = tag.parentNode;	} while ((tag.nodeName != 'TD') && (SpinCount < 15));	if (SpinCount < 15) {		var TextDiv = tag.id.replace(/^Table/,'MsgText');		if (document.getElementById(TextDiv)) {			var obj = document.getElementById(TextDiv);			obj.style.padding = '4px';			obj.innerHTML = '<b><i>- Please Click the Blue Bordered Images to View Full Size</i></b>';		}	}}
 


g3teg97

Super Moderator
I also like the idea. It's not really an issue that much, but sometimes it is. BTW: Photobucket can resize images.
 


p27rpy

New Member
true, true, i just think that the auto resize is really convenient. im not sure exactly what it would take to get it working, but i think its a great idea
 

g3teg97

Super Moderator
I would help members that are on slower internet connection speeds as well.

Hopefully this can happen!
 

NOFX

hater
All I know is it's too small on CC! It makes it annoying as hell. Resizing is one thing, but it's resizing nearly EVERYTHING. Plus I've noticed people posting truly MASSIVE images more often now since they know the site will auto resize it. This means if we decide to not use it anymore... we'll have all these huge images. When you go to reply to a thread it shows the original size of the image too. So the reply window runs across the screen as it loads.
 

g3teg97

Super Moderator
Maybe the width of the site needs to be extended some more. I think pictures that are 720px wide are ok.
 


Top