This time I will share jQuery Plugin and tutorial about Responsive Animated Image Pinning Plugin For jQuery – Easypin, hope it will help you in programming stack.
An easy-to-use jQuery image pinning plugin used for adding customizable, interactive notes / markers to your images. The pin content can be viewed via either modal or popover when you click on the image notes / markers.
Basic usage:
1. Load the jQuery Easypin plugin and other required resources into the html page.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.easing.min.js"></script> |
3 |
<script src="/path/to/jquery.easypin.min.js"></script> |
2. Add an image with an unique easypin ID to your webpage.
1 |
<img src="1.jpg" class="pin" easypin-id="example"> |
3. Add your custom pin content to the popover as follows:
1 |
<div style="display:none;" popover> |
4. Initialize the plugin and adds your image markers to the image.
1 |
$('.pin').easypinShow({ |
2 |
data: '{"example":{/*pin data here*/}}', |
5. Configuration options.
01 |
$('.pin').easypinShow({ |
About Author:
Author: atayahmet
Website: https://github.com/atayahmet/jquery.easypin
This awesome jQuery plugin is developed by atayahmet. For more Advanced Usages, please check the demo page or visit the official website.
