Home Image Component with jQuery Image Previewer Plugin | Envato Preview

Component with jQuery Image Previewer Plugin | Envato Preview

Image webcodeflow · December 29, 2021 · Comments off

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