Plugin Jquery Image Viewer en el bloque personalizado de GrapesJs
Primero tienes que cargar JQuery. Lee más sobre ello aquí https://github.com/artf/grapesjs/wiki/Components-&-JS#dependencies
Lee la respuesta completa abajo ↓Pregunta
Quiero integrar el plugin jquery del visor de imágenes en el nuevo bloque personalizado de grapesj, pero el código jquery no lo reconoce. ¿Cómo puedo escribir código jquery en component?
editor. BlockManager.add('image-viewer', {
categoría:'Medios',
etiqueta: 'Visor de imágenes',
Atributos: {Clase: 'FA FA-th-Grande'},
Contenido: {
script: función () {
$("#bzoom").zoom({
zoom_area_width: 300,
autoplay_interval :3000,
small_thumbs : 4,
reproducción automática: falso
});
},
contenido: '<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>
}
});
Respuestas (3)
Primero tienes que cargar JQuery. Lee más sobre ello aquí https://github.com/artf/grapesjs/wiki/Components-&-JS#dependencies
Primero he cargado jQuery. URL del plugin ImageViewer - https://www.jqueryscript.net/gallery/jQuery-Plugin-For-Product-Viewer-with-Image-Hover-Zoom-BZoom.html El problema es que, cuando creo component, plugin connected (doy a plugin js en init() function - canvas - scripts), pero
- No puedo gestionar el evento de doble clic para abrir modal y cambiar la imagen (en el evento de doble clic funciona en el evento de clic en ImageViewer)
- script, que se utiliza en el plugin ImageViewer (código ver arriba, en la función de script) tras actualizar la página no vuelve a funcionar y el visor no se crea. Gracias
Este hilo se ha bloqueado automáticamente porque no ha habido actividad reciente desde que se cerró. Por favor, abre un nuevo problema para bugs relacionados.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #880
Bloque personalizado con plugin externo en Grapesjs
Quiero integrar el plugin jquery del visor de imágenes en el nuevo bloque personalizado de grapesj. Primero he cargado jQuery. URL del plug...
Issue #1451
[PREGUNTA] ¿Cómo usar el plugin personalizado jQuery?
Estoy intentando usar un plugin personalizado de jQuery para el bloque, pero el PLGIN no funciona porque está en el iframe, ya que no puedo...
Issue #1471
[Pregunta] Gestor de bloques e imagen
¡Hola! Uso este código para añadir un nuevo bloque: blockManager.add("image", { etiqueta: 'Image', categoría: 'Básico', atributos: { clase:...
Issue #1472
[PREGUNTAS] Bloque de código personalizado y JS
¿Me pregunto si existe alguna limitación o si realmente es posible crear un bloque que permita al usuario del editor escribir código JavaSc...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.