Snitz Forums 2000

Snitz Forums 2000

All Forums

Help Groups for Snitz Forums 2000 Users

Help: MOD Implementation

Hep with Javascript to automagically resize post images.

Note: You must be registered in order to post a reply.
To register, click here. Registration is FREE!
Before posting, make sure you have read this topic!

Screensize:

UserName:

Password:

Format Mode:

Format:

Message:

* HTML is OFF
* Forum Code is ON

Smilies

[quote][i]Originally posted by bobby131313[/i]
[br]Here is the javascript used....

[scrollcode]$(window).load(function() {

$('img').each(function() {
			var ratio = 2.0;  // Used for aspect ratio
			var maxWidth = parseInt($(window).width() / ratio); // Max width for the image
			var width = $(this).width();    // Current image width
			var height = $(this).height();  // Current image height
	 
			// Check if the current width is larger than the max
			if(width > maxWidth){
				ratio = maxWidth / width;   // get ratio for scaling image
				$(this).css("width", maxWidth); // Set new width
				$(this).css("height", parseInt(height * ratio));  // Scale height based on ratio
				//$(this).css("border", "2px dashed #890000");  // Scale height based on ratio
				$(this).css("cursor", "pointer");  // Scale height based on ratio
				//$(this).attr("title", "Click to see if there is a larger version!.");
			}
	});
});[/scrollcode]

It works but sometimes it takes a bit to fire so the browser has horizontal scrollbars. When the js kicks in sometimes the browser will snap back and sometimes it wont. Seems hit or miss with all browsers.

I tried putting max-width:90% on my image class but then the js grabs the css adjusted width so it doesn't resize any images.

So the $64 question is, is there any way to tweak this js to force it to grab the native width instead of the CSS adjusted width? That should solve the problem.

I've googled and played with this off and on for days with no luck.
[/quote]

Check here to include your profile signature.

T O P I C R E V I E W
bobby131313	Posted - 25 August 2018 : 21:54:15 Here is the javascript used.... $(window).load(function() { $('img').each(function() { var ratio = 2.0; // Used for aspect ratio var maxWidth = parseInt($(window).width() / ratio); // Max width for the image var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", parseInt(height * ratio)); // Scale height based on ratio //$(this).css("border", "2px dashed #890000"); // Scale height based on ratio $(this).css("cursor", "pointer"); // Scale height based on ratio //$(this).attr("title", "Click to see if there is a larger version!."); } }); }); It works but sometimes it takes a bit to fire so the browser has horizontal scrollbars. When the js kicks in sometimes the browser will snap back and sometimes it wont. Seems hit or miss with all browsers. I tried putting max-width:90% on my image class but then the js grabs the css adjusted width so it doesn't resize any images. So the $64 question is, is there any way to tweak this js to force it to grab the native width instead of the CSS adjusted width? That should solve the problem. I've googled and played with this off and on for days with no luck.
6 L A T E S T R E P L I E S (Newest First)
HuwR	Posted - 28 September 2018 : 09:33:32 javascript won't know if it is a png or not, not sure why .not isn't working, it should. in your initial post where you use $('img').each(function() { using $('img').not('.someclass').each(function() { should work how you want.
bobby131313	Posted - 27 September 2018 : 16:18:53 Played with that for a bit with no luck. How about this, would it be simpler to check if it's a PNG image and not resize it if it is?
HuwR	Posted - 26 September 2018 : 15:18:15 in jquery something like this should work $('img').not('.myclass').each or something along those lines
bobby131313	Posted - 26 September 2018 : 14:18:15 Ok I got this working but I have one more question. Any way to get this to only affect images inside a certain CSS class? Or inside a CSS ID? It's affecting my header logo, don't ever remember it doing that before but it is now.
bobby131313	Posted - 28 August 2018 : 13:56:53 That gets me closer, thank you! Now the CSS part of it is intermittent, I'll play with it some more today.
huwtest	Posted - 26 August 2018 : 08:16:23 try this var width = $(this)[0].naturalWidth; var height = $(this)[0].naturalHeight;

Snitz Forums 2000

This page was generated in 0.05 seconds.