Create New Item
×
Item Type
File
Folder
Item Name
×
Search file in folder and subfolders...
File Manager
/
wp-content
/
plugins
/
emage-hover-effects-for-elementor
/
widgets
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<?php namespace Elementor; use Elementor\Modules\DynamicTags\Module as TagsModule; if (!defined('ABSPATH')) { exit; } class Emage_Hover extends Widget_Base { protected $config = null; public function get_name() { return 'emage_hover_effects'; } public function get_title() { return esc_html__('Emage Hover Effects', 'ehe-lang'); } public function get_icon() { return 'eicon-image-rollover'; } public function get_script_depends() { return ['emage']; } protected function _register_controls() { $this->addcontent(); //$this->addlicense(); $this->addstyle(); } protected function get_license($key) { if ($this->config == null) { $defaults = array( 'license' => 'false', 'license_key' => '' ); $this->config = array_merge($defaults, get_option('ehe_config', array())); } return $this->config[$key]; } protected function addlicense() { $this->start_controls_section( 'license_section', [ 'label' => __( 'License', 'plugin-name' ), 'tab' => Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'license', [ 'type' => Controls_Manager::HIDDEN, 'default' => is_admin() ? $this->get_license('license') : 'regular', ] ); $this->add_control( 'license_intro', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __('<p>Enter your purchase code below to activate your addon.</p><br><p>Activating the plugin unlocks additional settings, automatic future updates, and support from developers.</p>', 'plugin-name') ] ); $this->add_control( 'license_link', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => __('<a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank">Where is my purchase code?</a><br><br><a href="https://codecanyon.net/item/emage-image-hover-effects-for-elementor-page-builder/22563091" target="_blank">Buy a new license</a>', 'plugin-name') ] ); $this->add_control( 'license_purchase_code', [ 'label' => __( 'Purchase Code', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'placeholder' => __( 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', 'plugin-domain' ), 'default' => $this->get_license('license_key') ] ); $this->add_control( 'license_notice', [ 'show_label' => false, 'type' => Controls_Manager::RAW_HTML, 'raw' => __('', 'plugin-domain'), ] ); $this->add_control( 'license_activate_btn', [ 'label' => __('Status: <b>Inactive</b>', 'plugin-name'), 'type' => Controls_Manager::BUTTON, 'separator' => 'before', 'button_type' => 'success', 'text' => ' <span class="elementor-state-icon"> <i class="fa fa-spin fa-circle-o-notch" aria-hidden="true"></i></span><span class="publish-label">Activate</span> ', 'event' => 'emage:editor:activate', 'condition' => [ 'license' => 'false' ] ] ); $this->add_control( 'license_deactivate_btn', [ 'label' => __('Status: <b>Active</b>', 'plugin-name'), 'type' => Controls_Manager::BUTTON, 'separator' => 'before', 'button_type' => 'default', 'text' => __(' <span class="elementor-state-icon"> <i class="fa fa-spin fa-circle-o-notch" aria-hidden="true"></i></span><span class="publish-label">Deactivate</span> ', 'plugin-domain'), 'event' => 'emage:editor:deactivate', 'condition' => [ 'license!' => 'false' ] ] ); $this->end_controls_section(); } protected function addcontent() { $this->start_controls_section( 'image_section', [ 'label' => __( 'Image', 'plugin-name' ), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'license!' => 'false' ] ] ); $this->add_control( 'image', [ 'label' => __('Choose Image', 'plugin-domain'), 'type' => Controls_Manager::MEDIA, 'default' => [ 'url' => EHE_URL . 'assets/desert.jpeg', ], 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::IMAGE_CATEGORY,TagsModule::POST_META_CATEGORY], ] ] ); $this->add_control( 'image_effect', [ 'label' => __( 'Hover Effect', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::SELECT2, 'default' => 'imghvr-anim-zoom-in', 'options' => [ 'imghvr-anim-none' => __( 'None', 'plugin-domain' ), 'imghvr-anim-grayscale' => __( 'Grayscale', 'plugin-domain' ), 'imghvr-anim-color' => __( 'Color', 'plugin-domain' ), 'imghvr-anim-dive' => __( 'Dive', 'plugin-domain' ), 'imghvr-anim-none imghvr-anim-swap' => __( 'Swap', 'plugin-domain' ), 'imghvr-anim-scroll|imghvr-padding' => __( 'Scroll', 'plugin-domain' ), 'imghvr-anim-zoom-in' => __('Zoom In', 'plugin-domain'), 'imghvr-anim-zoom-out' => __('Zoom Out', 'plugin-domain'), 'imghvr-anim-zoom-in-out' => __('Zoom In Out', 'plugin-domain'), 'imghvr-anim-zoom-out-in' => __('Zoom Out In', 'plugin-domain'), 'imghvr-anim-zoom-in imghvr-anim-blur' => __( 'Zoom In Blur', 'plugin-domain' ), 'imghvr-anim-zoom-out imghvr-anim-blur' => __( 'Zoom Out Blur', 'plugin-domain' ), 'imghvr-anim-rotate' => __( 'Rotate', 'plugin-domain' ), 'imghvr-anim-blur' => __( 'Blur', 'plugin-domain' ), 'imghvr-anim-scale-rotate-left' => __( 'Scale Rotate Left', 'plugin-domain' ), 'imghvr-anim-scale-rotate-right' => __( 'Scale Rotate Right', 'plugin-domain' ), 'imghvr-anim-move imghvr-anim-move-up' => __( 'Move Up', 'plugin-domain' ), 'imghvr-anim-move imghvr-anim-move-down' => __( 'Move Down', 'plugin-domain' ), 'imghvr-anim-move imghvr-anim-move-left' => __( 'Move Left', 'plugin-domain' ), 'imghvr-anim-move imghvr-anim-move-right' => __( 'Move Right', 'plugin-domain' ), 'imghvr-anim-slide-out imghvr-anim-slide-out-up' => __( 'Slide Up', 'plugin-domain' ), 'imghvr-anim-slide-out imghvr-anim-slide-out-down' => __( 'Slide Down', 'plugin-domain' ), 'imghvr-anim-slide-out imghvr-anim-slide-out-left' => __( 'Slide Left', 'plugin-domain' ), 'imghvr-anim-slide-out imghvr-anim-slide-out-right' => __( 'Slide Right', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-up|imghvr-perspective' => __( 'Hinge Up', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-down|imghvr-perspective' => __( 'Hinge Down', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-left|imghvr-perspective' => __( 'Hinge Left', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-right|imghvr-perspective' => __( 'Hinge Right', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-hor' => __( 'Flip Horizontal', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-vert' => __( 'Flip Vertical', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-diag-left' => __( 'Flip Diagonal Left', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-diag-right' => __( 'Flip Diagonal Right', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-up' => __( 'Fold Up', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-down' => __( 'Fold Down', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-left' => __( 'Fold Left', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-right' => __( 'Fold Right', 'plugin-domain' ), 'imghvr-anim-zoom-out-slide imghvr-anim-zoom-out-slide-up' => __( 'Zoom Out Up', 'plugin-domain' ), 'imghvr-anim-zoom-out-slide imghvr-anim-zoom-out-slide-down' => __( 'Zoom Out Down', 'plugin-domain' ), 'imghvr-anim-zoom-out-slide imghvr-anim-zoom-out-slide-left' => __( 'Zoom Out Left', 'plugin-domain' ), 'imghvr-anim-zoom-out-slide imghvr-anim-zoom-out-slide-right' => __( 'Zoom Out Right', 'plugin-domain' ), 'imghvr-anim-zoom-out-flip imghvr-anim-zoom-out-flip-hor' => __( 'Zoom Out Flip Horizontal', 'plugin-domain' ), 'imghvr-anim-zoom-out-flip imghvr-anim-zoom-out-flip-vert' => __( 'Zoom Out Flip Vetical', 'plugin-domain' ), 'imghvr-anim-pivot-out imghvr-anim-pivot-out-top-left' => __( 'Pivot Top Left', 'plugin-domain' ), 'imghvr-anim-pivot-out imghvr-anim-pivot-out-top-right' => __( 'Pivot Top Right', 'plugin-domain' ), 'imghvr-anim-pivot-out imghvr-anim-pivot-out-bottom-left' => __( 'Pivot Bottom Left', 'plugin-domain' ), 'imghvr-anim-pivot-out imghvr-anim-pivot-out-bottom-right' => __( 'Pivot Bottom Right', 'plugin-domain' ), 'imghvr-anim-rotate-around' => __( 'Rotate Around', 'plugin-domain' ), 'imghvr-anim-lightspeed imghvr-anim-lightspeed-out-left' => __( 'Light Speed Out Left', 'plugin-domain' ), 'imghvr-anim-lightspeed imghvr-anim-lightspeed-out-right' => __( 'Light Speed Out Right', 'plugin-domain' ), 'imghvr-anim-fall imghvr-anim-fall-away-horizontal' => __( 'Fall Away Horizontal', 'plugin-domain' ), 'imghvr-anim-fall imghvr-anim-fall-away-vertical' => __( 'Fall Away Vertical', 'plugin-domain' ), 'imghvr-anim-fall imghvr-anim-fall-away-rotate' => __( 'Fall Away Rotate', 'plugin-domain' ), 'imghvr-anim-fall imghvr-anim-fall-away-rotate-invert' => __( 'Fall Away Rotate Invert', 'plugin-domain' ), 'imghvr-anim-throw-out imghvr-anim-throw-out-up' => __('Throw Up', 'plugin-domain'), 'imghvr-anim-throw-out imghvr-anim-throw-out-down' => __('Throw Down', 'plugin-domain'), 'imghvr-anim-throw-out imghvr-anim-throw-out-left' => __('Throw Left', 'plugin-domain'), 'imghvr-anim-throw-out imghvr-anim-throw-out-right' => __('Throw Right', 'plugin-domain'), 'imghvr-anim-cube-out imghvr-anim-cube-out-up|imghvr-perspective imghvr-overflow' => __('Cube Up', 'plugin-domain'), 'imghvr-anim-cube-out imghvr-anim-cube-out-down|imghvr-perspective imghvr-overflow' => __('Cube Down', 'plugin-domain'), 'imghvr-anim-cube-out imghvr-anim-cube-out-right|imghvr-perspective imghvr-overflow' => __('Cube Left', 'plugin-domain'), 'imghvr-anim-cube-out imghvr-anim-cube-out-left|imghvr-perspective imghvr-overflow' => __('Cube Right', 'plugin-domain'), 'imghvr-anim-stack' => __('Stack', 'plugin-domain'), 'imghvr-anim-bounce-out' => __('Bounce Out', 'plugin-domain'), 'imghvr-anim-bounce-out-up' => __('Bounce Out Up', 'plugin-domain'), 'imghvr-anim-bounce-out-down' => __('Bounce Out Down', 'plugin-domain'), 'imghvr-anim-bounce-out-left' => __('Bounce Out Left', 'plugin-domain'), 'imghvr-anim-bounce-out-right' => __('Bounce Out Right', 'plugin-domain'), ], ] ); $this->add_control( 'swap_help_text', [ 'show_label' => false, 'type' => Controls_Manager::RAW_HTML, 'raw' => __('<div style="color:#0b5885;background-color:#d0eeff;border-color:#bee7ff;padding: .75rem 1.25rem;border-radius: .25rem;line-height: 1.3em;border: 1px solid #bbcff5;">Add hover image in <br><b>Style > Overlay > Background Type</b></div>'), 'condition' => [ 'image_effect' => 'imghvr-anim-none imghvr-anim-swap' ] ] ); $this->add_group_control( Group_Control_Image_Size::get_type(), [ 'name' => 'image', 'exclude' => ['custom'], 'include' => [], 'default' => 'full' ] ); $this->add_control( 'image_opacity', [ 'label' => __( 'Opacity', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1, 'step' => 0.1, ], ], 'default' => [ 'unit' => 'px', 'size' => 1, ], 'selectors' => [ '{{WRAPPER}} .imghvr-anim-color' => 'opacity: {{SIZE}};', '{{WRAPPER}} .imghvr:hover .imghvr-anim-color' => 'opacity: 1;', ], 'condition' => [ 'image_effect' => 'imghvr-anim-color' ] ] ); $this->add_control( 'image_duration', [ 'label' => __( 'Transition Duration', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.05, ], ], 'default' => [ 'unit' => 'px', 'size' => 0.35, ], 'selectors' => [ '{{WRAPPER}} .imghvr, {{WRAPPER}} .imghvr img' => 'transition: {{SIZE}}s; animation-duration: {{SIZE}}s;' ] ] ); $this->add_control( 'image_hr', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->add_control( 'target', [ 'label' => __( 'Target', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::SELECT, 'default' => 'none', 'options' => [ 'none' => __( 'None', 'plugin-domain' ), 'link' => __( 'URL', 'plugin-domain' ), 'lightbox' => __( 'Light Box', 'plugin-domain' ), ], ] ); $this->add_control( 'link', [ 'label' => __( 'Link to', 'plugin-domain' ), 'type' => Controls_Manager::URL, 'placeholder' => __('https://your-link.com', 'plugin-domain'), 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::URL_CATEGORY] ], 'condition' => [ 'target' => 'link' ] ] ); $this->end_controls_section(); $this->start_controls_section( 'overlay_section', [ 'label' => __( 'Overlay', 'plugin-name' ), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'license!' => 'false' ] ] ); $this->add_control( 'overlay_show', [ 'label' => __( 'Show Overlay', 'plugin-domain' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => __( 'Yes', 'your-plugin' ), 'label_off' => __( 'No', 'your-plugin' ), 'return_value' => 'yes', 'default' => 'yes', ] ); $this->add_control( 'overlay_effect', [ 'label' => __( 'Hover Effect', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::SELECT2, 'default' => 'imghvr-anim-fade-in imghvr-anim-single', 'options' => [ 'imghvr-anim-none imghvr-anim-single' => __( '-- Show Always --', 'plugin-domain' ), 'imghvr-anim-fade-in imghvr-anim-single' => __( 'Fade', 'plugin-domain' ), 'imghvr-anim-zoom-in-alt imghvr-anim-single' => __( 'Zoom In', 'plugin-domain' ), 'imghvr-anim-crop imghvr-anim-single' => __( 'Crop', 'plugin-domain' ), 'imghvr-anim-none imghvr-anim-bg-none imghvr-anim-single' => __( 'No Background', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-up' => __( 'Slide Up', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-down' => __( 'Slide Down', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-left' => __( 'Slide Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-right' => __( 'Slide Right', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-top-left' => __( 'Slide Top Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-top-right' => __( 'Slide Top Right', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-bottom-left' => __( 'Slide Bottom Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-single imghvr-anim-slide-in-bottom-right' => __( 'Slide Bottom Right', 'plugin-domain' ), 'imghvr-anim-shutter-out imghvr-anim-single imghvr-anim-shutter-out-hor' => __( 'Shutter Out Horizontal', 'plugin-domain' ), 'imghvr-anim-shutter-out imghvr-anim-single imghvr-anim-shutter-out-vert' => __( 'Shutter Out Vertical', 'plugin-domain' ), 'imghvr-anim-shutter-out imghvr-anim-single imghvr-anim-shutter-out-diag-left' => __( 'Shutter Out Diagonal Left', 'plugin-domain' ), 'imghvr-anim-shutter-out imghvr-anim-single imghvr-anim-shutter-out-diag-right' => __( 'Shutter Out Diagonal Right', 'plugin-domain' ), 'imghvr-anim-shutter-in imghvr-anim-pseudo imghvr-anim-shutter-in-hor' => __( 'Shutter In Horizontal', 'plugin-domain' ), 'imghvr-anim-shutter-in imghvr-anim-pseudo imghvr-anim-shutter-in-vert' => __( 'Shutter In Vertical', 'plugin-domain' ), 'imghvr-anim-shutter-in-out imghvr-anim-pseudo imghvr-anim-shutter-in-out-hor' => __( 'Shutter In Out Horizontal', 'plugin-domain' ), 'imghvr-anim-shutter-in-out imghvr-anim-pseudo imghvr-anim-shutter-in-out-vert' => __( 'Shutter In Out Vertical', 'plugin-domain' ), 'imghvr-anim-shutter-in-out imghvr-anim-pseudo imghvr-anim-shutter-in-out-diag-left' => __( 'Shutter In Out Diagonal Left', 'plugin-domain' ), 'imghvr-anim-shutter-in-out imghvr-anim-pseudo imghvr-anim-shutter-in-out-diag-right' => __( 'Shutter In Out Diagonal Right', 'plugin-domain' ), 'imghvr-anim-strip-shutter imghvr-anim-pseudo imghvr-anim-strip-shutter-up' => __( 'Strip Shutter Up', 'plugin-domain' ), 'imghvr-anim-strip-shutter imghvr-anim-pseudo imghvr-anim-strip-shutter-down' => __( 'Strip Shutter Down', 'plugin-domain' ), 'imghvr-anim-strip-shutter imghvr-anim-pseudo imghvr-anim-strip-shutter-left' => __( 'Strip Shutter Left', 'plugin-domain' ), 'imghvr-anim-strip-shutter imghvr-anim-pseudo imghvr-anim-strip-shutter-right' => __( 'Strip Shutter Right', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-up' => __( 'Strip Horizontal Up', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-down' => __( 'Strip Horizontal Down', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-top-left' => __( 'Strip Horizontal Top Left', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-top-right' => __( 'Strip Horizontal Top Right', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-bottom-left' => __( 'Strip Horizontal Bottom Left', 'plugin-domain' ), 'imghvr-anim-strip-hor imghvr-anim-pseudo imghvr-anim-strip-hor-bottom-right' => __( 'Strip Horizontal Bottom Right', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-left' => __( 'Strip Vertical Left', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-right' => __( 'Strip Vertical Right', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-top-left' => __( 'Strip Vertical Top Left', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-top-right' => __( 'Strip Vertical Top Right', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-bottom-left' => __( 'Strip Vertical Bottom Left', 'plugin-domain' ), 'imghvr-anim-strip-vert imghvr-anim-pseudo imghvr-anim-strip-vert-bottom-right' => __( 'Strip Vertical Bottom Right', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-up' => __( 'Pixel Up', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-down' => __( 'Pixel Down', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-left' => __( 'Pixel Left', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-right' => __( 'Pixel Right', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-top-left' => __( 'Pixel Top Left', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-top-right' => __( 'Pixel Top Right', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-bottom-left' => __( 'Pixel Bottom Left', 'plugin-domain' ), 'imghvr-anim-pixel imghvr-anim-pseudo imghvr-anim-pixel-bottom-right' => __( 'Pixel Bottom Right', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-single imghvr-anim-pivot-in-top-left' => __( 'Pivot Top Left', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-single imghvr-anim-pivot-in-top-right' => __( 'Pivot Top Right', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-single imghvr-anim-pivot-in-bottom-left' => __( 'Pivot Bottom Left', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-single imghvr-anim-pivot-in-bottom-right' => __( 'Pivot Bottom Right', 'plugin-domain' ), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-rotate-left' => __('Blocks Rotate Left', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-rotate-right' => __('Blocks Rotate Right', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-rotate-in-left' => __('Blocks Rotate In Left', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-rotate-in-right' => __('Blocks Rotate In Right', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-in' => __('Blocks In', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-out' => __('Blocks Out', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-float-up' => __('Blocks Float Up', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-float-down' => __('Blocks Float Down', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-float-left' => __('Blocks Float Left', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-float-right' => __('Blocks Float Right', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-zoom-top-left' => __('Blocks Zoom Top Left', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-zoom-top-right' => __('Blocks Zoom Top Right', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-zoom-bottom-left' => __('Blocks Zoom Bottom Left', 'plugin-domain'), 'imghvr-anim-blocks imghvr-anim-pseudo imghvr-anim-blocks-zoom-bottom-right' => __('Blocks Zoom Bottom Right', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-single imghvr-anim-throw-in-up' => __('Throw Up', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-single imghvr-anim-throw-in-down' => __('Throw Down', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-single imghvr-anim-throw-in-left' => __('Throw Left', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-single imghvr-anim-throw-in-right' => __('Throw Right', 'plugin-domain'), 'imghvr-anim-flash imghvr-anim-pseudo imghvr-anim-flash-top-left' => __('Flash Top Left', 'plugin-domain'), 'imghvr-anim-flash imghvr-anim-pseudo imghvr-anim-flash-top-right' => __('Flash Top Right', 'plugin-domain'), 'imghvr-anim-flash imghvr-anim-pseudo imghvr-anim-flash-bottom-left' => __('Flash Bottom Left', 'plugin-domain'), 'imghvr-anim-flash imghvr-anim-pseudo imghvr-anim-flash-bottom-right' => __('Flash Bottom Right', 'plugin-domain'), 'imghvr-anim-splash imghvr-anim-pseudo imghvr-anim-splash-up' => __('Splash Up', 'plugin-domain'), 'imghvr-anim-splash imghvr-anim-pseudo imghvr-anim-splash-down' => __('Splash Down', 'plugin-domain'), 'imghvr-anim-splash imghvr-anim-pseudo imghvr-anim-splash-left' => __('Splash Left', 'plugin-domain'), 'imghvr-anim-splash imghvr-anim-pseudo imghvr-anim-splash-right' => __('Splash Right', 'plugin-domain'), 'imghvr-anim-stack imghvr-anim-single imghvr-anim-stack-up' => __('Stack Up', 'plugin-domain'), 'imghvr-anim-stack imghvr-anim-single imghvr-anim-stack-down' => __('Stack Down', 'plugin-domain'), 'imghvr-anim-stack imghvr-anim-single imghvr-anim-stack-left' => __('Stack Left', 'plugin-domain'), 'imghvr-anim-stack imghvr-anim-single imghvr-anim-stack-right' => __('Stack Right', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-up' => __('Circle Up', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-down' => __('Circle Down', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-left' => __('Circle Left', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-right' => __('Circle Right', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-top-left' => __('Circle Top Left', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-top-right' => __('Circle Top Right', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-bottom-left' => __('Circle Bottom Left', 'plugin-domain'), 'imghvr-anim-circle imghvr-anim-pseudo imghvr-anim-circle-bottom-right' => __('Circle Bottom Right', 'plugin-domain'), 'imghvr-anim-book imghvr-anim-pseudo imghvr-anim-book-open-horiz|imghvr-perspective imghvr-overflow' => __('Book Open Horizontal', 'plugin-domain'), 'imghvr-anim-book imghvr-anim-pseudo imghvr-anim-book-open-vert|imghvr-perspective imghvr-overflow' => __('Book Open Vertical', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo' => __('Border Reveal', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-horiz' => __('Border Reveal Horizontal', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-vert' => __('Border Reveal Vertical', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-corners-2' => __('Border Reveal Diagonal Left', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-corners-1' => __('Border Reveal Diagonal Right', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-top-left' => __('Border Reveal Top Left', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-top-right' => __('Border Reveal Top Right', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-bottom-left' => __('Border Reveal Bottom Left', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-bottom-right' => __('Border Reveal Bottom Right', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-cc-1' => __('Border Reveal Clockwise', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-ccc-1' => __('Border Reveal Anti Clockwise', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-cc-2' => __('Border Reveal Split Clockwise', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-ccc-2' => __('Border Reveal Split Anti Clockwise', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-cc-3' => __('Border Reveal Attach Clockwise', 'plugin-domain'), 'imghvr-anim-border-reveal imghvr-anim-pseudo imghvr-anim-border-reveal-ccc-3' => __('Border Reveal Attach Anti Clockwise', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-horiz' => __('Blinds Horizontal', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-vert' => __('Blinds Vertical', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-up' => __('Blinds Up', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-down' => __('Blinds Down', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-left' => __('Blinds Left', 'plugin-domain'), 'imghvr-anim-blinds imghvr-anim-pseudo imghvr-anim-blinds-right' => __('Blinds Right', 'plugin-domain'), ], 'condition' => [ 'overlay_show' => 'yes' ] ] ); $this->add_control( 'overlay_duration', [ 'label' => __( 'Transition Duration', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.05, ], ], 'default' => [ 'unit' => 'px', 'size' => 0.35, ], 'selectors' => [ '{{WRAPPER}} .imghvr-overlay, {{WRAPPER}} .imghvr-anim-pseudo:before, {{WRAPPER}} .imghvr-anim-pseudo:after, {{WRAPPER}} .imghvr-anim-pseudo div:before, {{WRAPPER}} .imghvr-anim-pseudo div:after' => 'transition-duration: {{SIZE}}s; animation-duration: {{SIZE}}s;', '{{WRAPPER}} .imghvr:hover .imghvr-overlay, {{WRAPPER}} .imghvr:hover .imghvr-anim-pseudo:before, {{WRAPPER}} .imghvr:hover .imghvr-anim-pseudo:after, {{WRAPPER}} .imghvr:hover .imghvr-anim-pseudo div:before, {{WRAPPER}} .imghvr:hover .imghvr-anim-pseudo div:after' => 'transition-duration: {{SIZE}}s; animation-duration: {{SIZE}}s;' ], 'condition' => [ 'overlay_show' => 'yes' ] ] ); $this->end_controls_section(); $this->start_controls_section( 'content_section', [ 'label' => __('Content', 'plugin-name'), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'license!' => 'false' ] ] ); $this->add_control( 'title', [ 'label' => __( 'Title', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'default' => 'Image', 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::TEXT_CATEGORY,TagsModule::POST_META_CATEGORY], ] ] ); $this->add_control( 'subtitle', [ 'label' => __('Sub Title', 'plugin-domain'), 'label_block' => true, 'type' => Controls_Manager::TEXT, 'default' => 'Hover Effects', 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::TEXT_CATEGORY,TagsModule::POST_META_CATEGORY], ] ] ); $this->add_control( 'content', [ 'label' => __( 'Content', 'plugin-domain' ), 'description' => __( 'Supports HTML format', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::TEXTAREA, 'rows' => 4, 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::TEXT_CATEGORY,TagsModule::POST_META_CATEGORY], ] ] ); $this->add_control( 'content_icon', [ 'label' => __('Icon', 'text-domain'), 'type' => Controls_Manager::ICONS, ] ); $this->add_control( 'align', [ 'label' => __( 'Alignment', 'plugin-domain' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'plugin-domain' ), 'icon' => 'eicon-h-align-left', ], 'center' => [ 'title' => __( 'Center', 'plugin-domain' ), 'icon' => 'eicon-h-align-center', ], 'right' => [ 'title' => __( 'Right', 'plugin-domain' ), 'icon' => 'eicon-h-align-right', ], ], 'default' => 'center', 'toggle' => false ] ); $this->add_control( 'valign', [ 'label' => __( 'Vertical Alignment', 'plugin-domain' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'flex-start' => [ 'title' => __( 'Top', 'plugin-domain' ), 'icon' => 'eicon-v-align-top', ], 'center' => [ 'title' => __( 'Middle', 'plugin-domain' ), 'icon' => 'eicon-v-align-middle', ], 'flex-end' => [ 'title' => __( 'Bottom', 'plugin-domain' ), 'icon' => 'eicon-v-align-bottom', ], ], 'default' => 'center', 'toggle' => false, 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-content-wrapper' => 'justify-content: {{VALUE}};' ] ] ); $this->add_control( 'content_hr', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->add_control( 'content_effect', [ 'label' => __( 'Hover Effect', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::SELECT2, 'default' => 'imghvr-anim-fade-in', 'options' => [ 'imghvr-anim-none' => __( '-- Show Always --', 'plugin-domain' ), 'imghvr-anim-fade-in' => __( 'Fade', 'plugin-domain' ), 'imghvr-anim-zoom-in-alt' => __( 'Zoom In', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-up' => __( 'Slide Up', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-down' => __( 'Slide Down', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-left' => __( 'Slide Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-right' => __( 'Slide Right', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-top-left' => __( 'Slide Top Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-top-right' => __( 'Slide Top Right', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-bottom-left' => __( 'Slide Bottom Left', 'plugin-domain' ), 'imghvr-anim-slide-in imghvr-anim-slide-in-bottom-right' => __( 'Slide Bottom Right', 'plugin-domain' ), 'imghvr-anim-fade imghvr-anim-fade-up' => __( 'Fade Up', 'plugin-domain' ), 'imghvr-anim-fade imghvr-anim-fade-down' => __( 'Fade Down', 'plugin-domain' ), 'imghvr-anim-fade imghvr-anim-fade-left' => __( 'Fade Left', 'plugin-domain' ), 'imghvr-anim-fade imghvr-anim-fade-right' => __( 'Fade Right', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-up|imghvr-perspective' => __( 'Hinge Up', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-down|imghvr-perspective' => __( 'Hinge Down', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-left|imghvr-perspective' => __( 'Hinge Left', 'plugin-domain' ), 'imghvr-anim-hinge imghvr-anim-hinge-right|imghvr-perspective' => __( 'Hinge Right', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-hor' => __( 'Flip Horizontal', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-vert' => __( 'Flip Vertical', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-diag-left' => __( 'Flip Diagonal Left', 'plugin-domain' ), 'imghvr-anim-flip imghvr-anim-flip-diag-right' => __( 'Flip Diagonal Right', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-down' => __( 'Fold Up', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-up' => __( 'Fold Down', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-left' => __( 'Fold Left', 'plugin-domain' ), 'imghvr-anim-fold imghvr-anim-fold-right' => __( 'Fold Right', 'plugin-domain' ), 'imghvr-anim-zoom-in-flip imghvr-anim-zoom-in-flip-hor' => __( 'Zoom In Flip Horizontal', 'plugin-domain' ), 'imghvr-anim-zoom-in-flip imghvr-anim-zoom-in-flip-vert' => __( 'Zoom In Flip Vetical', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-pivot-in-top-left' => __( 'Pivot Top Left', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-pivot-in-top-right' => __( 'Pivot Top Right', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-pivot-in-bottom-left' => __( 'Pivot Bottom Left', 'plugin-domain' ), 'imghvr-anim-pivot-in imghvr-anim-pivot-in-bottom-right' => __( 'Pivot Bottom Right', 'plugin-domain' ), 'imghvr-anim-throw-in imghvr-anim-throw-in-up' => __('Throw Up', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-throw-in-down' => __('Throw Down', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-throw-in-left' => __('Throw Left', 'plugin-domain'), 'imghvr-anim-throw-in imghvr-anim-throw-in-right' => __('Throw Right', 'plugin-domain'), 'imghvr-anim-cube-in imghvr-anim-cube-in-up|imghvr-perspective imghvr-overflow' => __('Cube Up', 'plugin-domain'), 'imghvr-anim-cube-in imghvr-anim-cube-in-down|imghvr-perspective imghvr-overflow' => __('Cube Down', 'plugin-domain'), 'imghvr-anim-cube-in imghvr-anim-cube-in-right|imghvr-perspective imghvr-overflow' => __('Cube Left', 'plugin-domain'), 'imghvr-anim-cube-in imghvr-anim-cube-in-left|imghvr-perspective imghvr-overflow' => __('Cube Right', 'plugin-domain'), 'imghvr-anim-lightspeed-in imghvr-anim-lightspeed-in-left' => __('Lightspeed In Left', 'plugin-domain'), 'imghvr-anim-lightspeed-in imghvr-anim-lightspeed-in-right' => __('Lightspeed In Right', 'plugin-domain'), 'imghvr-anim-bounce-in' => __('Bounce In', 'plugin-domain'), 'imghvr-anim-bounce-in-up' => __('Bounce In Up', 'plugin-domain'), 'imghvr-anim-bounce-in-down' => __('Bounce In Down', 'plugin-domain'), 'imghvr-anim-bounce-in-left' => __('Bounce In Left', 'plugin-domain'), 'imghvr-anim-bounce-in-right' => __('Bounce In Right', 'plugin-domain'), 'imghvr-anim-shift imghvr-anim-shift-top-left|imghvr-overflow' => __('Shift Top Left', 'plugin-domain'), 'imghvr-anim-shift imghvr-anim-shift-top-right|imghvr-overflow' => __('Shift Top Right', 'plugin-domain'), 'imghvr-anim-shift imghvr-anim-shift-bottom-left|imghvr-overflow' => __('Shift Bottom Left', 'plugin-domain'), 'imghvr-anim-shift imghvr-anim-shift-bottom-right|imghvr-overflow' => __('Shift Bottom Right', 'plugin-domain'), ], ] ); $this->add_control( 'content_duration', [ 'label' => __( 'Transition Duration', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.05, ], ], 'default' => [ 'unit' => 'px', 'size' => 0.35, ], 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-content-wrapper' => 'transition-duration: {{SIZE}}s;', '{{WRAPPER}} .imghvr:hover .imghvr-content-wrapper' => 'animation-duration: {{SIZE}}s', '{{WRAPPER}} .imghvr-title, {{WRAPPER}} .imghvr-subtitle, {{WRAPPER}} .imghvr-content, {{WRAPPER}} .imghvr-button-wrapper' => 'transition-duration: {{SIZE}}s' ] ] ); $this->add_control( 'content_delay', [ 'label' => __( 'Transition Delay', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3, 'step' => 0.05, ], ], 'default' => [ 'unit' => 'px', 'size' => 0, ], 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-content-wrapper' => 'transition-delay: {{SIZE}}s; animation-duration: {{SIZE}}s;', '{{WRAPPER}} .ih-delay-xs' => 'transition-delay: calc({{SIZE}}s * 1)', '{{WRAPPER}} .ih-delay-sm' => 'transition-delay: calc({{SIZE}}s * 2)', '{{WRAPPER}} .ih-delay-md' => 'transition-delay: calc({{SIZE}}s * 3)', '{{WRAPPER}} .ih-delay-lg' => 'transition-delay: calc({{SIZE}}s * 4)', '{{WRAPPER}} .ih-delay-xl' => 'transition-delay: calc({{SIZE}}s * 5)', '{{WRAPPER}} .ih-delay-xxl' => 'transition-delay: calc({{SIZE}}s * 6)', ] ] ); $this->add_control( 'content_hr2', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->add_control( 'content_appearance', [ 'label' => 'Content Appearance', 'type' => 'repeatselect', 'options' => [ 'imghvr-anim-none' => __('Show Always', 'plugin-domain'), 'imghvr-anim-fade-content imghvr-anim-fade-content-up' => __( 'Fade Up', 'plugin-domain' ), 'imghvr-anim-fade-content imghvr-anim-fade-content-down' => __( 'Fade Down', 'plugin-domain' ), 'imghvr-anim-fade-content imghvr-anim-fade-content-left' => __( 'Fade Left', 'plugin-domain' ), 'imghvr-anim-fade-content imghvr-anim-fade-content-right' => __( 'Fade Right', 'plugin-domain' ), 'imghvr-anim-slide-content imghvr-anim-slide-content-up' => __( 'Slide Up', 'plugin-domain' ), 'imghvr-anim-slide-content imghvr-anim-slide-content-down' => __( 'Slide Down', 'plugin-domain' ), 'imghvr-anim-zoom-content imghvr-anim-zoom-content-in' => __( 'Zoom In', 'plugin-domain' ), 'imghvr-anim-zoom-content imghvr-anim-zoom-content-out' => __( 'Zoom Out', 'plugin-domain' ), 'imghvr-anim-flip-content imghvr-anim-flip-content-x' => __( 'Flip X', 'plugin-domain' ), 'imghvr-anim-flip-content imghvr-anim-flip-content-y' => __( 'Flip Y', 'plugin-domain' ), ] ] ); $this->end_controls_section(); $this->start_controls_section( 'buttons_section', [ 'label' => __( 'Buttons', 'plugin-name' ), 'tab' => Controls_Manager::TAB_CONTENT, 'condition' => [ 'license!' => 'false' ] ] ); $this->add_control( 'buttons', [ 'label' => __('', 'prime-addons'), 'type' => Controls_Manager::REPEATER, 'fields' => [ [ 'name' => 'text', 'label' => __( 'Text', 'prime-addons'), 'type' => Controls_Manager::TEXT, 'label_block' => true, 'default' => 'Button', 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::TEXT_CATEGORY], ] ], [ 'name' => 'selected_icon', 'label' => __( 'Icon', 'prime-addons'), 'type' => Controls_Manager::ICONS, 'fa4compatibility' => 'icon', 'label_block' => true ], [ 'name' => 'link', 'label' => __( 'Link', 'plugin-domain' ), 'type' => Controls_Manager::URL, 'placeholder' => __( 'https://your-link.com', 'plugin-domain' ), 'default' => [ 'url' => '#', ], 'dynamic' => [ 'active' => true, 'categories' => [TagsModule::URL_CATEGORY] ] ] ], 'prevent_empty' => false, 'title_field' => '{{{ text }}}', ] ); $this->add_control( 'buttons_divider', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->add_control( 'buttons_direction', [ 'label' => __( 'Stack', 'plugin-domain' ), 'type' => Controls_Manager::SELECT, 'default' => 'row', 'options' => [ 'row' => __( 'Horizontal', 'plugin-domain' ), 'column' => __( 'Vertical', 'plugin-domain' ) ] ] ); $this->add_control( 'buttons_align', [ 'label' => __( 'Alignment', 'plugin-domain' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'right' => [ 'title' => __( 'Left', 'plugin-domain' ), 'icon' => 'eicon-h-align-left', ], 'left' => [ 'title' => __( 'Right', 'plugin-domain' ), 'icon' => 'eicon-h-align-right', ], ], 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-buttons' => 'margin-{{VALUE}}: auto;' ] ] ); $this->add_control( 'buttons_valign', [ 'label' => __( 'Vertical Alignment', 'plugin-domain' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'bottom' => [ 'title' => __( 'Top', 'plugin-domain' ), 'icon' => 'eicon-v-align-top', ], 'top' => [ 'title' => __( 'Bottom', 'plugin-domain' ), 'icon' => 'eicon-v-align-bottom', ], ], 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-buttons' => 'margin-{{VALUE}}: auto;' ] ] ); $this->add_control( 'buttons_icon_align', [ 'label' => __( 'Icon Position', 'plugin-domain' ), 'type' => Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __( 'Left', 'plugin-domain' ), 'icon' => 'eicon-h-align-left', ], 'right' => [ 'title' => __( 'Right', 'plugin-domain' ), 'icon' => 'eicon-h-align-right', ] ], 'default' => 'left', 'toggle' => false ] ); $this->end_controls_section(); } protected function addstyle() { $this->start_controls_section( 'image_style', [ 'label' => __( 'Image', 'plugin-name' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'image_background', [ 'label' => __( 'Background', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .imghvr' => 'background: {{VALUE}}', ] ] ); $this->add_control( 'match_height', [ 'label' => __( 'Match Height', 'plugin-domain' ), 'label_block' => true, 'type' => Controls_Manager::SELECT, 'default' => '100%', 'options' => [ '100%' => __( 'Yes', 'plugin-domain' ), 'auto' => __( 'No', 'plugin-domain' ) ], 'selectors' => [ '{{WRAPPER}}, {{WRAPPER}} .elementor-widget-container, {{WRAPPER}} .col-row' => 'height: {{VALUE}};' ] ] ); $this->add_control( 'image_height', [ 'label' => __( 'Height', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 1000, 'step' => 5, ], ], 'default' => [ 'unit' => 'px', 'size' => 400, ], 'condition' => [ 'match_height' => 'auto' ], 'selectors' => [ '{{WRAPPER}} .imghvr' => 'max-height: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-padding:hover' => 'padding-top: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'image_border_radius', [ 'label' => __( 'Border Radius', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); $this->start_controls_section( 'overlay_style', [ 'label' => __( 'Overlay', 'plugin-name' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'overlay_border', 'label' => __( 'Border', 'plugin-domain' ), 'selector' => '{{WRAPPER}} .imghvr-overlay', ] ); $this->add_control( 'overlay_margin', [ 'label' => __( 'Margin', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr .imghvr-overlay' => 'margin-top: {{TOP}}{{UNIT}}; margin-right: {{RIGHT}}{{UNIT}}; margin-bottom: {{BOTTOM}}{{UNIT}}; margin-left: {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'overlay_background', 'label' => __( 'Background', 'plugin-domain' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .imghvr-anim-single, {{WRAPPER}} .imghvr-anim-pseudo::before, {{WRAPPER}} .imghvr-anim-pseudo::after, {{WRAPPER}} .imghvr-anim-pseudo div::before, {{WRAPPER}} .imghvr-anim-pseudo div::after', ] ); $this->end_controls_section(); $this->start_controls_section( 'content_style', [ 'label' => __( 'Content', 'plugin-name' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'title_heading', [ 'label' => __( 'Title', 'plugin-name' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'title_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .imghvr-title' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'title_typography', 'label' => __( 'Typography', 'plugin-domain' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .imghvr-title', ] ); $this->add_control( 'subtitle_heading', [ 'label' => __( 'Sub Title', 'plugin-name' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'subtitle_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .imghvr-subtitle' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'subtitle_typography', 'label' => __( 'Typography', 'plugin-domain' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .imghvr-subtitle', ] ); $this->add_control( 'content_heading', [ 'label' => __( 'Content', 'plugin-name' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'content_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .imghvr-content' => 'color: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'content_typography', 'label' => __( 'Typography', 'plugin-domain' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .imghvr-content', ] ); $this->add_control( 'icon_heading', [ 'label' => __( 'Icon', 'plugin-name' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'icon_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .imghvr-icon' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'icon_size', [ 'label' => __( 'Icon Size', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 200, 'step' => 1, ], 'em' => [ 'min' => 0, 'max' => 5, 'step' => 0.1, ] ], 'default' => [ 'unit' => 'px', 'size' => 25, ], 'selectors' => [ '{{WRAPPER}} .imghvr-icon i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-icon svg' => 'max-width: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'hr', [ 'type' => Controls_Manager::DIVIDER, 'style' => 'thick', ] ); $this->add_control( 'content_padding', [ 'label' => __( 'Padding', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr-content-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'content_margin', [ 'label' => __( 'Margin', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr-content-wrapper' => 'top: {{TOP}}{{UNIT}}; right: {{RIGHT}}{{UNIT}}; bottom: {{BOTTOM}}{{UNIT}}; left: {{LEFT}}{{UNIT}};', ], ] ); $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'background', 'label' => __( 'Background', 'plugin-domain' ), 'types' => [ 'classic', 'gradient' ], 'selector' => '{{WRAPPER}} .imghvr-content-wrapper', ] ); $this->end_controls_section(); $this->start_controls_section( 'buttons_style', [ 'label' => __( 'Buttons', 'plugin-name' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'buttons_color', [ 'label' => __( 'Color', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#222', 'selectors' => [ '{{WRAPPER}} .imghvr-button' => 'color: {{VALUE}}', ], ] ); $this->add_control( 'buttons_background', [ 'label' => __( 'Background', 'plugin-domain' ), 'type' => Controls_Manager::COLOR, 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_1, ], 'default' => '#fff', 'selectors' => [ '{{WRAPPER}} .imghvr-button' => 'background: {{VALUE}}', ], ] ); $this->add_group_control( Group_Control_Typography::get_type(), [ 'name' => 'buttons_typography', 'label' => __( 'Typography', 'plugin-domain' ), 'scheme' => Scheme_Typography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .imghvr-button', ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'buttons_border', 'label' => __( 'Border', 'plugin-domain' ), 'selector' => '{{WRAPPER}} .imghvr-button', ] ); $this->add_control( 'buttons_spacing', [ 'label' => __('Spacing', 'plugin-domain'), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px' ], 'range' => [ 'px' => [ 'min' => 0, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'unit' => 'px', 'size' => 10, ], 'selectors' => [ '{{WRAPPER}} .imghvr-buttons-row .imghvr-button-wrapper' => 'margin-right: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-buttons-row .imghvr-button-wrapper:last-child' => 'margin-right: 0;', '{{WRAPPER}} .imghvr-buttons-column .imghvr-button-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-buttons-column .imghvr-button-wrapper:last-child' => 'margin-bottom: 0;', ], ] ); $this->add_control( 'buttons_icon_spacing', [ 'label' => __( 'Icon Spacing', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], 'em' => [ 'min' => 0, 'max' => 5, 'step' => 0.1, ] ], 'default' => [ 'unit' => 'em', 'size' => 0.3, ], 'selectors' => [ '{{WRAPPER}} .imghvr-buttons-icon-left .imghvr-button i, {{WRAPPER}} .imghvr-buttons-icon-left .imghvr-button svg' => 'margin-right: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-buttons-icon-right .imghvr-button i, {{WRAPPER}} .imghvr-buttons-icon-right .imghvr-button svg' => 'margin-left: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'buttons_icon_size', [ 'label' => __( 'Icon Size', 'plugin-domain' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ 'px', 'em' ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], 'em' => [ 'min' => 0, 'max' => 5, 'step' => 0.1, ] ], 'default' => [ 'unit' => 'px', 'size' => 25, ], 'selectors' => [ '{{WRAPPER}} .imghvr-button i' => 'font-size: {{SIZE}}{{UNIT}};', '{{WRAPPER}} .imghvr-button svg' => 'max-width: {{SIZE}}{{UNIT}}; max-height: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'buttons_border_radius', [ 'label' => __( 'Border Radius', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'buttons_padding', [ 'label' => __( 'Padding', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->add_control( 'buttons_margin', [ 'label' => __( 'Margin', 'plugin-domain' ), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => [ 'px', '%', 'em' ], 'selectors' => [ '{{WRAPPER}} .imghvr-buttons' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); if (is_admin() && $this->get_license('license') == 'false') { ?> <div class="imghvr-wrapper"> <div class="imghvr"> <img src="<?php echo EHE_URL . 'assets/placeholder.png'; ?>" alt="" class="imghvr-anim-none"> </div> </div> <?php } else { $index = 0; $delay = 0; $delays = array('ih-delay-zero', 'ih-delay-xs', 'ih-delay-sm', 'ih-delay-md', 'ih-delay-lg', 'ih-delay-xl', 'ih-delay-xxl'); $contents = array('title', 'subtitle', 'content'); $types = array('image', 'overlay', 'content'); $classes = array( 'imghvr' => array('imghvr'), 'image' => array('imghvr-anim-none'), 'overlay' => array('imghvr-anim-none', 'imghvr-anim-single'), 'content' => array('imghvr-anim-none') ); foreach ($types as $type) { $tmpclass = explode('|', $settings[$type . '_effect']); $classes[$type] = $tmpclass[0]; if (isset($tmpclass[1])) { $classes['imghvr'][] = $tmpclass[1]; } } array_unique($classes['imghvr']); $image_url = ""; if (!empty($settings['image']['id'])) { $image_url = Group_Control_Image_Size::get_attachment_image_src($settings['image']['id'], 'image', $settings); } else if (!empty($settings['image']['url'])) { $image_url = $settings['image']['url']; } else if (is_string($settings['image'])) { $image_url = $settings['image']; } ?> <div class="imghvr-wrapper"> <div class="<?php echo implode(' ', $classes['imghvr']); ?>"> <?php if ($settings['overlay_show'] === 'yes') { ?> <div class="imghvr-overlay <?php echo $classes['overlay']; ?>"><div></div></div> <?php } ?> <div class="imghvr-content-wrapper imghvr-content-<?php echo $settings['align']; ?> <?php echo $classes['content']; ?>"> <?php if ($settings['target'] === 'link') { $target = $settings['link']['is_external'] ? ' target="_blank"' : ''; $nofollow = $settings['link']['nofollow'] ? ' rel="nofollow"' : ''; echo '<a href="' . $settings['link']['url'] . '"' . $target . $nofollow . ' class="imghvr-link"></a>'; } else if ($settings['target'] === 'lightbox') { echo '<a href="' . $settings['image']['url'] . '" class="imghvr-link"></a>'; } ?> <?php if (isset($settings['content_icon']) && $settings['content_icon']['value'] !== '') { $anim = (isset($settings['content_appearance'][$index])) ? $settings['content_appearance'][$index] : 'imghvr-anim-none'; echo '<div class="imghvr-icon ' . $anim . ' ' . $delays[$delay] . '">'; Icons_Manager::render_icon($settings['content_icon']); echo '</div>'; if ($anim !== 'imghvr-anim-none') { $delay++; } $index++; } ?> <?php foreach($contents as $content) { if ($settings[$content] !== '') { $anim = (isset($settings['content_appearance'][$index])) ? $settings['content_appearance'][$index] : 'imghvr-anim-none'; echo '<div class="imghvr-' . $content . ' ' . $anim . ' ' . $delays[$delay] . '">' . $settings[$content] . '</div>'; if ($anim !== 'imghvr-anim-none') { $delay++; } $index++; } } ?> <?php if (is_array($settings['buttons']) && sizeof($settings['buttons']) > 0) { ?> <div class="imghvr-buttons imghvr-buttons-<?php echo $settings['buttons_direction']; ?> imghvr-buttons-icon-<?php echo $settings['buttons_icon_align']; ?>"> <?php foreach ($settings['buttons'] as $index => $button) { $anim = (isset($settings['content_appearance'][$index])) ? $settings['content_appearance'][$index] : 'imghvr-anim-none'; $target = $button['link']['is_external'] ? ' target="_blank"' : ''; $nofollow = $button['link']['nofollow'] ? ' rel="nofollow"' : ''; echo '<div class="imghvr-button-wrapper ' . $anim . ' ' . $delays[$delay] . '">'; echo '<a href="' . $button['link']['url'] . '"' . $target . $nofollow . ' class="imghvr-button imghvr-button-' . ($index + 1) . '">'; if (isset($button['selected_icon']) && $button['selected_icon']['value'] !== '') { Icons_Manager::render_icon( $button['selected_icon'], ['aria-hidden' => 'true']); } echo $button['text']; echo '</a>'; echo '</div>'; if ($anim !== 'imghvr-anim-none') { $delay++; } $index++; } ?> </div> <?php } ?> </div> <img src="<?php echo $image_url; ?>" alt="" class="<?php echo $classes['image']; ?>"> </div> </div> <?php } } protected function _content_template() { ?> <# if (settings.license == 'false') { #> <div class="imghvr-wrapper"> <div class="imghvr"> <img src="<?php echo EHE_URL . 'assets/placeholder.png'; ?>" alt="" class="imghvr-anim-none"> </div> </div> <# } else { var index = 0; var delay = 0; var delays = ['ih-delay-zero', 'ih-delay-xs', 'ih-delay-sm', 'ih-delay-md', 'ih-delay-lg', 'ih-delay-xl', 'ih-delay-xxl']; var contents = ['title', 'subtitle', 'content']; var types = [ 'image', 'overlay', 'content' ]; var classes = { imghvr: ['imghvr'], image: ['imghvr-anim-none'], overlay: ['imghvr-anim-none imghvr-anim-single'], content: ['imghvr-anim-none'] }; _.each(types, function(type) { var tmpclass = settings[type + '_effect'] ? settings[type + '_effect'].split('|') : classes[type]; classes[type] = tmpclass[0]; if (tmpclass[1]) { classes['imghvr'].push(tmpclass[1]); } }); _.uniq(classes['imghvr']); #> <# if (settings.image.id) { var image = { id: settings.image.id, url: settings.image.url, size: settings.image_size, dimension: settings.image_custom_dimension, model: view.getEditModel() }; var image_url = elementor.imagesManager.getImageUrl( image ); } else if (settings.image.url) { var image_url = settings.image.url; } else { var image_url = settings.image; } #> <div class="imghvr-wrapper"> <div class="{{ classes['imghvr'].join(' ') }}"> <# if (settings.overlay_show === 'yes') { #> <div class="imghvr-overlay {{ classes['overlay'] }}"><div></div></div> <# } #> <div class="imghvr-content-wrapper imghvr-content-{{ settings.align }} {{ classes['content'] }}"> <# if (settings.target === 'link') { var target = settings.link.is_external ? ' target="_blank"' : ''; var nofollow = settings.link.nofollow ? ' rel="nofollow"' : ''; #> <a href="{{ settings.link.url }}"{{ target }}{{ nofollow }} class="imghvr-link"></a> <# } else if (settings.target === 'lightbox') { #> <a href="{{ settings.image.url }}" class="imghvr-link"></a> <# } #> <# if (settings.content_icon && settings.content_icon.value) { var iconHTML = elementor.helpers.renderIcon(view, settings.content_icon, { 'aria-hidden': true }, 'i', 'object'); #> <# var anim = (settings.content_appearance[index]) ? settings.content_appearance[index] : 'imghvr-anim-none'; #> <div class="imghvr-icon {{ anim }} {{ delays[delay] }}">{{{ iconHTML.value }}}</div> <# if (anim !== 'imghvr-anim-content') { delay++; } #> <# index++; #> <# } #> <# _.each(contents, function(content) { #> <# if (settings[content]) { #> <# var anim = (settings.content_appearance[index]) ? settings.content_appearance[index] : 'imghvr-anim-none'; #> <div class="imghvr-{{ content }} {{ anim }} {{ delays[delay] }}">{{{ settings[content] }}}</div> <# if (anim !== 'imghvr-anim-content') { delay++; } #> <# index++; #> <# } #> <# }); #> <# if (settings.buttons.length > 0) { #> <div class="imghvr-buttons imghvr-buttons-{{ settings.buttons_direction }} imghvr-buttons-icon-{{ settings.buttons_icon_align }}"> <# _.each(settings.buttons, function(button) { #> <# var anim = (settings.content_appearance[index]) ? settings.content_appearance[index] : 'imghvr-anim-none'; var target = button.link.is_external ? ' target="_blank"' : ''; var nofollow = button.link.nofollow ? ' rel="nofollow"' : ''; #> <div class="imghvr-button-wrapper {{ anim }} {{ delays[delay] }}"> <a href="{{ button.link.url }}"{{ target }}{{ nofollow }} class="imghvr-button"> <# if (button.selected_icon && button.selected_icon.value) { var iconHTML = elementor.helpers.renderIcon( view, button.selected_icon, { 'aria-hidden': true }, 'i', 'object'); #> {{{ iconHTML.value }}} <# } #> {{ button.text }} </a> </div> <# if (anim !== 'imghvr-anim-content') { delay++; } #> <# index++; #> <# }); #> </div> <# } #> </div> <img src="{{{ image_url }}}" alt="" class="{{ classes['image'] }}"> </div> </div> <# } #> <?php } } Plugin::instance()->widgets_manager->register_widget_type(new Emage_Hover());