Image Preview 
Reset style
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="imageframer/if.css" />
<script type="text/javascript" src="imageframer/if.js" ></script>
<script type="text/javascript">
$(function() {
$('.frameThis').imageframer({
frameType: 'wood-old',
frameSize: 4,
innerShadow: 3
});
});
</script>
- Change frameType ← or →
- Change frameSize ↑ or ↓
- Change shadowSize Alt + ↑ or Alt + ↓
- Enter image preview Enter
- Exit image preview Esc
- Reset to default Alt + R
- These hotkeys are limited to this demo, which means that this functionality is not present in the plugin itself.
Usage
1.
- Download Image Framer plugin »
- Inside the .zip you will find "imageframer" folder and "jquery.min.js" file, copy those to you website root.
- Add the following to your page <head>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="imageframer/if.css" />
<script type="text/javascript" src="imageframer/if.js" ></script>
<script type="text/javascript">
$(function() {
$('.frameThis').imageframer();
});
</script>
You might want to head over to the demo page, where you can play around with the plugin settings. It also generates the plugin trigger code with the current demo settings.
2.
Add the class .frameThis to each element you wisth to frame.
<img class="frameThis" src="myImg.jpg" />
Tested browsers
- Firefox v.18.0.1
- Chrome v.24.0.1312.52
- Safari v.6.0.2
- Opera v.12.11
- IE +7
Options
| Option | Value | Description |
|---|---|---|
| frameType | 'wood-dark' | Click here for full list of frames. |
| frameSize | 4 | Frame sizes range from 1 to 4. |
| innerShadow | null | Inner shadow sizes range from 1 to 4. |
| disable | false | Boolean value. |
| callback | function() {} | $(this) inside the callback points to .if-equalizer. |
Frame types
- wood-darkred
- wood-purple
- wood-old
- wood-oldlight
- wood-light3
- metallic
- wood-dark
- wood-dark2
- wood5
- wood3
- wood3-rounded
- wood-light
- wood-light2
- wood4
- wood6
- rock
- black
- red
- gold
- gold2
- silver
- silver2
HTML 5 Data-attribute
You can use data-attributes to give options to individual frame elements.
<img class="frameThis" data-frame-type="black" src="myImg.jpg" >
Want to make your own frames?
There's a separate Photoshop template and a script that I've made available in github.
This script and template will enable you to create your own frames with very little effort.
