Inset Border Effect jQuery Plugin
by Robin Thrift
This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. This effect is very often used on Flash websites. This plugin can be used in combination with almost any lightbox (tested with colorbox). Feel free to do whatever you like with this plugin. However if you redistribute (even when altered) you must give credit to me.
Usage
Simple:
$("img").insetBorder();
All options:
$("img").insetBorder({
speed : 1000, // 1000 = 1 second, default 250
borderColor : "orangered", // Default white (#ffffff)
inset : 10, // Border width, default 10px
borderType : "solid", // Border type, e.g. dashed
outerClass : "ibe_outer", // Class name of outer wrap
innerClass : "ibe_inner" // Class name of inner border
});
Settings Generator
|
|
Default$(selector).insetBorder(); |
|
|
Big Border$(selector).insetBorder({
inset: 50
});
|
|
|
Not centered$(selector).insetBorder({
insetleft: 60,
insetright: 40,
insettop: 14,
insetbottom: 86
});
|
|
|
Colored Border$(selector).insetBorder({
borderColor: "#000000"
});
|
|
|
Slower Speed$(selector).insetBorder({
speed: 500
});
|
|
|
Double Border$("selector").insetBorder({
borderType: "double"
});
|
|
|
Rectangles$("selector").insetBorder();
|
