Сова Caorusel на JQuery модальный работает только при проверке - PullRequest
Новая
       7

Сова Caorusel на JQuery модальный работает только при проверке

0 голосов
/ 13 сентября 2018

Это WordPress сайт с каруселью сов на изображениях продуктов, но мы хотим создать всплывающий мод, который также показывает карусель. В тот момент, когда модальный режим открыт, изображения отображаются в виде строки шириной 100px и перемещением 100px, поэтому, если я жестко закодирую ширину css в той, которую хочу, то этот шаг все равно будет 100px. Ничего не кодируя, при проверке элемента, тогда изображение изменяется и отлично работает . Но просто открыв его без проверки, вы увидите маленькие встроенные изображения.

Я пытался добавить функцию owlCarousel, чтобы изменить параметры, но она не работает, она не распознает функцию. CSS находится в заголовке, а JS - в нижнем колонтитуле.

Есть идеи ??? Может, есть другой способ создания карусели на модале? Вот код: 

<div id="ex1" class="modal">
<?php
    if ( has_post_thumbnail() ) {
        $attachment_count = count( $product->get_gallery_attachment_ids() );
        $gallery          = $attachment_count > 0 ? '[product-gallery]' : '';
        $props            = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
        $image            = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
            'title'  => $props['title'],
            'alt'    => $props['alt'],
        ) );
        echo apply_filters(
            'woocommerce_single_product_image_html',
            sprintf(
                '
<div class="owl-carousel-slider" width="3440px"><span><img src="%s"></span>',
                esc_url( $props['url'] ),
                esc_attr( $props['caption'] ),
                $gallery,
                $image
            ),
            $post->ID
        );

    foreach ( $attachment_ids as $attachment_id ) {

        $classes = array( 'zoom' );

        if ( $loop === 0 || $loop % $columns === 0 ) {
            $classes[] = 'first';
        }

        if ( ( $loop + 1 ) % $columns === 0 ) {
            $classes[] = 'last';
        }

        $image_class = implode( ' ', $classes );
        $props       = wc_get_product_attachment_props( $attachment_id, $post );

        if ( ! $props['url'] ) {
            continue;
        }

        echo apply_filters(
            'woocommerce_single_product_image_thumbnail_html',
            sprintf(
                '<span><img src="%s"></span>',
                esc_url( $props['url'] ),
                esc_attr( $image_class ),
                esc_attr( $props['caption'] ),
                wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
            ),
            $attachment_id,
            $post->ID,
            esc_attr( $image_class )
        );

        $loop++;

    }
    echo '</div>';
}

     else {
        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
    }
?>
</div>
...