How can I active a js plugin in custom elementor widget

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>';
		

	}

}

• This topic was modified 6 years ago by Shahadat Shuvo.
• This topic was modified 6 years ago by Shahadat Shuvo.