Issue #862💬 RespondidoAbierto el 12 de febrero de 2018por ancanotReacciones 0

Plugin Jquery Image Viewer en el bloque personalizado de GrapesJs

Respuesta rápidapor artf

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)

ancanot15 de febrero de 2018

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

  1. 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)
  2. 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
lock[bot]18 de septiembre de 2019

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.