如何使用 JQuery Flipbox Slider 在 Magnific Popup 中获取帖子 ID

Question

我正在尝试在使用Flipbox slider 打开 Magnific 弹出窗口后创建一个滑块，我面临的问题是我在第一页中获取了所有索引元素，并且 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' );

Answer 1

您是否尝试获取帖子 ID 失败，是这个问题吗？如果是这样，您可以使用标准的 post 对象。此外，您可能需要稍微调整回显语句以包含文本而不是仅回显 ID，这可能会更简单且更易于管理。

<?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();

?>