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

WprdPress Custom Post Type - how to display data on Popup or Sidebar

I have a custom post type called "team-member" which is in relationship (using ACF) with another custom post type called "speciality".
I have wrote the code to display team member on the page, team member name and speciality and all works perfect.
All the team members have also own description, so I would like to display the team member title, description and speciality within the Popup.
This is the code I have so far:
$relatedTeamMembers = new WP_Query(array(
'posts_per_page' => -1,
'post_type' => 'team-member',
'orderby' => 'title',
'order' => 'ASC',
'meta_query' => array(
array(
'key' => 'related_team_group',
'compare' => 'LIKE',
'value' => '130'
)
)
));
if ($relatedTeamMembers->have_posts()) {
echo '<div class="team-members wrapper wrapper--larger">';
echo '<h2>OUR DENTISTS</h2>';
echo '<div class="team-members__wrapper">';
while($relatedTeamMembers->have_posts()) {
$relatedTeamMembers->the_post(); ?>
<div class="team-member">
<a href="<?php the_permalink(); ?>" target="_blank">
<img class="team-member__image" src="<?php
if (has_post_thumbnail()) {
the_post_thumbnail_url('teamMemberPortrait');
} else {
echo get_theme_file_uri('img/placeholder.png');
} ?> ">
</a>
<div class="team-member__label-gold">
<div class="team-member__label-gold__name"><?php the_title(); ?></div>
<div class="white-underline-strip-h-thin"></div>
<div class="team-member__label-gold__speciality"><?php
$specialities = get_field('related_speciality');
foreach($specialities as $specialities);
echo $specialities->post_title; ?>
</div>
</div>
</div>
<?php }
echo '</div>';
echo '</div>';
}
wp_reset_postdata();
So looking at this pice <a href="<?php the_permalink(); ?>" target="_blank"> the target attribute behaves similarly, when the team member card is clicked it loads the data in the new window, I would like the same behaviour but instead the data need to be loaded within the popup.
My popup is done in JS and is using injectHTML() function as below:
injectHTML() {
document.body.insertAdjacentHTML('beforeend', `
<div>Team Member Details</div>
`)
}
But it I have no idea how to connect click event on the card member with the team member content.
I would be super grateful for a hint or correct way to achieve this type functionality?

bind() can pass event when call injectHTML(). Then in injectHTML(), the member info can pass.
As primary these can be use:
Add EventListener() with as, document.querySelector("a").addEventListener('click',injectHTML.bind(event));
Then, parse the required information by event.

Call function from WordPress function.php to page-home.php

I'm stuck at this. Please help. Basically, I'm trying to create a hover on image to reveal social icons effect. Clicking the social icon will take you to the relevant page of the social website in a new window. I got the hover to work except onclick is not opening at all.
My main social icon function is in functions.php as follows:
function tfd_social_buttons($content) {
global $post;
$permalink = get_permalink($post->ID);
$title = get_the_title();
if(!is_feed() && !is_home() && !is_page()) {
$content = $content . '<div class="tfd-social-buttons">
<h5>SHARE ON</h5>
<a class="icon-twitter" href="http://twitter.com/share?text='.$title.'& url='.$permalink.'"
onclick="window.open(this.href, \'twitter-share\', \'width=550,height=235\');return false;">
<span>Twitter</span>
</a>
<a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
onclick="window.open(this.href, \'facebook-share\',\'width=580,height=296\');return false;">
<span>Facebook</span>
</a>
<a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
onclick="window.open(this.href, \'google-plus-share\', \'width=490,height=530\');return false;">
<span>Google+</span>
</a>
</div>';
}
return $content;
}
add_filter('the_content', 'tfd_social_buttons');'
This is what I'm trying to implement on my page-home.php
<!-- Beginning of Featured Stories -->
<div id="freshly-pressed">
<?php
global $post;
$args = array( 'post_type' => 'post', 'posts_per_page' => -1 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<div class="press">
<figure class="cap-bot">
<?php the_post_thumbnail('large', array('class' => 'featured-thumb grayscale')); ?>
<figcaption>
<div class="tfd-social-buttons">
<a class="icon-twitter" href="http://twitter.com/share?text='.$title.'& url='.$permalink.'"
onclick="window.open(this.href, \'twitter-share\', \'width=550,height=235\');return false;">
<span>Twitter</span>
</a>
<a class="icon-fb" href="https://www.facebook.com/sharer/sharer.php?u='.$permalink.'"
onclick="window.open(this.href, \'facebook-share\',\'width=580,height=296\');return false;">
<span>Facebook</span>
</a>
<a class="icon-gplus" href="https://plus.google.com/share?url='.$permalink.'"
onclick="window.open(this.href, \'google-plus-share\', \'width=490,height=530\');return false;">
<span>Google+</span>
</a>
</div>
</figcaption>
</figure>
<div class="press-info">
<h1><?php the_title(); ?></h1>
<p><?php the_date(); ?></p><p><?php $content = get_the_content(); echo wp_trim_words( $content , '15' ); ?></p>
</div><!-- press-info -->
</div><!-- press -->
<?php endforeach; ?>
</div><!-- Freshly Pressed -->
<!-- End of Featured Stories -->
The hover effect and the icons are visible but onclick does not open a new window. Is there anyway I can call the function upon onclick from functions.php. Any help would be much appreciated thanks.

Wordpress usually stops some lines of code for security reasons, and the problem is that it doesn't inform you.
try using this plugin to insert code in post, when you install the plugin put you code between [script] and [/script]

Jquery Children

I am trying to create a nice gallery for an e-commerce. - all the current code is here
The front-end layout I got from here followed the tutorial and it worked like a charm.
Then to add the payment module I decided to add a floating div:
<?php foreach ($tes as $te): ?>
<div id="<?php echo $te['Product']['id'] ?>">
<div class="shop-actions">
<div class="list-group">
<span href="#" class="list-group-item active comprar-menu-button">
<?php echo __('<i class="fa fa-shopping-cart"></i> Carrito de Compras'); ?>
</span>
<span href="#" class="list-group-item comprar-menu">
<h3>Agregar al carrito</h3>
<?php echo $this->Form->create('Product', array('default' => false, 'inputDefaults' => array(
'div' => 'form-group',
'label' => false,
'wrapInput' => false,
'class' => 'form-control'))); ?>
<div class="row">
<div class="col-md-12">
<?php
echo $this->Form->input('cantidad', array(
'options' => array(
50 => "50gr",
100 => "100gr",
150 => "150gr",
200 => "200gr",
250 => "250gr",
500 => "500gr",
1000 => "1kg",
'mayoreo' => "mayoreo",
),
'empty' => '(Seleccionar)',
));
?>
</div>
<div class="col-md-12 mayoreo">
<div class="input-group">
<?php echo $this->Form->input('mayoreo', array('label' => '', 'type'=>'number')); ?>
<span class="input-group-addon">KG</span>
</div>
</div>
<div class="col-md-12 subtotal">
<div id="<?php echo $te['Product']['price']; ?>"><span>$0.00 MXN</span> </div>
</div>
<div class="col-md-12">
</br>
<?php echo $this->Form->submit('Agregar', array('div' => 'form-group','class' => 'btn btn-info col-md-12')); ?>
</div>
</div>
<?php echo $this->Form->end(); ?>
<hr />
<h4>Ademas en tu carrito</h4>
<ul>
<li>Lung Jing <span class="pull-right">200gr</span></li>
<li>Pu Erh <span class="pull-right">1kg</span></li>
<li>Lapsang Su shang <span class="pull-right">10kg</span></li>
</ul>
<span class="pull-right">Subtotal: $2,500.00 MXN</span>
</span>
</div>
</div>
[…]
</div>
<?php endforeach; ?>
<span class="loading"></span>
<span class="icon close-content"><i class="fa fa-times"></i></span>
Then I tried to add some jQuery to make the UX nice and smooth…
function formatCurrency(total) {
var neg = false;
if(total < 0) {
neg = true;
total = Math.abs(total);
}
return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
}
$('.comprar-menu-button').click(function(){
$(this).next().slideToggle(function(){
if ($(this).is(':visible')){
$(this).css('display','inline-block');
}
});
});
$('.cantidad-te').change(function(){
var value, product, precio, cantidadEspecial;
value = $(this).val();
product = $(this).parent().parent();
precio = $(this).parent().parent().next().next().children();
cantidadEspecial =product.next();
if (value === 'mayoreo') {
cantidadEspecial.show();
precio.children().html('especifique cantidad');
}else{
cantidadEspecial.hide();
subtotal = precio.attr('id') * value;
precio.children().html(formatCurrency(subtotal) + ' MXN');
}
});
In theory it works, however it only works for the last element on my teas product.
Expected outcome
When clicking on any element it should:
show the div with the shopping cart
slideToggle should show the form to add product to shopping cart
When selecting an element from dropdown it should:
update with correct price
Current outcome
Only slideToggle() works for last element on my grid.
when changing values on dropdown list it does not make the changes specified.
Additional info
To see a live version of how the 3D grid works visit here (this is not the version am currently working with as I havent pushed the changes)
The code for live version is here
Page Source (HTML Outcome) - here as pointed out by #AlexAtNet
Thank you

Bring a WordPress post dynamically

I've been trying to make this feature work for many days now and it's driving me nuts!
I have a single page theme in WP and in one of them there is a div on the left with a list of the posts in the site and on the right, a div that should display the content of the clicked post.
I found this question and followed up the linked tutorial and was partially successful.
I managed to bring the content dinamically, and all I want is being displayed but it seems the order of the tasks are wrong. Heres how it's acting:
I click on the link.
the current content goes away.
the loading span appears correctely.
the SAME content fades in.
after 1 second or so the current content is replaced with the new content and the address bar does not change at all.
Here's the code I have:
atracoes.js
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('.controle nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href)){
var aCarregar = hash+'.html #atr-conteudo';
$('#atr-conteudo').load(aCarregar)
}
});
$('.controle nav li a').click(function() {
var aCarregar = $(this).attr('href')+' #atr-conteudo';
$('#atr-conteudo').hide('fast',carregarConteudo);
$('#carregando').remove();
$('#atracoes').append('<span id="carregando">Carregando...</span>');
$('#carregando').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando());
}
function esconderCarregando () {
$('#carregando').fadeOut('normal');
}
return false;
});
});
index.php (the dynamic content part)
<div class="main" id="atracoes">
<div class="controle">
<nav>
<?php
$args = array( 'posts_per_page' => 20);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<?php the_title(); ?>
</li>
<?php endforeach;
wp_reset_postdata();?>
</nav>
</div>
<div id="atr-conteudo">
<?php the_post_thumbnail(); ?>
<div id="atr-texto">
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</div>
</div>
</div>
single.php (the part I'm plucking with ajax)
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<div id="atr-texto">
<!-- post title -->
<h1>
<?php the_title(); ?>
</h1>
<!-- /post title -->
<?php the_content(); // Dynamic Content ?>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
</div>
</article>

You're calling the functions before you pass them to jQuery to execute, instead of allowing jQuery to execute them:
function carregarConteudo () {
$('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$('#atr-conteudo').show('normal',esconderCarregando);
}
(Notice they no longer have () after the function names)