jQuery Plugin To Add Pinterest Pin It Button Over Images - imgPin

imgPin is a lightweight jQuery plugin for revealing custom Pinterest Pin It Buttons over images on mouse hover. You can use any image for the Pin It button and place it anywhere on your images.

See also:

• jQuery Plugin To Add Custom Pin It Buttons To Images - PinMe.js

How to use it:

1. Import the jQuery imgPin's JavaScript and stylesheet into your web page. Make sure the jquery.imgPin.js script is loaded after the jQuery library.

<link href="imgPin.default.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.imgPin.js"></script>

2. Wrap your images into a container element where imgPin will find all images within the container and add a default Pinterest Pin It button to each.

<div class="container">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

3. Call the function on the container element to initialize the plugin with default options.

$('.container img').imgPin();

4. Available options to customize the Pin it buttons.

$('.container img').imgPin({

// source of your custom Pin It Button
pinImg : '//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png',

// 1 = top left
// 2 = top right
// 3 = bottom right
// 4 = bottom left
// 5 = center
position: 1,

});

---

This awesome jQuery plugin is developed by lyradesigns. For more Advanced Usages, please check the demo page or visit the official website.