Press "Enter" to skip to content

Component with jQuery Image Previewer Plugin | Envato Preview

jQuery Envato Preview is a plug-in that attaches a tooltip-style rich text preview to an element when hovered over it.

It also appears on Envato Networks such as Themeforest.com and Codecanyon.com.

How to make use of it:

1. Load jQuery and the Envato Preview plugin within the web page.

<link rel="stylesheet" href="css/envato-preview.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/envato-preview.js"></script>

2. Initialize the plugin on doc prepared.

$(function(){
  $('.envato-preview').envatoPreview();
});

3. Add the CSS class ‘envato-preview’ to the goal factor and outline the content material to be displayed within the previewer.

<button class="envato-preview" 
        data-preview-url="preview.jpg" 
        data-item-name="webcodeflow" 
        data-item-author="Allen" 
        data-item-category="WCF" 
        data-item-currency="$" 
        data-item-cost="15,00,000">
        Hover Me
</button>

Envato Style Item Previewer In jQuery, jQuery Envato Preview Plugin/Github


See Demo And Download

Official Website(MehbubRashid): Click Here

This superior jQuery/javascript plugin is developed by MehbubRashid. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *