Как получить почтовый идентификатор в Magnific Popup с помощью слайдера JQuery Flipbox - PullRequest
Новая
       32

Как получить почтовый идентификатор в Magnific Popup с помощью слайдера JQuery Flipbox

0 голосов
/ 02 июля 2019

Я пытаюсь создать ползунок после открытия всплывающего окна Magnific с помощью Ползунок Flipbox . Проблема, с которой я сталкиваюсь, заключается в том, что я получаю все элементы индекса на первой странице, и Flipbox должен прочитать каждый индекскак (сторона), но не работает.

Итак, как я могу получить каждое сообщение как сторону от всплывающего экземпляра Magnific?

Я высоко ценю вашу помощь. 

 jQuery(document).ready( function($) {

    var $button = $(".popup-modal-story");
    var $modal = $(".box");

    $button.on("click", function (event) {
        var index = $(this).index();
        var flipbox;

        $.magnificPopup.open({
            type: 'inline',
            preloader: false,
            midClick: true,
            removalDelay: 400,
            mainClass: 'mfp-fade',
            closeOnContentClick: false,
            closeOnBgClick: true,
            focus: '.image',
            gallery: {
                enabled: true,
                navigateByImgClick: false,
                preload: [0,1]
            },
            items: {
                src: $modal
            },
            callbacks: {
                open: function () {
                    flipbox = this.content.flipbox({
                        vertical: false,
                        width: $('.box').width(),
                        height: $('.box').height(),
                        index: index,
                        animationDuration: 400,
                        animationEasing: 'ease',
                        autoplay: true,
                        autoplayReverse: false,
                        autoplayWaitDuration: 3000,
                        autoplayPauseOnHover: false
                    });
                    console.log(flipbox);
                },
                afterClose: function () {
                    $('.box').flipbox('destroy');
                    console.log(flipbox);
                }
            }
        });

        event.preventDefault();
    });

});

Рассказ-шаблон 

<?php
    global $post;

    $args = array(
        'post_type' => 'stories',
        'post_status'    => 'publish'
    );

    $story_posts = new WP_Query( $args );

    if ( $story_posts->have_posts() ) {
        while ( $story_posts->have_posts() ) {
            $story_posts->the_post(); 
?>

<a class="popup-modal-story" href="#test-modal-3-<? the_ID(); ?>"> </a>

<div id="test-modal-3-<? the_ID(); ?>" data-id="<? the_ID(); ?>" class="box white-popup-block modal mfp-hide">

    //the post content

</div>

<?php 

    }

        } else {
            echo '<p>There are no stories yet</p>';
    }
wp_reset_postdata();

?>

function slider_scripts() {
        global $post;

    wp_enqueue_style('flipbox', get_stylesheet_directory_uri().'/css/jquery.flipbox.css', array());
    wp_enqueue_script('flipbox', get_stylesheet_directory_uri().'/custom-js/jquery.flipbox.js', array());
        wp_localize_script('flipbox', 'flipbox_script_vars', array(
                'postID' => $post->ID
            )
        );
}
add_action( 'wp_enqueue_scripts', 'slider_scripts' );

1 Ответ

0 голосов
/ 03 июля 2019

Вы пытаетесь безуспешно получить почтовый идентификатор, это проблема? Если это так, вы можете использовать стандартный объект post. Кроме того, вы, возможно, захотите немного изменить свои операторы echo, чтобы включить текст вместо отображения только идентификатора, может быть немного проще и проще в управлении. 

<?php
    global $post;

    $args = array(
        'post_type' => 'stories',
        'post_status'    => 'publish'
    );

    $story_posts = new WP_Query( $args );

    if ( $story_posts->have_posts() ) {
        while ( $story_posts->have_posts() ) {
            $story_posts->the_post(); 
?>

<a class="popup-modal-story" href="<?php echo '#test-modal-3-' . $post->ID; ?>"> </a>

<div id="<?php echo 'test-modal-3-' . $post->ID; ?>" data-id="<?php echo $post->ID; ?>" class="box white-popup-block modal mfp-hide">

    //the post content

</div>

<?php 

    }

        } else {
            echo '<p>There are no stories yet</p>';
    }
wp_reset_postdata();

?>
...