As many of you know, every image posted on BZPower should be within 500 kilobytes (or, to avoid the ambiguous definition of 'kilo' in this case, kibibytes (KiB) ) in size, in order to be in compliance with the Rules & Guidelines; if it's size exceeds 500 KiB, then it should be linked to instead of embedded.

If my assumptions are right (and please do correct me if I'm wrong here), this is because while the larger image will still be loaded, but only when the user explicitly wants the image to load; that way they get to see the image they wanted to see, but without slowing down the page for everyone that doesn't want to behold the latest size-monstrophic abomination.

There's one problem with this, though: it has to be opened on an external site. Not only do certain imagehosts redirect you to a page that has a bit more content then just the image you requested when you're not very cautious at how your link looks like (and some even redirect you when going to what seems like the actual, absolute path of the image)(*cough* no names *cough*), it also has to be loaded in another tab, which honestly just doesn't really look that good.

But then, luckily, there was an amazing invention / arcane contraption / JavaScript framework called 'jQuery'.

Using the aforementioned magic spell framework, combined with a few lines of CSS to make it actually look like something that most definitely isn't rotten (and possibly zombified) salad (Invasion of the Zombie Salad. Make it happen.), I've devised a neat little script to get around this problem.

Basically, the humongously-large image won't load, because there is no image to load.

A tiny little bit of explanation of how images work in HTML (feel free to skip ahead if you already know this): to load an image, you have to use the <img /> tag, and required are two attributes: the image's source, or 'src', and an alternate description to provide if the image fails to load, or is in the process of loading (or, for versions of Internet Explorer prior to IE9, to display as a tooltip on-hover), also known as the 'alt'-attribute. In the end, you'll find your tag looking like this: <img src="http://example.com/image.png" alt="Look at my shiny image!" />

While the image will render just fine without the 'alt'-attribute (but it is advised against leaving it out in the HTML Specification), without the 'src' there is no image to load, and conform to logic and common sense it will not be loaded.

And that, is exactly what this little piece of code does. The image URL specified to the BBCode parser, and, for the sake of the example, let's just say the BBCode used for this is [eximg], so it'd be specified as [eximg]http://example.com/image.png[/eximg] (or, for that matter, [eximg=]http://example.com/image.png] )will be placed into the 'alt'-attribute of the image, and then the user presses the 'Show'-button, it will be moved into the 'src'-attribute, and an extra class will be added to apply CSS rules appropriate for the newly-loaded image. With the 'src'-attribute defined, there will be an image to load, and only then will the image actually start loading.

As you wish, oh Great and Mighty Random Person that's Reading This.

In case you want to use this purely to mess around with, then sorry, no. If you wanted to learn more of how to do this, I'd suggest you'd look up some tutorials, or just Google tiny bits of code and piece them together. After all, that's even how the greatest of programmers started (You have 10 minutes to become the next Bill Gates. Clock's ticking, pal.)

But if you actually want to use this in anything of any notable or unnotable interest, feel free to catapult me a PM and explain your request/situation.

Well, this was it for today. Have fun, guys =)

Signed, Zeene, the One and Only Grand Overlord of Absolutely Nothing