Integrating automatic image resizing

[DavidIQ]

If you don't need any fancy animations, then:

The problem is that fancy animations is what most people look for when they want image resizing (Litebox, Lytebox, Highslide JS, etc.). I am not opposed to your idea or Callum's of course if that will at least give the core some way of resizing images client side. I'm sure many would be happy with at least that.

[brunoais]

EDIT:
using callumacrae's idea:
http://jsfiddle.net/UR8qm/2/

You shouldn't be adding a class - the server has no reliable way of knowing whether the image is too big or not. It's also not very clean when it can be done entirely in one language.

With my solution you may use @media for different screens to obtain different solutions and deliver the user responsive design.
In your approach, if you want to also allow that, then you need to write the code for that and you need to take care of the problem properly each time the window is resized and whatnot.
I still don't know what you mean with:

the server has no reliable way of knowing whether the image is too big or not

What does that mean?

Personally, I'm against using js to change looks, except when it really does make sense to do so (the major reason is related with js animations). This is not one of those cases. All changes can be easily made with a simple class change. All aspect changes are being taken care by the CSS itself.

[brunoais]

Here's a CSS only solution.
http://jsfiddle.net/SrdU7/
No need to complain that it is hackish and that the markup does not stay correct because that is undoubtedly true. I just posted here for you to see that there's actually a way to make this that is able to fully adapt to what the user is currently seeing. Also... IE8 does not know what the "+" (next sibling operator) means, so this does not work on IE8.

[Marc]

@Marc ... Personally, I don't like that code. There are parts that are too repeated. For example, the $() is executed excessively.
There's no need to execute that function that many times. You could simplify the browser's work with very simple changes to that code. IMO, if you reduce the use of the $() to the amount you really need, then it's enugh.

@Arty That is not entirely true. You may be surprised with the results with some rendering engines if you don't explicitly specify that you want the image width to be a certain value.

Now, the ultimate question:
Why are you doing that with js when CSS can do the same job but in a much more efficient way?

That code is over 2 years old so I'm guessing there is no problem with improving it. My main goal was to get people to talk about it again. A simple image resize should be added to phpBB 3.1.

Your CSS example is IMHO way to slow. If you click on it by accident then your second click will not be recognized. That's the downside with CSS properties.

A combination of CSS & JS should be the goal here. Also I don't like picking a random number like 300px as maximum width. That's why I used the width of div.content and substracted 30px from that. That way users don't usually have to click on the picture in order to actually see what's on it.

EDIT:
using callumacrae's idea:
http://jsfiddle.net/UR8qm/2/

You shouldn't be adding a class - the server has no reliable way of knowing whether the image is too big or not. It's also not very clean when it can be done entirely in one language.

That's why I added this:

Code: Select all

var maxWidth = $('div.content').innerWidth() - 30;

If we use CSS & JS we obviously would need to set a low maxWidth which kind of is against what I suggested. I don't think there is something like max-width: 98% or something though, so it wouldn't exceed the width of the parent, or did I miss something?

[brunoais]

Your CSS example is IMHO way to slow. If you click on it by accident then your second click will not be recognized. That's the downside with CSS properties.

You mean... a double click?

A combination of CSS & JS should be the goal here. Also I don't like picking a random number like 300px as maximum width. That's why I used the width of div.content and substracted 30px from that. That way users don't usually have to click on the picture in order to actually see what's on it.

EDIT:
using callumacrae's idea:
http://jsfiddle.net/UR8qm/2/

You shouldn't be adding a class - the server has no reliable way of knowing whether the image is too big or not. It's also not very clean when it can be done entirely in one language.

That's why I added this:

Code: Select all

var maxWidth = $('div.content').innerWidth() - 30;

If we use CSS & JS we obviously would need to set a low maxWidth which kind of is against what I suggested. I don't think there is something like max-width: 98% or something though, so it wouldn't exceed the width of the parent, or did I miss something?

You missed something.
You can make exactly that with just CSS. With CSS3, they were able to cover up just about any situation that is related to appearance. With CSS2 (required to make it work for IE8) it is breadly available. Anyway, AFAIK what you need exists in CSS2.

[callumacrae]

I don't see the problem in using JavaScript here; it is what it was designed for. It is not what CSS was designed for. Hacking checkboxes is certainly not the way to do it.

It's simple enough to animate it: http://jsfiddle.net/UR8qm/3/

[Arty]

I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.


As for width, instead of checking for width of .content check for width of parent element. Image could be inside another block that is smaller than div.content, such as quote block. This is where things become a bit tricky.

If parent element has display:inline, such as <a> or <strong>, script should check for parent of parent element until it finds one with display:block.

If one of parent elements has display:table-cell, that element scales with content. All inner elements with display:block will also scale with table cell unless they have fixed width. This poses a problem that as far as I know cannot be solved. I think if one of parent elements has display:table-cell, image should not be scaled down.

[callumacrae]

I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.


As for width, instead of checking for width of .content check for width of parent element. Image could be inside another block that is smaller than div.content, such as quote block. This is where things become a bit tricky.

If parent element has display:inline, such as <a> or <strong>, script should check for parent of parent element until it finds one with display:block.

If one of parent elements has display:table-cell, that element scales with content. All inner elements with display:block will also scale with table cell unless they have fixed width. This poses a problem that as far as I know cannot be solved. I think if one of parent elements has display:table-cell, image should not be scaled down.

http://jsfiddle.net/UR8qm/6/

The image is linking somewhere, but it's in an iframe so it shouldn't work anyway. If it weren't in an iframe, it would follow the link.

[Arty]

edit: never mind

[brunoais]

I agree with post above about css/js. This requires a JavaScript solution.

All solutions assume that image is not clickable, so you add onclick event to it. If image is inside a link, clicking link should take priority over zooming in, so onclick event should not be applied.

If preventDefault() (dunno about stopPropagation(), though) is not called, then if the user clicked the link, both things will happen which does not seem to be a problem. The click event will be caught

I don't see the problem in using JavaScript here; it is what it was designed for. It is not what CSS was designed for. Hacking checkboxes is certainly not the way to do it.

Yeah... I agree. I just wanted to show an example.

It's simple enough to animate it: http://jsfiddle.net/UR8qm/3/

If you want animations that do not use CSS animations then that's a solution I accept.
I'd still use CSS animations and use toggleClass, though.