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)
You have to load JQuery first. Read more about it here https://github.com/artf/grapesjs/wiki/Components-&-JS#dependencies
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
- I can not handle double click event for open modal and changing image (in double click event working ImageViewer click event)
- 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
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.
Issue #880
Custom block with outside plugin in Grapesjs
I want to integrate Image viewer jquery plugin in grapesjs new custom block. I have loaded jQuery first. ImageViewer Plugin url - https://w...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #1294
How to add category for default block manager?
@artf I want put all default blocks to category named "Basic". But I can't find any documents about it. I use editor.BlockManager.getAll()....
Issue #1831
[Question] How to run command for a block component?
I'd like to do something like this. so once a user drops the test component into the canvas, I'd like to open up asset manager modal where...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.