Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
 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: BoldItalicizedUnderlineStrikethrough Align LeftCenteredAlign Right Horizontal Rule Insert HyperlinkInsert EmailInsert Image Insert CodeInsert QuoteInsert List
   
Message:

* HTML is OFF
* Forum Code is ON
Smilies
Smile [:)] Big Smile [:D] Cool [8D] Blush [:I]
Tongue [:P] Evil [):] Wink [;)] Clown [:o)]
Black Eye [B)] Eight Ball [8] Frown [:(] Shy [8)]
Shocked [:0] Angry [:(!] Dead [xx(] Sleepy [|)]
Kisses [:X] Approve [^] Disapprove [V] Question [?]

 
   

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 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.05 seconds. Powered By: Snitz Forums 2000 Version 3.4.07