Develop Reference

Gallery slider dont show in modal

using ACF PRO to created a field with a gallery, which should be displayed with other dynamic content in the modal when clicking on the post, the text content is displayed but the gallery not show, or show from the first post in cycle
The code that displays the loop on the page
//post query
$query = new WP_Query( $query_args );
ob_start();
// Wrap with a div when infinity load
echo ( $pagination_type == 'load_more' ) ? '<div class="postgrid-wrapper">' : '';
// Start posts query
if( $query->have_posts() ): ?>
<div class="<?php echo esc_attr( "post_grid col-3 layout_{$args['layout']} {$args['animation']} " ); ?>">
<?php while( $query->have_posts()): $query->the_post(); ?>
<?php if($args['layout'] == "1"){ ?>
<div class="grid_col" >
<div data-id="<?php the_ID(); ?>" class="single_grid view-post"><div class="more-button"><p>show more</p></div>
<div class="thumb">
<?php the_post_thumbnail('full'); ?>
</div>
<div class="cont">
<h2 class="title"><?php echo get_the_title(); ?></h2></a>
<div class="subtitle"><?php the_field('subtitle'); ?></div>
</div>
</div>
</div>
<?php } else if( $args['layout'] == 2 ){ ?>
<?php } ?>
<?php endwhile; ?>
</div>
Modal using ajax to show dynamic content (functions.php)
function load_post_by_ajax_callback() {
check_ajax_referer('view_post', 'security');
$args = array(
'post_type' => 'post',
'p' => $_POST['id'],
);
$portfolios = new WP_Query( $args );
$arr_response = array();
if ($myposts->have_posts()) {
while($myposts->have_posts()) {
$myposts->the_post();
//
$arr_response = array(
'title' => get_field('acf-field-title'),
'subtitle' => get_field('acf-field-subtitle'),
'content' => get_field('acf-field-content'),
'autor' => get_field('acf-field-autor'),
'thumb' => get_the_post_thumbnail(),
'slider' => get_field('gallery'),
);
}
wp_reset_postdata();
}
echo json_encode($arr_response);
wp_die();
}
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');
Script parsing content from the post and show content in modal with the assigned id from acf field
jQuery(function($) {
$('body').on('click', '.view-post', function() {
var data = {
'action': 'load_post_by_ajax',
'id': $(this).data('id'),
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
response = JSON.parse(response);
$('#postModal .modal-body #postModalTilte').text(response.title);
$('#postModal .modal-body #postModalSubtitle').html(response.subtitle);
$('#postModal .modal-body #postModalContent').html(response.content);
$('#postModal .modal-body #postModalAutor').html(response.autor);
$('#postModal .modal-body #postModalSlider').html(response.slider);
var postModal = new bootstrap.Modal(document.getElementById('postModal'));
postModal.show();
});
});
Bootstrap modal code
<div class="modal" id="postModal">
<div class="modal-dialog modal-dialog-centered" style="max-width:70%">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float:right;border:none;"></button>
<div class="row">
<div class="col-left">
<div class="grid-gallery" id="postModalSlider"></div>
</div>
<div class="col-right">
<h5 class="portfolio-title" id="postModalTitle">Title: </h5>
<p class="portfolio-customer" id="postModalSubtitle">Subtitle: </p>
<p class="portfolio-review" id="postModalContent">Content</p>
<p class="portfolio-price" id="postModalAutor">Autor: </p>
</div>
</div>
</div>
</div>
</div>
</div>
I tried to paste in modal, the example gallery from the ACF documentation, in this case they are shown only from the very first post and the necessary not show.
I understand that the script cannot parse the necessary gallery data from the post, but I don't know how to fix it

Change change background image by clicking a div

I have an accordion style div with 3 boxes. When clicking it is opening and closing the content into view. I have an absolute positioned div with a background image behind that I need changed on each click. When I first load the page I am able to get it to work as you click each element. However, once you click any of those div boxes again it sticks to the same background image and won't cycle through. I have tried using .next(), .closest() but not working.
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section class="section__wrapper" id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>

Updated code with answer
<?php
$args = array(
'post_type' => 'services',
's' => '-demand' // will exclude all post with the title name "Demand" present
);
$services = new WP_Query($args);
;?>
<?php if($services->have_posts()) : ?>
<section id="services__set">
<div class="services__accordion" id="class-accordions">
<div class="services__container">
<?php $i = 1;
while($services->have_posts()): $services->the_post();
global $post;
$post_slug = $post->post_name; ?>
<div class="services__col" id="<?php echo $post_slug;?>">
<span class="h2 services__title"><?php the_title();?></span>
<div class="services__content">
<?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
<div class="services__btn">
<a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
</div>
</div>
</div>
<div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
<?php $i++; endwhile;wp_reset_postdata();?>
</div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
function() { //When you click on a button...
var isActive = $(this).hasClass('active-reveal');
if( isActive ){ //If it already has an active class...
$(this).removeClass('active-reveal'); //...it loses the active class....
}
else{ //If it does NOT already have an active class...
$('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
$(this).addClass('active-reveal'); //...except this one.
}
if ($('.services__col').attr("class") == "active-reveal") {
$(this).next('.services_bg').removeClass('active');
} else {
$('.services_bg').removeClass('active');
$(this).next('.services_bg').addClass('active');
}
});
});
</script>
<?php endif;?>

Reload div in jss, jquery

I have a problem that when I use the loop to loop the elements in the session array it still runs normally, I try to use the code to reload only the shopping cart item, it reloads the cart, but it doesn't run. The PHP loop and my shopping cart are empty, what should I do?
<span id="soluonghang" class="badge badge-primary" style="background: #da251c;">
<?php echo $soluongsanpham; ?>
</span>
<div class="popup" id="giocart">
<div class="row header">
<span>Items</span>
<span>Amount</span>
</div>
<?php
if (isset($_SESSION['cart'])) {
foreach ($_SESSION['cart'] as $key => $value) {
?>
<div class="row items" id="itcart">
<span><?php echo $value['name']; ?></span>
<span><?php echo $a = ($value['dongia'] * $value['num']) - ($value['giam'] / 100 * ($value['dongia'] * $value['num'])) ?>đ</span>
</div>
<?php
}
} else {
}
?>
<div class="row checkout">
<span>Đi đến giỏ hàng ></span>
<span class="checkout-button" onclick="refesf()">Refesh giỏ hàng</span>
</div>
</div>
</span>

Using infinite scroll plugin on wordpress without "next navigation" functions

I've developed this page. There is many offers to load on main page, so i'm trying to make a "infinite scroll" function. To develop the page, i first made it on a bootstrap template, and after i turned into a page model template, on my real estate theme.
The problem is: All the "infinite scroll plugins" i've downloaded request 4 fields: Navigation selector, Next selector, Item selector and Content selector, as you can see here. The problem is that i only can provide two of this four fields: Item selector #seletor and content selector (.portfolio.items2). Here is the code that loops all the info:
<div id="seletor">
<div class="portfolio-items2">
<?php $newsArgs =
array(
'post_type' => 'property',
'posts_per_page' => 200,
"orderby" => 'meta_value_num',
"meta_key" => 'numerooff',
"order" => 'DESC',
'tax_query' => array(
array(
'taxonomy' => 'property-status',
'field' => 'slug',
'terms' => 'oneoff')));
$newsLoop = new WP_Query( $newsArgs );
while ( $newsLoop->have_posts() ) : $newsLoop->the_post(); ?>
<div class="col-md-4 shortcode-col listing_wrapper <?php meta('seletoroff');?>" >
<div class="property_listing" data-link="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<div class="listing-unit-img-wrapper">
<div class="property_media"></div>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<img width="525" height="350" src="<?php meta('imagemoff');?>" class="lazyload img-responsive wp-post-image" alt="" sizes="(max-width: 525px) 100vw, 525px" />
</a>
<div class="tag-wrapper">
<div class="featured_div"><?php meta('porcentooff');?></div>
</div>
</div>
<h4>
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>">
<?php meta('titulooff');?>
</a>
</h4>
<div class="property_location_image">
<a href="http://www.onecia.com.br/imoveis-de-luxo/<?php /* Property ID if exists */ $property_id = get_post_meta($post->ID, 'REAL_HOMES_property_id', true); if(!empty($property_id)){ echo ''.$property_id; }?>" rel="tag">
<span style="font-size: 15px;"><?php meta('bairrooff');?></span>
</a>
</div>
<br>
<div class="property_listing_details">
<?php $post_meta_data = get_post_custom($post->ID);
if( !empty($post_meta_data['REAL_HOMES_property_size'][0]) ) {
$prop_size = $post_meta_data['REAL_HOMES_property_size'][0];
echo '<div class="inforoom">'. $prop_size .'m² <div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-size.png" style="max-width: 14%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bedrooms'][0]) ) {
$prop_bedrooms = floatval($post_meta_data['REAL_HOMES_property_bedrooms'][0]);
$bedrooms_label = ($prop_bedrooms > 1)? __('Bedrooms','framework' ): __('Bedroom','framework');
echo '<div class="infobath">'. $prop_bedrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bed.png" style="max-width: 17%; height: auto;"></div></div>';
}
if( !empty($post_meta_data['REAL_HOMES_property_bathrooms'][0]) ) {
$prop_bathrooms = floatval($post_meta_data['REAL_HOMES_property_bathrooms'][0]);
$bathrooms_label = ($prop_bathrooms > 1)?__('Bathrooms','framework' ): __('Bathroom','framework');
echo '<div class="infosize">'. $prop_bathrooms .'<div class="info_labels"><img src="http://www.onecia.com.br/wp-content/themes/site2016/images/icon-bath.png" style="max-width: 17%; height: auto;">
</div></div>';
} ?>
</div>
<div class="listing_unit_price_wrapper">
<span class="price_label price_label_before" style="text-decoration: line-through;">De: R$ <?php meta('valordeoff');?></span><br>
<span style="text-decoration: underline; font-size: 22px; font-weight: bold;">Por: R$ <?php meta('valoroff');?> </span>
<span class="price_label"></span>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
I can limit how many pages appear with posts_per_page, but i don't have any pagination configured (example: Navigation through pages, next page, older page...)
So, i see two ways to solve it, but in both i need your guide.
First: There is a way to solve it without navigation functions configured.
Second: The only way to solve it is to configure the navigation on my page wordpress template.
I'm really stuck here. Waiting for your help, thanks!

Jquery infinity scroll loops over and over using Mysql/PHP

I'm trying to implement Jquery infinity scroll found at (http://infiniteajaxscroll.com/) together with my MYSQL and PHP. And it works, sort of.
I found similar example here but my was quite different anyway (http://www.w3bees.com/2013/09/jquery-infinite-scroll-with-php-mysql.html)
The loading more works fine however my results are being looped over and over again.
I mean i display all the results in the first page and when i scroll down at the bottom and infinity scroll fires up then same results are being showed instead of splitting those first results in different pages.
Here is my code, quite long :)
<?php
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT 20";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute();
//Count the shouboxes
$number_of_shoutbox = $statement->rowCount();
$number_of_posts_per_page = '10';
$total_pages = $number_of_shoutbox / $number_of_posts_per_page;
?>
<div class="background_spacing"></div> <!-- end of background spacing -->
<div id="header_background">
<div class="shoutbox-background text-center">
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete">
<div class="shoutbox_left">
<img src="images/girl-shoutbox.jpg">
</div>
<div class="shoutbox_right background-white">
<div class="no-padding padding10">
<span class="font24 font-color-000000">NAPISI SVOJ</span>
<span class="font24 username_male">SHOUTBOX</span>
<textarea class="shoutbox-form no-padding" placeholder="Ostavite i vi jedan shoutbox..."></textarea>
<input type="submit" class="button_standard_pink float-right">
</div>
</div>
</div>
<!-- SHOUTBOX COMPLETE STARTS -->
</div> <!-- end of id="shoutbox -->
</div>
</div> <!-- END OF HEADER_BACKGROUND -->
<div class="margin30"></div><!-- Spacing -->
<div class="shoutbox-total">
<div id="shoutbox">
<div class="shoutbox-counter no-padding padding-10 background-shoutbox-counter">
<div class="font48 text-center"><?php count_shoutbox();?></div>
<div class="text-center">shoutbox has been shouted!</div>
<div class="text-center padding-10"><img src="images/default/default-shoutbox-shout.png"></div>
<div class="text-center font10">INVITE YOUR FRIENDS TO SHOUT!</div>
</div>
</div>
<?
//LOOP THROUGH THE SHOUBOXES
while($show_shoutbox = $statement->fetch(PDO::FETCH_BOTH)) {
?>
<div id="shoutbox">
<!-- SHOUTBOX COMPLETE STARTS -->
<div class="shoutbox_complete_display">
<div class="shoutbox_left">
<img src="images/man-shoutbox.jpg">
</div>
<div class="shoutbox_right-display background-box-light-gray">
<div class="no-padding padding-10">
<div class="font24 username_male" style="line-height:1;"><?php echo strtoupper($show_shoutbox['user_name']);?> <?php echo $show_shoutbox['user_age'];?> GODINE</div>
<span class="font-color-898a8b">IZ <?php echo strtoupper($show_shoutbox['country']);?> - TRAŽI <?php echo strtoupper($show_shoutbox['gender_search']);?> IZMEĐU <?php echo strtoupper($show_shoutbox['age_from']);?> I <?php echo strtoupper($show_shoutbox['age_to']);?> GODINA</span>
<div class="margin15"></div>
<div class="font20"><?php echo $show_shoutbox['text'];?></div>
<div style="margin-top:52px;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
<td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td><td><div class="font18 font-bold">32,222</div>
<span class="font-color-898a8b">ACHIVEMENTS</span>
</td>
</tr>
</table>
</div> <!-- end of margin-top:60 -->
</div> <!-- end of no-padding padding-10 -->
<!-- COMMENT START HERE -->
<?php
// d($detail);
$type='question';
// include('like.php');
include('includes/comment.php');
?>
<!-- COMMENT END HERE -->
</div> <!-- end of shoutbox_right-display -->
</div> <!-- end of shoutbox_complete -->
</div> <!-- end of id="shoutbox -->
<?php } // end of the shoubox loop
?>
</div>
<!--page navigation-->
<div id="nav">
<?php
for ($x = 2; $x <= $total_pages; $x++) {
?>
<a href='welcome.php?p=shoutbox&s=<?php echo $x;?>' <?php if($x=='2') { echo 'class="next"';}?>></a>
<?php } ?>
</div>
<script type="text/javascript" src="js/jquery.infinity.scroll.js"></script>
<script type="text/javascript">
var ias = $.ias({
container: ".shoutbox-total .shoutbox_complete_display",
item: "#shoutbox",
pagination: "#nav",
next: ".next"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 3}));
ias.extension(new IASNoneLeftExtension({text: 'There are no more pages left to load.'}));
========================================================================
UPDATE CODE BY STILL GIVING ERRORS NOW IN MYSQL:
Tried #Rob Schmuecker solution but now getting errors in mysql.
Here is my modified code with PDO and with Rob Schmuecker suggestion
// GET ALL THE SHOUTBOX
$sql = "SELECT
shoutbox.shoutbox_id,
shoutbox.text,
shoutbox.date,
shoutbox.time,
shoutbox.approved,
shoutbox.`new`,
shoutbox.user_id,
users.profile_image,
users.user_name,
users.user_age,
users.country,
users.gender_search,
users.age_from,
users.age_to
FROM shoutbox INNER JOIN users ON shoutbox.user_ID = users.id
WHERE users.profile_image = '2'
AND shoutbox.approved = '1'
AND shoutbox.new = '0'
AND shoutbox.user_id != :admin_id
AND (shoutbox.user_id NOT IN (SELECT user_id FROM users_blocked WHERE blocked_id = :user_id))
ORDER BY shoutbox.shoutbox_id DESC
LIMIT :limit_start :limit_row_amount";
//prepare the statement
$statement = $dbConn->prepare($sql);
//execute the statement
$statement->execute(array(
'admin_id' => $admin_id,
'user_id' => $user_id,
'limit_start' => $limit_start,
'limit_row_amount' =>$limit_row_amount
));

You need to implement the page into your SQL query.
Below we define two new variables, one which is the total amount you want to retrieve each time and the next is the amount of rows to skip in each limit query, starting from 0 if $page = 1
$page = (int) (!isset($_GET['s'])) ? 1 : $_GET['s'];
$limit_row_amount = 20;
if($page > 1){
$limit_start = $page * $limit_row_amount;
} else {
$limit_start = 0;
}
// GET ALL THE SHOUTBOX
$sql = "SELECT * FROM shoutbox
ORDER BY id DESC
LIMIT $limit_start, $limit_row_amount";