Update: Dynamic Image Borders 2.0 has been released and is the preferred method. Version 2.0 no longer relies on jQuery, and now only weighs 3K.
Current Version: 1.0 | License: Creative Commons | Download
This uses jQuery (this demo is using version 1.2.3) to automatically attach a custom border to an image, regardless of its width or height. Practical for several uses, such as an image gallery containing images with different sizes or a website that uses different sized images throughout. The benefit to using this method is the ability to easily attach a custom dynamic border just by calling a single class in the img tag.
Questions and comments can be posted at this related journal post.
The first step is to create the graphics that make up the border. There will be eight in all: one for each of the four corners, and one for each of the four sides. When naming these graphics you'll want to use the following naming-convention:
| File Name | Placement | Example |
|---|---|---|
| img-t-l.gif | Top Left |  |
| img-t-c.gif | Top Center |  |
| img-t-r.gif | Top Right |  |
| img-m-l.gif | Middle Left |  |
| img-m-r.gif | Middle Right |  |
| img-b-l.gif | Bottom Left |  |
| img-b-c.gif | Bottom Center |  |
| img-b-r.gif | Bottom Right |  |
Click here to view where the border should be sliced to make the required eight images for the Dynamic Image Border method. Note that the border is actually built into this image and is not using the Dynamic Image Border method.
Insert the following JavaScript into your document, along with the jQuery library. You'll want to give the variable, border_size the value of the thickness of your border. In the examples used in this page, I've created a 10px border to surround the images.
$(document).ready(function() {
var border_size = 10;
$(".img-border").one("load", function(){
newW = $(this).width() + (border_size * 2);
$(this).wrap('<div class="img-contain" style="width: ' + newW + 'px;"></div>');
$(this).before('<div class="img-head"><div class="t-l"></div><div class="t-r"></div></div>');
$(this).after('<div class="img-foot"><div class="b-l"></div><div class="b-r"></div></div>');
});
});
Insert the following CSS into your document (I would recommend placing it within your stylesheet). Note that the display property for the .img-contain img must be set to block when using the XHTML 1.0 strict DOCTYPE, otherwise you'll get a weird five-ish pixel margin below the image causing a gap between the image and the bottom border. Also, depending on the location of where you store your images, you may need to modify that within your CSS.
.img-head, .t-l, .t-r,
.img-foot, .b-l, .b-r { line-height: 0; font-size: 0; height: 10px; }
.img-contain { background: url(images/img-m-r.gif) right repeat-y; }
.img-border { padding: 0 10px; background: url(images/img-m-l.gif) left repeat-y; }
.img-head { background: url(images/img-t-c.gif) repeat-x; }
.t-l { float: left; width: 10px; background: url(images/img-t-l.gif) no-repeat; }
.t-r { float: right; width: 10px; background: url(images/img-t-r.gif) no-repeat; }
.img-foot { background: url(images/img-b-c.gif) repeat-x; }
.b-l { float: left; width: 10px; background: url(images/img-b-l.gif) no-repeat; }
.b-r { float: right; width: 10px; background: url(images/img-b-r.gif) no-repeat; }
.img-contain img { display: block; } // Needs to be set in XHTML 1.0 Strict
This is what makes this method so great—it's very easy to implement for each use. Simply use the following code, which includes the class, img-border.
<img src="imagename.jpg" class="img-border" alt="Some alternative text" />
It's not really much to look at since all the magic takes place when the page has loaded, but all of the following images are using the jQuery Dynamic Border Method. It pretty much just shows this method can be used on any size image.
