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