Open post within Foundation 3 Reveal

I’m not sure if you’re still working on this problem, and I’m using F4 so may not be exactly the same problem, but I combined Reveal with WP’s inbuilt AJAX to retrieve content. I’ll add the relevant sections of code below:

Here’s the plugin code below:

      public function __construct() {

        self::$dir    = plugin_dir_path( __FILE__ );
        self::$url    = plugin_dir_url( __FILE__ );       
        add_action( 'wp_enqueue_scripts', array($this, 'include_scripts' ));
        add_action( 'wp_ajax_load-content', array($this, 'load_ajax_content' ));
        add_action( 'wp_ajax_nopriv_load-content', array($this, 'load_ajax_content' ));
    }


       public function include_scripts() {

            if ( is_page('sketchbook-pages' ) ) {

                // embed the javascript file to make the AJAX request
                wp_enqueue_script( 'reveal', get_template_directory() . '/js/foundation/foundation.reveal.js', array( 'jquery', 'reverie-js' ), '', true );
                wp_enqueue_script( 'my-ajax-request', self::$url . 'js/sketchbook_ajax.js', array( 'jquery' ) );
                wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

            }
        }


        /**
         * Function to call the content loaded for logged-in and anonymous users
        */
        public function load_ajax_content ( $post_id ) {

            $post_id = $_POST[ 'post_id' ];

            if (has_post_thumbnail($post_id)) {
                $sketch_id = get_post_thumbnail_id($post_id);  
                $attachment = get_post( $sketch_id );
                $caption = $attachment->post_excerpt;
                $response="<figure>". get_the_post_thumbnail($post_id, 'large-sketch') .'<figcaption><p>'. $caption .'</p></figcaption></figure>' . $this->paging_link_nav( $post_id );
                echo $response;
            }

            die(1);
         }






(function($) {
$.fn.displayPost = function() {
     $(this).click(function(event){
        event.preventDefault();
        //event.stopPropagation;

        var post_id = $(this).data("id");
        var id = "#" + post_id;

        // Check if the reveal modal for the specific post id doesn't already exist by checking for it's length
        if($(id).length == 0 ) {
            // We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future.
            var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body');
            var ajaxURL = MyAjax.ajaxurl;
             $.ajax({
                type: 'POST',
                url: ajaxURL,
                data: {"action": "load-content", post_id: post_id },
                success: function(response) {
                    modal.empty().html(response).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');

                    modal.bind('opened', function() {
                        // Trigger window resize to reset the left margin.  
                        $(window).trigger('resize');
                        var left;
                        left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
                        $(id).css({
                            left:left + $(window).scrollLeft()
                        });
                         $('.previous-sketch,.next-sketch').displayPost($(this));


                    return false;
                    });
                }
            });
        }
         //If the div with the ID already exists we'll just open it.
         else {
             $(id).foundation('reveal', 'open');
         }

         // Recalculate left margin on window resize
         $(window).resize(function(){
            var left;
            left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
            $(id).css({
                left:left + $(window).scrollLeft()
            });
         });
    });

}



})(jQuery);

And here’s sketchbook_ajax.js:

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

$('.reveal').displayPost($(this));
    // First retrieve the post id from the selectors data-id 
 });

I’ve gotten it to work, but paging the modal windows is still a little buggy.