El complemento jQuery Cycle no funciona dentro de la caja modal (complemento modal simple)

2 minutos de lectura

avatar de usuario
danny cooper

Estoy desarrollando un tema de WordPress que abre nuevas publicaciones en cuadros modales en lugar de páginas separadas.

El complemento de presentación de imágenes que estoy usando para mostrar imágenes para cada publicación (Complemento de ciclo de jQuery) funciona muy bien cuando la publicación está en su propia página, pero cuando se usa el Modales simples complemento, las imágenes se muestran en una lista en lugar de una presentación de diapositivas, rompiendo completamente mi diseño.

Así es como se ve una publicación por sí sola (haga clic en las imágenes para avanzar en la presentación de diapositivas): http://cl.ly/240c3C0i1m1o

Puede hacer clic en la primera miniatura de esta página para ver cómo funciona el modal (todavía no he codificado en URL únicas para los modales): http://cl.ly/3A2J1V2q1T0P

Supongo que el complemento jQuery Cycle no funciona en el cuadro modal porque se aplica a la página antes de que se cargue el contenido modal al hacer clic en un enlace. Realmente no lo sé.

Cualquier ayuda sería muy apreciada. Usé esta respuesta para ayudarme a implementar el cuadro modal: Usando simplemodal con wordpress. He incluido un código relevante de mi tema a continuación.

Esto está en mi archivo header.php:

<?php
        wp_enqueue_script('jquery.cycle.all.min.js', '/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.cycle.all.min.js', array('jquery'));
        wp_enqueue_script('product-slideshow', '/wp-content/themes/Goaty%20Tapes%20Theme/js/product-slideshow.js');
?>

Esto es lo que está contenido en product-slideshow.js (inicia la configuración del complemento de ciclo):

$(document).ready(function() { $('.product-images').cycle({ 
    fx:      'none', 
    next:   '.slide',
    timeout:  0
}); });

tengo esto en functions.php para que el modal funcione:

function my_print_scripts() {
        if (!is_admin()) {
            $url = get_bloginfo('template_url');
            wp_enqueue_script('jquery-simplemodal', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
            wp_enqueue_script('my_js', 'http://66.147.244.226/~goatytap/wp-content/themes/Goaty%20Tapes%20Theme/js/site.js', null, '1.0', true);
        }
    }
    add_action('wp_print_scripts', 'my_print_scripts');

esto esta en mi site.js expediente:

jQuery(function ($) {
    $('a.popup').click(function(){
        id = this.rel;
        $.get('http://66.147.244.226/~goatytap/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#FFF'}, 
                containerCss:{backgroundColor:'#fff'}
            });
        });
        return false;
    });
});

avatar de usuario
anpsmn

Está inicializando el ciclo en documento listo. Debe inicializar en el programa modal.

Compruebe su documentación

onShow [Function:null]
The callback function used after the modal dialog has opened

Algo como esto

data.modal({
            overlayCss:{backgroundColor:'#FFF'}, 
            containerCss:{backgroundColor:'#fff'},
            onShow: function (dialog) {
               $('.product-images').cycle({ 
                   fx:      'none', 
                   next:   '.slide',
                   timeout:  0
               }); 

            }
        });

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad