0

I'm trying to create a slider after Magnific popup is open with Flipbox slider, Problem I'm facing is that I get all the index elements in the first page, And Flipbox should read each index as a (side) but not working.

So, How can I get each post as a side from Magnific popup instance?

I'm highly appreciated your help.

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({
            items: {
                src: $modal
            },
            callbacks: {
                open: function () {
                    flipbox = this.content.flipbox({
                        vertical: false,
                        width: $('.box').width(),
                        height: $('.box').height(),
                        index: 0,
                        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();
    });

});

Story-template

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

?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.