Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
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

Freatures

  • 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

###1.

###2.

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() {

      $('.frame').imageframer();

    });
</script>

###3.

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

Options

  • 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() {

      $('.frame').imageframer({
          frameType: 'wood3',
          callback: function() {
              $(this).addClass('aClass');
          },
          innerShadow: 1
      });

    });
</script>

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

Data-attributes

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

<img
    class="frame"
    data-frame-type="black"
    data-frame-size="3"
    data-inner-shadow="1"
    data-custom-class="myClass"
    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

Changelog

####v.1.1.

  • 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.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published