Support » Plugin: Elementor Page Builder » How can I active a js plugin in custom elementor widget

  • Shahadat Shuvo

    (@shuvombm02)


    I make a masonry image gallery widget for Elementor. When I view the gallery then it works fine. But when I go to frontend edit mood then it does not work. I think it’s a javascript problem. Maybe Elementor js hooks can solve this problem. But I can not use Elementor js hooks. Can anyone please help me? This is my code:

    
    class Elementor_masonryGallery_Widget extends \Elementor\Widget_Base {
    
    	
    	public function get_name() {
    		return 'masonryGallery';
    	}
    
    	public function get_title() {
    		return __( 'Masonry Gallery', 'wt-pnw-ex' );
    	}
    
    	public function get_icon() {
    		return 'fa fa-code';
    	}
    
    	
    	public function get_categories() {
    		return [ 'pnw' ];
    	}
    
    	
    	protected function _register_controls() {
    
    		$this->start_controls_section(
    			'content_section',
    			[
    				'label' => __( 'Content', 'wt-pnw-ex' ),
    				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
    			]
    		);
    
    		$this->add_control(
    			'gallery',
    			[
    				'label' => __( 'Add Images', 'wt-pnw-ex' ),
    				'type' => \Elementor\Controls_Manager::GALLERY,
    				'default' => [],
    			]
    		);
    
    		$this->end_controls_section();
    
    	}
    
    	
    	protected function render() {
    
    		$settings = $this->get_settings_for_display();
    
            echo'
                <script>
                    jQuery(document).ready(function(){
    
                        jQuery(".pnw-masonry-gallery").masonry({
                            itemSelector: ".pnw-masonry-gallery-item",
                            percentPosition: true,
                            columnWidth: ".col-lg-4"
                        })
                    
                    });
    
                </script>
                <div id="" class="pnw-masonry-gallery">
                        <div class="container">
                            <div class="row">';
                                foreach ( $settings['gallery'] as $image ) {
                                echo'
                                    <div class="col-lg-4 pnw-masonry-gallery-item">
                                        <img src="'.wp_get_attachment_image_url($image['id'], 'large').'" alt="">
                                    </div>';
                                }
                    echo'
                        </div>
                    </div>
                </div>';
    		
    
    	}
    
    }
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.