Microsoft Labs has developed a Silverlight-based web application called Seadragon which is used to make viewing large images more practical. Panoramic and other high quality images can have you scrolling all over so that you may not be able to see the whole picture or if the image is resampled down, you lose a lot of the detail. Seadragon provides an interface that allows you to interact with the photo so that you can both see the big picture and then zoom in to see the detail. I originally heard about Seadragon through a post over at Freewaregenius and I wanted to take the information to the practical level by showing how to use Seadragon inside a phpBB 3 forum to add the ability to handle large images.

Seadragon allows you to zoom in, zoom out, center to the original position and manipulate the image in a full screen mode through your mouse’s scroll wheel or buttons found over the image as you hover over. It can be embedded in a website using simple code that it provides to you like this:

<script src="http://seadragon.com/embed/dm1.js?width=auto&amp;height=400px"></script>

To result in something like this:

(The credit for the image I used and more amazing photos belong to Brad Templeton’s Photography.)

To create a Seadragon object, we just visit www.seadragon.com/create/, enter the URL to an image we want to use, and then hit the Create button.

create

The next page you’re taken to will include a Seadragon object of your image if it was able to connect to the file correctly and was of either jpeg, png, or tiff file types. Below the object, there is a link you can use to send people to this viewing page. The last part of the URL works much like a URL shortening service, a unique code is assigned to your image so people can easily get back to it. In this case, my image is coded: dm1. Below the URL, you are provided Embed code which very easily could be used on a website that accepts HTML.

seadragon

PhpBB does not accept HTML, but by creating a Seadragon BBCode, we can safely allow visitors of our forum to conveniently and impressively add large, high resolution, interactive photos. To add a BBCode to your forum, log into your Administration Control Panel and then navigate to the Posting tab. Under the Posting tab, BBCodes shows up by default; if not, just select BBCodes from the left navigation column. Click the ‘Add new BBCode’ button at the bottom right of the page to go to the BBCode editing page. In the first box, for Usage, add the line:

[seadragon]{TEXT}[/seadragon]

For HTML replacement, add this line:

<script src="http://seadragon.com/embed/{TEXT}.js?width=600px&height=500px"></script>

The Help line and whether you want it to be displayed on the posting page can be configured as you prefer.

bbcode

The only requirement for Seadragon is a modern browser with the Silverlight plug-in installed. If you have those, you’ll be able to see something like this in your phpBB forum by just using the simple BBCode [seadragon]dm1[/seadragon]. That’s the code that is generated when you create a Seadragon object just wrapped with the [seadragon] BBCode.

inuse

Seadragon allows you to get to the original file, so it cannot be used as a means to protect your image copyright. If you visit the view page for an image at Seadragon, you’ll notice a link to View Original below the image that links back to the original file. The images are not private, while there is no means to just browse through the archives, you can manually visit any image code by just typing in /view/1 on up to /view/999 and then to /view/a0 and /view/dve. Some of the cool ones I’ve found include:

  1. Picture of the Sun
  2. XKCD Height comic
  3. XKCD Online Communities
  4. Satellite picture from 9/11

Some wishlist and other things I wanted to mention:

  • Even unsuccessful attempts to generate an image creates a record and takes up a code. For continuity and browsing, it seems wasteful to do that.
  • Using images from this gallery, I tested to see if Seadragon supported JPEG 2000 images. It doesn’t.
  • If you connect to your forum using an https connection, the Seadragon object appears, but the image doesn’t load.
  • You can’t use an attachment in phpBB to generate a Seadragon object because of the page that phpBB uses, /file.php?259 doesn’t get detected as an image.

If you want to see Seadragon in action in a phpBB forum, check out the demo in the comments.

Comment on this post in our forums



Related posts:

  1. Essential BBcodes for your phpBB Forum
  2. An MP3 Player for Inline MP3 Attachments in phpBB3
  3. An FLV Player and BBcode for Inline FLV Attachments in phpBB3