I have a custom post type named event and a button to load more timeline. I need to arange current timeline item to the left or right depending on his current_post from WP_query object. Ex:
if (current_post % 2 == 0) {
go to the left
} else {
go to the right
}
For the first 3 timeline items that are loaded on page load the position is correct, but when i make the AJAX call everytime the current_post is 0. Here is my query:
$args = array(
'post_type' => 'timeline',
'order' => 'ASC',
'posts_per_page' => (int)$data['posts_per_page'],
'offset' => (int)$data['offset'],
'suppress_filters' => true
);
$the_query = new WP_Query($args);
Is there something that I can change to get the correct position of the post?
UPDATE To be more clear i will put my entire code here. AJAX function:
$(".download-resume").on("click", function() {
var $this = $(this);
var posts_per_page = parseInt($this.data("show"));
var currentPage = parseInt($this.data("current"));
var offset = currentPage * posts_per_page;
var data = {
action : "timeline_load",
offset : offset,
posts_per_page : posts_per_page
};
var last_item = $('.resume-holder:last');
$.post(options.ajax_url, data, function(resp) {
if(resp.success == false) {
$this.text(resp.data.msg).removeAttr('href');
} else {
if(resp.data) {
$this.text(resp.data.msg).removeAttr('href');
} else {
// alert(resp);
last_item.after(resp);
$('.resume-slider').flexslider({
animation: "slide",
slideDirection: "horizontal",
slideshow: false,
slideshowSpeed: 3500,
animationDuration: 500,
directionNav: true,
controlNav: false,
});
$this.data("current", currentPage + 1);
$('html, body').animate({
scrollTop: $this.offset().top
}, 1200);
}
}
});
return false;
});
and this is my php function:
global $post;
$data = filter_var_array($_POST, FILTER_SANITIZE_SPECIAL_CHARS);
if ($data['action'] == "timeline_load") {
$post = null;
$args = array(
'post_type' => 'timeline',
'order' => 'ASC',
'posts_per_page' => (int)$data['posts_per_page'],
'offset' => (int)$data['offset'],
'suppress_filters' => true
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post();
$icon = get_post_meta($post->ID, 'timeline_icon', true);
$year = get_post_meta($post->ID, 'timeline_year', true);
// var_dump($the_query->current_post);
if (($the_query->current_post) % 2 == 0) : ?>
<div class="resume-holder">
<div class="resume-box animaper">
<div class="resume-circle-holder right-circle">
<div class="resume-circle">
<div class="resume-date right-date"><span></span><?php echo $year; ?></div>
</div>
</div>
<div class="grid-full transition resume left-arrow">
<div class="resume-head right-head-arrow">
<h3><?php the_title(); ?></h3>
<div class="resume-icon"><i class="fa <?php echo $icon; ?>"></i></div>
</div>
<?php
$featured_image = array();
$featured_image[] = get_the_post_thumbnail($post->ID);
if (class_exists('Dynamic_Featured_Image')) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images($post->ID);
if (!is_null($featured_images)) {
foreach ($featured_images as $image) {
$featured_image[] = $image['full'];
}
}
}
$count = count($featured_image);
if ($count > 1) :
?>
<div class="clear"></div>
<div class="resume-slider">
<ul class="slides">
<?php
$featured_image = get_the_post_thumbnail($post->ID, array(560, 324, 'class' => ' respimg'));
echo '<li>' . $featured_image . '</li>';
if (class_exists('Dynamic_Featured_Image')) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images($post->ID);
if (!is_null($featured_images)) {
foreach ($featured_images as $image) {
echo '<li><img src="' . $image['full'] . '" class="respimg" width="560" height="324"></li>';
}
}
}
?>
</ul>
</div>
<?php else : ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail'); ?>
<a class="image-popup" href="<?php echo $image[0]; ?>" title="">
<span></span>
<?php echo get_the_post_thumbnail($post->ID, array(560, 325, 'class' => ' respimg')); ?>
</a>
<?php endif; ?>
<?php the_content(); ?>
</div>
</div>
</div>
<?php else : ?>
<div class="resume-holder">
<div class="resume-box right right-box animaper">
<div class="resume-circle-holder left-circle">
<div class="resume-circle">
<div class="resume-date left-date"><span></span><?php echo $year; ?></div>
</div>
</div>
<div class="grid-full transition resume left-arrow">
<div class="resume-head left-head-arrow">
<h3><?php the_title(); ?></h3>
<div class="resume-icon"><i class="fa <?php echo $icon; ?>"></i></div>
</div>
<?php
$featured_image = array();
$featured_image[] = get_the_post_thumbnail($post->ID);
if (class_exists('Dynamic_Featured_Image')) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images($post->ID);
if (!is_null($featured_images)) {
foreach ($featured_images as $image) {
$featured_image[] = $image['full'];
}
}
}
$count = count($featured_image);
if ($count > 1) :
?>
<div class="clear"></div>
<div class="resume-slider">
<ul class="slides">
<?php
$featured_image = get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg'));
echo '<li>' . $featured_image . '</li>';
if (class_exists('Dynamic_Featured_Image')) {
global $dynamic_featured_image;
$featured_images = $dynamic_featured_image->get_featured_images($post->ID);
if (!is_null($featured_images)) {
foreach ($featured_images as $image) {
echo '<li><img src="' . $image['full'] . '" class="respimg" width="541" height="313"></li>';
}
}
}
?>
</ul>
</div>
<?php else : ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail'); ?>
<a class="image-popup" href="<?php echo $image[0]; ?>" title="">
<span></span>
<?php echo get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg')); ?>
</a>
<?php endif; ?>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endif;
endwhile;
wp_reset_query();
else :
wp_send_json_success(array("msg" => "No more results to load"));
endif;
} else {
wp_send_json_error(array("msg" => "An error was occured"));
}
die();
die()in the ajax code after it execute.