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

File Size: 4.78 KB
Views Total: 2239
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Add Custom Pin It Buttons To Images - PinMe.js

PinMe.js is a jQuery plugin for creating custom floating 'Pin It' buttons/links to share your pages/images on Pinterest.com.

How to use it:

1. Load jQuery library and the jQuery pinme.js plugin in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="pinme.js"></script>

2. Call the plugin on where PinMe.js should look for images (body, .container, #very-specific-element, etc.)

$(".container").pinMe();

3. That's it. By default, the plugin will automatically generate a floating Pin link at the upper left corner of the image. You can customize the Pin It button/link using pinButton option during initialization.

$(".container").pinMe({

// use Font Awesome 4
pinButton: '<i class="fa fa-pinterest fa-5x"></i>'

});

4. All the default options.

// PinMe looks for img elements.
// e.g. <svg>, <picture>, or something
customElements: null,

// the duration of the fadein/fadeout effect
fadeDuration: 700,

// the URL you'd like to share
pageUrl: document.URL,

// custom pin it button
pinButton: '<div class="button">Pin</div>',

// default description
defaultDescription: "Check this out!",

// popout Pinterest sharing window
popOut: true,

// If false, pin button will be shown at all times
showOnHover: true,

// ignore images which have the following IDs or Classes
// e.g.  ignore: '.ignore-me, #ignore'
ignore: null

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