I'm trying to open a post within a reveal modal (F3). I solved initially by placing the reveal code within the loop of my custom post type. Thinks were good but I faced a couple of issues.

Since it's within the main loop, when page loads, it will load all the modals for each one of my custom post types, which is not very good from a performance standpoint. My code is basically: <a id="more" href="#myModal-<? the_ID(); ?>" data-reveal-id="<? the_ID(); ?>">Details</a> for the trigger and <div id="<? the_ID(); ?>" class="reveal-modal medium"> within the loop.

Also, I'm placing Foundation's Orbit for slideshows within that modal box. The issue is that it initiates on one of them only.

I know this is because the implementation is not good and Orbit slideshow can't be initialised so many times.

Does anyone have tried to implement this but instead having the modal code within the main loop, have it call the single template to show as it's content? Any other technique will be appreciated.

1 Answer 1


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;


(function($) {
$.fn.displayPost = function() {

        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;
                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.  
                        var left;
                        left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
                            left:left + $(window).scrollLeft()

                    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
            var left;
            left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
                left:left + $(window).scrollLeft()



And here's sketchbook_ajax.js:

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.