Replace your ajax code with this code. I didn’t check it but i think it should we working.
The whole html part is convert into string so that it will send via ajax response.
<?php
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()) :
$ajax_response="";
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);
if (($the_query->current_post) % 2 == 0) :
$ajax_response .= '<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>'.$year.'</div>
</div>
</div>
<div class="grid-full transition resume left-arrow">
<div class="resume-head right-head-arrow">
<h3>'.the_title().'</h3>
<div class="resume-icon"><i class="fa '.$icon.'"></i></div>
</div>';
$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) :
$ajax_response .= '<div class="clear"></div>
<div class="resume-slider">
<ul class="slides">';
$featured_image = get_the_post_thumbnail($post->ID, array(560, 324, 'class' => ' respimg'));
$ajax_response .= '<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) {
$ajax_response .= '<li><img src="' . $image['full'] . '" class="respimg" width="560" height="324"></li>';
}
}
}
$ajax_response .= '</ul>
</div>';
else :
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail');
$ajax_response .= '<a class="image-popup" href="'.$image[0].'" title="">
<span></span>'
.get_the_post_thumbnail($post->ID, array(560, 325, 'class' => ' respimg')).
'</a>';
endif;
$ajax_response .=the_content().
'</div>
</div>
</div>';
else:
$ajax_response .= '<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>'.$year.'</div>
</div>
</div>
<div class="grid-full transition resume left-arrow">
<div class="resume-head left-head-arrow">
<h3>'.the_title().'</h3>
<div class="resume-icon"><i class="fa '.$icon.'"></i></div>
</div>';
$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) :
$ajax_response .= '<div class="clear"></div>
<div class="resume-slider">
<ul class="slides">';
$featured_image = get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg'));
$ajax_response .= '<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) {
$ajax_response .= '<li><img src="' . $image['full'] . '" class="respimg" width="541" height="313"></li>';
}
}
}
$ajax_response .= '</ul>
</div>';
else :
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail');
$ajax_response .= '<a class="image-popup" href="'.$image[0].'" title="">
<span></span>'.
get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg')).'
</a>';
endif;
$ajax_response .= the_content().
'</div>
</div>
</div>';
endif;
endwhile;
wp_reset_query();
echo $ajax_response;
die();
else :
echo json_encode(array("msg" => "No more results to load"));
die();
endif;
} else {
echo json_encode(array("msg" => "An error was occured"));
die();
}