Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Help Groups for Snitz Forums 2000 Users
 Help: MOD Implementation
 Hep with Javascript to automagically resize post images.
 New Topic  Reply to Topic
 Printer Friendly
Author Previous Topic Topic Next Topic  

bobby131313
Senior Member

USA
1163 Posts

Posted - 25 August 2018 :  21:54:15  Show Profile  Visit bobby131313's Homepage  Reply with Quote
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.

Switch the order of your title tags

huwtest
Moderator

30 Posts

Posted - 26 August 2018 :  08:16:23  Show Profile  Reply with Quote
try this

var width = $(this)[0].naturalWidth;
var height = $(this)[0].naturalHeight;
Go to Top of Page

bobby131313
Senior Member

USA
1163 Posts

Posted - 28 August 2018 :  13:56:53  Show Profile  Visit bobby131313's Homepage  Reply with Quote
That gets me closer, thank you! Now the CSS part of it is intermittent, I'll play with it some more today.

Switch the order of your title tags
Go to Top of Page

bobby131313
Senior Member

USA
1163 Posts

Posted - 26 September 2018 :  14:18:15  Show Profile  Visit bobby131313's Homepage  Reply with Quote
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.

Switch the order of your title tags
Go to Top of Page

HuwR
Forum Admin

United Kingdom
20584 Posts

Posted - 26 September 2018 :  15:18:15  Show Profile  Visit HuwR's Homepage  Reply with Quote
in jquery something like this should work

$('img').not('.myclass').each or something along those lines

MVC .net dev/test site | MVC .net running on Raspberry Pi
Go to Top of Page

bobby131313
Senior Member

USA
1163 Posts

Posted - 27 September 2018 :  16:18:53  Show Profile  Visit bobby131313's Homepage  Reply with Quote
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?

Switch the order of your title tags
Go to Top of Page

HuwR
Forum Admin

United Kingdom
20584 Posts

Posted - 28 September 2018 :  09:33:32  Show Profile  Visit HuwR's Homepage  Reply with Quote
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.

MVC .net dev/test site | MVC .net running on Raspberry Pi
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.11 seconds. Powered By: Snitz Forums 2000 Version 3.4.07