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>
