wp_reveal_ajax.js

(function($) {
  // Create custom plugin to handle AJAX queries and to build containers
  $.fn.displayPost = function() {
     $(this).click(function(event){
        event.preventDefault();
        
        // grabs the id for the target post
        var post_id = $(this).data("id");
        // We'll define the div id for the container here
        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');
                   
                   // Triggered when the modal window is opened, we'll resize the margins to center the div properly and to also add our function for paging nav links
                    modal.bind('opened', function() {
                        // Trigger window resize to reset the left margin and to center div. We set the width to auto for the reveal-modal
                        $(window).trigger('resize');
                        var left;
                        left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
                        $(id).css({
                            left:left + $(window).scrollLeft()
                        });
                         // For secondary links in the modal window we'll go ahead and just iterate through the function
                         $('.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);






jQuery(document).ready(function($) {
  // Attach the function defined above to the .reveal link
  $('.reveal').displayPost($(this));
});