Quantcast
Channel: WordPress › Support » Forum: Hacks - Recent Topics
Viewing all articles
Browse latest Browse all 8245

tnoguchi on "Get Previous/Next Post ID for Posts in Same Category for AJAX Modal Popup"

$
0
0

I want to dynamically retrieve the post thumbnail in a modal pop-up using custom prev/next navigation. I need to retrieve the next and previous Post ID based on whatever Post is currently showing.

Even though I supply the current post ID, my function produces the following error:

Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'Custom_Work_Portfolio' does not have a method 'adjacent_post_where' in /Users/tak/Sites/lauraterry/wp-includes/plugin.php on line 173
Warning: call_user_func_array() expects parameter 1 to be a valid callback, class 'Custom_Work_Portfolio' does not have a method 'adjacent_post_sort' in /Users/tak/Sites/lauraterry/wp-includes/plugin.php on line 173

Any insights or suggestions would be greatly appreciated, thank you!

// Uses get_previous_post to retrieve post ID see:
       //http://stackoverflow.com/questions/6324421/getting-next-previous-post-id-using-current-post-id-in-wordpress
           /**
         * Function to call the content loaded for logged-in and anonymous users
        */
        public function load_ajax_content ( $post_id ) {
            $post_id = $_POST[ 'post_id' ];

            global $post;
            $post = get_post($post_id);
            $next_post = get_next_post(true, '1');
            $prev_post = get_previous_post(true, '1');

            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><nav><ul><li class="prev"><a href="#" class="button radius previous-sketch secondary" data-id="'. $next_post->ID .'">Previous</a></li>
            <li class="next"><a href="#" class="button radius next-sketch secondary" data-id="'.  $prev_post->ID  .'">Next</a></li></ul></nav>';
                echo $response;
            }

            die(1);
         }

public function __construct() {
        add_action( 'wp_ajax_load-content', array($this, 'load_ajax_content' ));
        add_action( 'wp_ajax_nopriv_load-content', array($this, 'load_ajax_content' ));
    }

sketchbook_ajax.js

(function($) {

$.fn.displayPost = function() {

    event.preventDefault();

    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() {
                    // Reset visibility to hidden and set display: none on closed reveal-modal divs, for some reason not working by default when reveal close is triggered on .secondary links
                    $(".reveal-modal:not('.reveal-modal.open')").css({'visibility': 'hidden', 'display' : 'none'})
                    // Trigger resize
                    $(window).trigger('resize');
                return false;
                });
            }
        });
    }
     //If the div with the ID already exists just open it.
     else {
         $(id).foundation('reveal', 'open');
     }

     // Recalculate left margin on window resize to allow for absolute centering of variable width elements
     $(window).resize(function(){
         var left;
            left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2;
            $(id).css({
                left:left + $(window).scrollLeft()
            });
     });
}

})(jQuery);

// Apply the function when we click on the .reveal link
   jQuery(document).on("click", ".reveal,.secondary", function() {
jQuery(this).displayPost();

});

// Open new modals on secondary paging links in open modal window
jQuery(document).on("click", ".secondary", function() {
    var id = jQuery(this).closest("div").attr("id");
       jQuery(id).foundation('reveal', 'close');
});

Template excerpt

<ul id="sketchbook-container" class="large-block-grid-4">
            <?php 

            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $args = array(
              'category_name' => 'sketchbook-2',
              'orderby' => 'date',
              'order' =>  'ASC',
              'posts_per_page' => 8,
              'paged'=> $paged
              );

              $loop = new WP_Query($args);
              while($loop->have_posts()) : $loop->the_post(); ?>

              <?php 

                if( has_post_thumbnail() ) :
                  $sketch = get_post_thumbnail_id($post->ID);
                  $large_image = get_attachment_link( $sketch );
                   ?>

                  <li class="sketch-leaf">
                    <figure class="sketch-thumb">

                      <a href="<?php echo $large_image; ?>" data-id="<?php the_ID(); ?>"  class="reveal" >
                      <?php echo get_the_post_thumbnail($post->ID, 'medium-sketch'); ?>
                      </a>
                      <figcaption>

                      </figcaption>

                      </figure>

                  </li>
                <?php endif; ?>

            <?php endwhile; ?>

          </ul>

Viewing all articles
Browse latest Browse all 8245

Trending Articles