jQuery Plugin For Image Copyright Tooltip - imgrights

File Size: 7.04 KB
Views Total: 995
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Image Copyright Tooltip - imgrights

imgrights is a simple jQuery plugin that displays the linkable image copyright information when hovers over, based on Html5 data-* attributes or inline elements.

How to use it:

1. Add the copyright information to an image using Html5 data-copyright and data-copyright-url attributes.

<img src="1.jpg" data-copyright="Copyright" data-copyright-url="https://www.jqueryscript.net">

2. Or using Html inline elements.

<div class="hmedia"> 
<img class="photo" alt="Copyright" src="1.jpg" />
<div style="display: none;"><em>by <span class="contributor vcard"> <a class="url fn" href="https://www.jqueryscript.net">Copyright</a> </span></em></div>
</div>

3. Include the jQuery javascript library and jQuery imgrights plugin at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.imgrights.min.js"></script>

4. Call the plugin.

<script>
$(function(){
$('img, .hmedia').imgrights();           
});
</script>

5. Available options.

<script>
$(function(){
$('img, .hmedia').imgrights();           
});
</script>

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