Issue #880💬 AnsweredOpened February 16, 2018by ancanot0 reactions

Custom block with outside plugin in Grapesjs

快速解答by artf

I can not handle double click event for open modal and changing image (in double click event working ImageViewer click event) This depends on what the plugin does with the DOM. The double-click event is binded to you images but if images are somehow modified/replaced that binding might be broken. It that case I'd sugg...

Read full answer below ↓

Question

I want to integrate Image viewer jquery plugin in grapesjs new custom block. I have loaded jQuery first. ImageViewer Plugin url - https://www.jqueryscript.net/gallery/jQuery-Plugin-For-Product-Viewer-with-Image-Hover-Zoom-BZoom.html The problem is that, when I create component, plugin connected (I give plugin js in init() function - canvas - scripts), but

  1. I can not handle double click event for open modal and changing image (in double click event working ImageViewer click event)
  2. script which is used ImageViewer plugin (in script function) after refreshing page doesn't work again and viewer not created. Thank you
editor.BlockManager.add('image-viewer', {
    category:'Media',
    label: 'Image viewer',
    attributes: {class: 'fa fa-th-large'},
    content: {
        script: function () {
            $("#bzoom").zoom({
                zoom_area_width: 300,
                autoplay_interval :3000,
                small_thumbs : 4,
                autoplay : false
            });
        },
        content: `<div class="bzoom_wrap">
                        <ul id="bzoom">
                            <li>
                                <img class="bzoom_thumb_image" src="https://unsplash.it/375/500?image=201" title="first img" />
                                <img class="bzoom_big_image" src="https://unsplash.it/750/1000?image=201"/>
                            </li>
                            <li>
                                <img class="bzoom_thumb_image" src="https://unsplash.it/375/500?image=203"/>
                                <img class="bzoom_big_image" src="https://unsplash.it/750/1000?image=203"/>
                            </li>
                            <li>
                                <img class="bzoom_thumb_image" src="https://unsplash.it/375/500?image=212"/>
                                <img class="bzoom_big_image" src="https://unsplash.it/750/1000?image=212"/>
                            </li>
                            <li>
                                <img class="bzoom_thumb_image" src="https://unsplash.it/375/500?image=220"/>
                                <img class="bzoom_big_image" src="https://unsplash.it/750/1000?image=220"/>
                            </li>
                            <li>
                                <img class="bzoom_thumb_image" src="https://unsplash.it/375/500?image=223"/>
                                <img class="bzoom_big_image" src="https://unsplash.it/750/1000?image=223"/>
                            </li>		
                        </ul>
                    </div>`
    }
});

Answers (2)

artfFebruary 27, 2018
  1. I can not handle double click event for open modal and changing image (in double click event working ImageViewer click event)

This depends on what the plugin does with the DOM. The double-click event is binded to you images but if images are somehow modified/replaced that binding might be broken. It that case I'd suggest reimplementing the double-click logic on you parent <div class="bzoom_wrap"> element with a new custom component

  1. script which is used ImageViewer plugin (in script function) after refreshing page doesn't work again and viewer not created.

I think this one is related to #873

lock[bot]September 18, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.