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">×</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.