Shout Box Images & Links

This script allows you to add links and image URLs to the shout box and it will detect, insert a thumbnail sized image and make a popup to show you a full sized image.

Add this script to any Free Form Text/HTML widget on the same page as the shout box (you might need to put the editor in RAW/Script mode - link in upper right corner), or less optimally into the Footer HTML.

Shout Box without script

Shout Box Script ( URL Removed )

Usage

• Images
  
  
  • When adding image URLs, separate each url with a space.
  • Only urls ending in .jpg, .png, .gif, .jpeg or .bmp
    
    
• Links
  
  
  • Adding URLs to the shout box separated by spaces.
  • A plain url will be converted into a link named "link":
    
    "http://www.google.com" becomes "<a href='http://www.google.com'>link</a>"
    
    
  • To name a link follow this format: "{name}:url"
    
    "{Google}:http://www.google.com" becomes "<a href='http://www.google.com'>Google</a>"
    
    * The only problem I have found is if you add curly brackets inside a shout and a url somewhere else inside the URL. The script thinks the word inside the curly brackets is for a link and really messes up the whole shout.

Code

<style>
.shoutBody {
  padding: 0 0 10px 20px; /* top right bottom left padding */
}
.shoutWithImage .shoutBody {
  min-height: 54px;
}
.shoutWithImage .shoutBody img {
  max-width: 50px;
  max-height: 50px;
  float: right;
  padding: 2px;
}
.scrollableShout {
  height: 300px; /* adjust the shout box height here */
  display: block;
  overflow-y: auto;
}
</style>
<script src="/GuildFiles/258012/shout-images.js"></script>
<script>
$(window).load(function(){
  var shoutScrollable = true;
  shoutImages(shoutScrollable);
});
</script>

Customizing

• Shout Box Image Style
  Set the thumbnail image size using the "shoutBoxImg" CSS definition. In the code above, it is set to resize the image to 50x50 (but will maintain aspect ratio, because it is using max-width and max-height). Adjust the size values in red. By default the image is set to float to the right side of the shout box line ( value in blue ).
  

  .shoutWithImage img { max-width: 50px; max-height: 50px; float: right; padding: 2px; }
  

• Shout Box line that contains an image
  A class is added to each line that contains an image. By default it is set to the image max height plus the padding on either side ( 50 + 2 * 2, or 54px ). You can remove or add styling to this shout box entry as desired.
  

  .shoutWithImage { min-height: 54px; }

• Make the shoutbox scrollable
  You could make the shout box scrollable by the shoutScrollable variable to true. If you want to adjust the height then modify the height in the ".scrollableShout" css class (in red), it's set to 300px by default.

  var shoutScrollable = true;
  

10/30/2010: Modified script to work with new shout box layout.
11/2/2010: Avatar option removed, it is now an option. Updated to work with new layout.
12/1/2010: Script will now make any url (not an image) clickable.
12/2/2010: Shout URLs now work in IE.
8/2/2011: Updated and moved shout box code to an external script.

Updated to work with the new layout... and also included the ability to make a shout box scrollable and remove the avatars.

Updated again

Fixed again to make links work in IE... sorry about that.