jQuery pinit

The pinit jQuery plugin add pinterest pinit buttons to your images. You may customise witch images to add the button to, the button position, opacity, fade speed and more. Have a look at the implementation examples below for more information.

Found any bugs, have ideas for improvements or if it just works, leave a comment here!

Source, minified

UPDATE: Pinterest moved their button image. The plugin is updated. If you have problems with the plugin, please redownload the source. :)

Implementation:

Include the jquery js reference and the jquery pinit reference in the head section of your page. the jquery reference has to come first.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pinit.js"></script>
Add pinit putton to all elements with class pinit:
<img src="http://www.mediadevelopment.no/projects/pinit/pinExample.png" alt="example" class="pinit" />

$(window).load(function(){
$().pinit();
});
Add pinit button with options:
<img src="http://www.mediadevelopment.no/projects/pinit/pinExample.png" alt="example" class="imageclass" />

$(window).load(function(){
$().pinit({
selector: ".imageclass",
align: "bottomRight",
fadeSpeed: 400,
opacity: 0.8
});
});
Source, minified

Options:

align (String)

Where to place the pinit button

  • "topLeft" (default)
  • "topRight"
  • "bottomLeft"
  • "bottomRight"

  • selector (String)

    Selector to add the pinit button to

  • default = ".pinit"

  • offsetTop (Integer)

    Offset from top when align is set to topLeft or topRight

  • default = 10

  • offsetBottom (Integer)

    Offset from bottom when align is set to bottomLeft or bottomRight

  • default = 10

  • offsetLeft (Integer)

    Offset from left when align is set to topLeft or bottomLeft

  • default = 10

  • offsetRight (Integer)

    Offset from right when align is set to topRight or bottomRight

  • default = 10

  • fadeSpeed (Integer)

    Speed of animation when mouse is moved over image

  • 200 - 600 (default = 200)

  • textSource (String)

    tag attribute to get pin text from

  • default = "alt"

  • opacity (Integer)

    Opacity of pinit button when visible

  • 0 - 1 (default = 1)

  • Source, minified
    Mediadevelopment.no