[Greasemonkey] Silkroad Online Forums Script - Resize images

[Nixie]

About:
Long time ago StealMySoda released his script which can be found here. I know, his has some more features, but in my opinion they're not needed. I may add features by request.

Now to my script itself. It will resize any image that will be posted in a normal post, quote or an attachment (new feature).

Steps To Install:

1. Use one of the following browsers: Firefox, Flock, any other that supports extensions
2. Install the Greasemonkey Extension
3. Restart Firefox
4. Click here to install the script
   If the file is not available follow these steps:
   
   1. Open a plain text editor (Notepad, Notepad++...)
   2. Copy the code bellow to the editor
   3. Save the file as srf.user.js (the extension must be *.user.js)
   4. Drag the file to your browser (here, where you can see the websites)
   5. Install the script
5. You're done

Credits:

• StealMySoda - for the base script
• Nixie (TheSpy <safilix@gmail.com>) - for the edit
• Moderator - didn't delete or lock my testing thread in Off-Topic
• Members - didn't spam in my testing thread in Off-Topic

The code is in the spoiler tag.

Spoiler!

Code: Select all

// ==UserScript==
// @name         Silkroad Online Forums Script - Resize Images
// @namespace      Silkroad Online Forums Script - Resize Images
// @description      A script to resize any image that is to huge to display to a lower size. Made by StealMySoda, edited by Nixie (TheSpy <safilix@gmail.com>)
// @include         http://*silkroadforums.com/posting.php*
// @include         http://*silkroadforums.com/viewtopic.php*

// set the maximum width of a picture
maxWidth = 600;

// used to take care of all images
function resizeImages(arrayWithImages)
{
   // loop through all images
   for(var j = 0; j < arrayWithImages.length; j++)
   {
      // create a new Image (will be used to get the image width)
      var im = new Image();
      im.src = arrayWithImages[j].src;

      // do we have to resize it?
      if(im.width > maxWidth)
      {
         // has the image a parent node containing 'href'? (used to 'destroy' the <a> tag)
         if(arrayWithImages[j].parentNode.href)
            arrayWithImages[j].parentNode.removeAttribute('href');

         // resize the image
         arrayWithImages[j].style.maxWidth = maxWidth + 'px';

         // assign it a title
         arrayWithImages[j].title = 'Click for the original size.';

         // add a paragraph
         newDiv = document.createElement('div');
         newDiv.innerHTML = '<b>The image bellow has been resized. Please click it to open it in a new window.</b>';
         arrayWithImages[j].parentNode.insertBefore(newDiv, arrayWithImages[j]);

         // add a click event
         arrayWithImages[j].addEventListener(
            'click',
            function(event)
            {
               window.open(event.currentTarget.src, 'img' + Math.random());
            },
            false
         );
         
         
      }
   }
}

// loops to check through images in attachements, posts and quotes
var div = document.getElementsByTagName('div');
for(var i = 0; i < div.length; i++)
{
   if(div[i].className == 'postbody')
   {
      var img = div[i].getElementsByTagName('img');
      resizeImages(img);
      var table = div[i].parentNode.getElementsByTagName('table');
      for(var j = 0; j < table.length; j++)
      {
         if(table[j].className == 'tablebg')
         {
            var tr = table[j].getElementsByTagName('tr');
            for(var k = 0; k < tr.length; k++)
            {
               var tr = table[k].getElementsByTagName('tr');
               for(var l = 0; l < tr.length; l++)
               {
                  var td = tr[l].getElementsByTagName('td');
                  for(var m = 0; m < td.length; m++)
                  {
                     if(td[m].className == 'row1' || td[m].className == 'row2')
                     {
                        var img = td[m].getElementsByTagName('img');
                        resizeImages(img);
                     }
                  }
               }
            }
         }
      }
   }
}

// ==/UserScript==

Change log:

• v0.1 - Release
• v0.2 - Little fix (script would start on any page on the forums, now it loads just when replying or viewing a thread/topic)
• v0.3 - Update
  
  • Repeating loops were put into one single loop
  • Images will open in a new window (reason: resizing will just ruin the layout)

Older versions: (not recommended to use)

• v0.2

To do:

• User can set the maximum width of images without to edit the source file itself

Known bugs:

• Images are not resized after they're loaded for the first time

[/Pi]

FINALLY!

I'm loving it. Tested it here: viewtopic.php?f=58&t=104711

Thanks a lot.

[Nixie]

As happy as you are, I just went through the code and guess what. I used that many loops, when entering 56k threads your browser may eventually freeze. You may expect a little update in a few minutes.

Edit: here you go. If you have already installed a previous version, just click install link above, it will overwrite your old copy.