Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Image Framer

Image Framer jquery plugin

Image Framer is very simple jQuery plugin that wraps your images inside a frame. Actually, despite the name, you can frame any element.

Image Framer Website


  • All of the frames are flexible to pretty much any image size
  • Contains 24 frames
  • All frames come in 4 different sizes
  • 4 different optional inner shadows
  • HTML 5 data-attributes can be used to overwrite the plugin options

Tested browsers

  • Coming soon...

Usage instructions



Add the following to your web page <head>.

<!-- Make sure that jquery is linked as well -->
<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() {




Add the .frame class to all elements you wish to frame


  • frameType: 'wood' List of frames below
  • frameSize: 4 Numbers from 1 to 4. 1 is the smallest and 4 is the largest
  • innerShadow: null Numbers from 1 to 4. 1 is the smallest / lightest and 4 is the biggest / darkest
  • disable: false Boolean value
  • callback: function() {} Triggered after everything is generated

Options example

<script type="text/javascript">
    $(function() {

          frameType: 'wood3',
          callback: function() {
          innerShadow: 1


List of available frames:

  • wood-dark
  • wood-dark2
  • wood-darkgrey
  • wood-darkgreen
  • wood-darkorange
  • wood-darkred
  • wood-light
  • wood-light2
  • wood-light3
  • wood-old
  • wood-oldlight
  • wood-purple
  • wood3
  • wood4
  • wood5
  • wood6
  • rock
  • metallic
  • black
  • red
  • gold
  • gold2
  • silver
  • silver2


Example of all data attributes applied to one image ( minus 'disable' and 'callback' ):

    src="myImg.jpg" alt=""

Example of the disable option:

<img class="frame" data-disable="true" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />

Callback can only be used as a data-attribute to disable callback for certain elements:

<img class="frame" data-callback="false" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />
<img class="frame" src="myImg.jpg" alt="" />

Known issues

  • The frame images will get 1px shift when you zoom the document ( not at all zoom levels ). Automatic tablet zooming causes this as well, but I really don't find it super distracting. If you are concerned with it, in quite a few situations you can get rid of it by using a frame that doesn't have a shadow. Of course you could replace the shadow with css3 shadow...

Want to make your own frames?

There's photoshop template and script just for that!

You can get it here: Photoshop Image Framer Export Script



  • Remade all the frames ( Just minor changes )
  • Had to change css positioning due to the new frames that are more refined
  • Even though it's not included in the package, I made Photoshop Image Framer Export Script that will make it super easy to make frames.

What's to come (maybe)?

  • Moar frames!!!
  • Maybe a photoshop script that enables re-color multiple frames at once...?
  • I need to refine some of the frame files.
  • top-bottom and right-left images are unnecessary wide for some frame types.
  • I pretty much half-assed the way I named the frames. Need to work on that.


Want to frame images in your website? Here, take this!






No releases published


No packages published