We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 2
Prevent Posted Images from Stretching Board
Topic Started: Jul 3 2010, 02:56 PM (6,467 Views)
Reid
Member Avatar
È una trappola!

Place this in Admin CP -> Board Template -> Below the Board:
Code:
 
<script type='text/javascript'>
$('td.c_post img[alt=Posted Image]').css('max-width', '1px').css('max-width', $('td.c_post:first').width() + 'px');
</script>
It will make the maximum width of images the same as post widths. Note that unlike other codes, this code scales based on resolution.

To link all resized images to their source, use this code instead, same placement:
Code:
 
<script type='text/javascript'>
(function () {
$('td.c_post img[alt=Posted Image]').css('width', '1px');
var m_width = $('td.c_post:first').width();
$('td.c_post img[alt=Posted Image]').each(function () {
$(this).css('width', '');
if ($(this).width() > m_width) {
$(this).wrap("".link(this.src)).after("<br /><small>This image has been resized to prevent stretching the screen. Click to view it at its full size.").css({ cursor: 'pointer', width: m_width + 'px' });
}
});
})();
</script>
Offline Profile Quote Post Goto Top
 
Replies:
Yuri Jacobs
Member Avatar
Member
[ *  * ]
:cool: The best around here, too bad there's no award for Coder of the Month.
Offline Profile Quote Post Goto Top
 
SwitchFlip
Member
[ * ]
Great code, I know this topic hasn't seen the light of day in many many many months but would love for this to apply to images in spoilers :o
Offline Profile Quote Post Goto Top
 
spiiike
Member
[ *  *  *  * ]
This isn't working anymore for some reason
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Which version are you using?
Offline Profile Quote Post Goto Top
 
spiiike
Member
[ *  *  *  * ]
This one:

Code:
 
<script type='text/javascript'>
$('td.c_post img[alt=Posted Image]').css('max-width', '1px').css('max-width', $('td.c_post:first').width() + 'px');
</script>


Was working okay up until recently
Actually it's working in some threads and not others. Any idea why that might be? I could take some screen shots if needbe
Edited by spiiike, Sep 16 2016, 03:53 PM.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

It would be better if you could link to a page it works on and a page it does not work on.
Offline Profile Quote Post Goto Top
 
ryushenlong
Member
[ * ]
I use the second code, and it works well with the posted images (they auto stretch to window width), but I don't see the posted images can be clickable to view their original full size image.

For example, my monitor resolution is 1600x900, when I see the posted image with size 3840x2160, it got automatically resized depend on whether my browser get maximized or not, but I don't see the text "This image has been resized to prevent stretching the screen. Click to view it at its full size" neither I can't click the image.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

ryushenlong
Sep 17 2016, 11:10 AM
I use the second code, and it works well with the posted images (they auto stretch to window width), but I don't see the posted images can be clickable to view their original full size image.

For example, my monitor resolution is 1600x900, when I see the posted image with size 3840x2160, it got automatically resized depend on whether my browser get maximized or not, but I don't see the text "This image has been resized to prevent stretching the screen. Click to view it at its full size" neither I can't click the image.
Can you link us to a page where that is the case?
Offline Profile Quote Post Goto Top
 
ryushenlong
Member
[ * ]
DaPizzaMan
Sep 17 2016, 01:12 PM
ryushenlong
Sep 17 2016, 11:10 AM
I use the second code, and it works well with the posted images (they auto stretch to window width), but I don't see the posted images can be clickable to view their original full size image.

For example, my monitor resolution is 1600x900, when I see the posted image with size 3840x2160, it got automatically resized depend on whether my browser get maximized or not, but I don't see the text "This image has been resized to prevent stretching the screen. Click to view it at its full size" neither I can't click the image.
Can you link us to a page where that is the case?
Nvm about my issue, the resized images can be clicked now. Thank you again for the attention.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply
  • Pages:
  • 1
  • 2