Jump to content


Photo

Showing images in threads


  • Please log in to reply
6 replies to this topic

#1 imightbewrong

imightbewrong
  • Member

  • 264 posts
  • Joined: February 08

Posted 09 February 2010 - 12:36

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.


Advertisement

#2 NZX_Lorne

NZX_Lorne
  • Member

  • 200 posts
  • Joined: March 03

Posted 09 February 2010 - 13:00

Nice :up:

#3 cheapracer

cheapracer
  • Member

  • 10,388 posts
  • Joined: May 07

Posted 09 February 2010 - 13:04

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

#4 alecc

alecc
  • Member

  • 2,191 posts
  • Joined: September 09

Posted 09 February 2010 - 13:13

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.

#5 imightbewrong

imightbewrong
  • Member

  • 264 posts
  • Joined: February 08

Posted 09 February 2010 - 13:34

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.

#6 imightbewrong

imightbewrong
  • Member

  • 264 posts
  • Joined: February 08

Posted 09 February 2010 - 13:59

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.


#7 pup

pup
  • Member

  • 435 posts
  • Joined: March 08

Posted 09 February 2010 - 15:24

Works in WebKit (Safari, Chrome, etc.)

:up: