Issue #862Opened February 12, 2018by ancanot0 reactions

Jquery Image Viewer plugin in GrapesJs custom Block

Question

I want to integrate Image viewer jquery plugin in grapesjs new custom block but jquery code doesn't recognize. How can write jquery code in component?

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 (3)

ancanotFebruary 15, 20180 reactions

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 (code see above, in script function) after refreshing page doesn't work again and viewer not created. Thank you
lock[bot]September 18, 20190 reactions

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.