I use this
spoiler plugin and
this one for resizing images that might otherwise break the layout. The only problem is that they only cooperate half of the time.
On my iPhone, for example, the images get resized inside the spoiler in Safari and Chrome. In addition, they resize in Firefox (Mac).
On the other hand, they don't resize in Chrome and Safari on my Mac.
Any advice for making them play nicely in all browsers? Initially, I thought it had something to do with pre-loading in the spoiler, and assumed it impossible to fix. However, in light of the plugins working half the time, I believe their might be a way for them to become BFF in Chrome and Safari as well.
Here's an example thread with a large image inside a spoiler. If anyone on Windows doesn't mind testing it out for me, that would be really great.
Also, I'd be willing to change my image plugin to make it work. Not the spoiler one, however. It's too sexy. And Latin.
Do the image resizing in CSS. The downside of this is that clicking on it won't bring you to the full size image, though you could probably fix this by making all images link to the original.
That sounds like a much sexier solution.
I don't really like the way the current plugin expands them anyway; I'd prefer an on-click expand-and-contract system like they use on the Penny Arcade forums (that might be standard to Vanilla Forums or a plugin, not really sure). Opening new windows is ugly.
Your solution is probably the best one. It's really bizarre that it only half works, though. And in the same browsers that work on iOS, it's broken on my Mac. I feel so bad for normal web developers.
> _ > I'm looking at you too, rating pop-up.
Anywhere you know of that I should look to find the CSS for that?
i'm using this in showthread.css
#posts img {
max-width: 700px;
width: expression(this.width > 700 ? "700px" : true);
}
blockquote img {
max-width: 200px !important;
width: expression(this.width > 300 ? "300px" : true);
}
Thanks! I'll give it a try. Two things though. What's a blockquote image? (I just wanna know what it does before I put it in the code.) And how can I force images to link to the source? I really appreciate your help.
Oh, you can skip that one. But it makes images in quotes even smaller.
As for forcing images to link, I didn't do it yet, but I imagine it could be done by replacing the img code with a custom one that links to the image as well. But I don't know how to "re-process" MyCode.
Thanks brad, it works really well. I'm not really that concerned about being able to show off the images at full size anyway. At least not as much as I was about my layout exploding. For someone to do so, they'd have to nest more than 5 spoilers and put a huge image in the last one. I'm not terrible worried about that occurring.
As a side note, I too face the same problem, whenever an image is inside spoiler, it doesn't resize.
Which plugin? Did you try brad's idea?
Hey guys, I've been having the same issue, which isn't really too much of an issue except I'm somewhat of an avid programming and curious to figure out what's happening.
Resize plugin: G33K's fit on page
Spoiler plugin: SoporteMyBB's spoiler.
I'm not really 100% comfortable with HTML, PHP, and JScript yet, so please excuse any assumptions I make that are off base.
In Mozilla, spoilered images resize fine (buggy sometimes with the resize banner, but still resize regardless). In chrome and IE, spoilered images will only resize IF you open the spoiler before the resizing process begins.
That's where I get confused. Technically the spoiler's 'hidden' div is embedded in HTML. However, since it's not visible to the user, the image resizing overlooks it (Except in Firefox) and doesn't bother to run again after the spoiler is opened (Which kind of makes sense).
I'm wondering if it's even possible to have spoilered images resize (in Chrome and IE) with jscript when they're hidden? I'm also wondering if it's possible to run a sort of jscript after the resizing to close all of the spoilers?
Just an observation. I'm hoping sooner or later I stumble upon a solution.