Showing images in threads

To run these scripts simply copy the code in the "code box" insert it into your address bar and press enter. You can bookmark the actual code and simply press the bookmark to execute the script too.

Replace image link with images
Anyway, I have a fast connection and I like to see the images directly in the threads. So I modified a script I found online to serve this purpose. If you copy this line and insert it into your address bar and execute it will replace all image links with the actual image:

javascript: (function () {function I(u) {var t = u.split('.'),e = t[t.length - 1].toLowerCase();return {gif: 1,jpg: 1,jpeg: 1,png: 1,mng: 1}[e]}function hE(s) {return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');}var q, h, i;for (i = 0; q = document.links[i]; ++i) {h = q.href;if (h && I(h)){q.innerHTML = '<img src="' + hE(h) + '" />';}}})()

Here is an example image that you can test with:
autosportlogo

Restrict the width of posts
After request I have also added this script for limiting the width of a post. It will limit the with of a post to fit within the current browser width and rescale the image to fit within the view:

javascript: (function () {var margin = 220;function getWidth() {var myWidth = 0;if (typeof( window.innerWidth ) == 'number' ) {myWidth = window.innerWidth;}else if (document.documentElement && ( document.documentElement.clientWidth) ){myWidth = document.documentElement.clientWidth;}return myWidth;}var ss = document.styleSheets[document.styleSheets.length-1];var l=0;if (ss.cssRules) {  l = ss.cssRules.length;} else if (ss.rules) {  l = ss.rules.length;}if (ss.insertRule) {  ss.insertRule('.postcolor { overflow:auto; width:' + (getWidth() - margin) + 'px; }',l);  ss.insertRule('img { max-width: ' + (getWidth() - margin) + 'px; }',l+1);} else if (ss.addRule) {  ss.addRule('.postcolor', 'overflow:auto; width:' + (getWidth() - margin) + 'px;', l);  ss.addRule('.postcolor', 'max-width: ' + (getWidth() - margin) + 'px;', l+1);}})()

Image to test this (run show images script first):
test image


Replace with link with image AND limit width (a combination of the two above)

javascript: (function () {var margin = 220;function I(u) {var t = u.split('.'),e = t[t.length - 1].toLowerCase();return {gif: 1,jpg: 1,jpeg: 1,png: 1,mng: 1}[e]}function hE(s) {return s.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');}var q, h, i;for (i = 0; q = document.links[i]; ++i) {h = q.href;if (h && I(h)){q.innerHTML = '<img src="' + hE(h) + '" />';}}function getWidth() {var myWidth = 0;if (typeof( window.innerWidth ) == 'number' ) {myWidth = window.innerWidth;}else if (document.documentElement && ( document.documentElement.clientWidth) ){myWidth = document.documentElement.clientWidth;}return myWidth;}var ss = document.styleSheets[document.styleSheets.length-1];var l=0;if (ss.cssRules) {  l = ss.cssRules.length;} else if (ss.rules) {  l = ss.rules.length;}if (ss.insertRule) {  ss.insertRule('.postcolor { overflow:auto; width:' + (getWidth() - margin) + 'px; }',l);  ss.insertRule('img { max-width: ' + (getWidth() - margin) + 'px; }',l+1);} else if (ss.addRule) {  ss.addRule('.postcolor', 'overflow:auto; width:' + (getWidth() - margin) + 'px;', l);  ss.addRule('.postcolor', 'max-width: ' + (getWidth() - margin) + 'px;', l+1);}})()

enjoy!

Tested in: FireFox 3.6, WebKit (Safari, Chrome, etc.), IE8 (image resize doesn't work though)

Edited by imightbewrong, 10 February 2010 - 08:43.

Nice

Do you have a resolve for the posts that go extremely to the far right?

Not sure that this is the place to post this, so mods, feel free to move.

Anyway, I have a fast connection and I like to see the images directly in the threads. So I modified a script I found online to serve this purpose. If you copy this line and insert it into your address bar and execute it will replace all image links with the actual image (NOTE: remove the blank space between 'java' and 'script', it is something that the forum adds for some reason):

java script:%20(function%20()%20{%20function%20I(u)%20{%20var%20t%20=%20u.split('.'),%20e%20=%20t[t.length%20-%201].toLowerCase();return%20{gif:%201,jpg:%201,jpeg:%201,png:%201,mng:%201}[e]}function%20hE(s)%20{return%20s.replace(/&/g,%20'&').replace(/>/g,%20'>').replace(/</g,%20'<').replace(/"/g,%20'"');}var%20q,%20h,%20i;for%20(i%20=%200;%20q%20=%20document.links[i];%20++i)%20{h%20=%20q.href;if%20(h%20&&%20I(h)){q.innerHTML%20=%20'<img%20src="'%20+%20hE(h)%20+%20'"%20/>';%20}}})()

You can make a bookmark out of it for easy access. Here is an example image that you can test with:
autosportlogo

enjoy!

(only tested in firefox 3.6)

Really nice, but I think the admins doesn't want such functionality because of the copyrights to some images.

Really nice, but I think the admins doesn't want such functionality because of the copyrights to some images.

Not sure why the mods would have a problem with it, it is all user side script. The links are there, all the script does is make it more convenient way of viewing the images.

Do you have a resolve for the posts that go extremely to the far right?

sure, added a script for that in original post

Edited by imightbewrong, 09 February 2010 - 16:06.

Works in WebKit (Safari, Chrome, etc.)