So I'm making a website divived in two parts, one is for the text, and the other part is for the images. What I'm trying to do, is to display the specific images belonging to each post. I'm also using Advanced Custom Fields to make it easier for me. So I know can have my id post using:
global $post; echo $post->ID;
What I don't know, is how to display the images corresponding to that.
here is my code:
<?php
$images = get_field('gallery');
if( $images ): ?>
<ul> <div class="slide-photos" id="<?php $post->ID;?>" data-id="<?php $post->ID;?>">
<?php foreach( $images as $image ): ?>
<li>
<div class="photos-ind"><img id="<?php $post->ID;?>" class="slide-photos" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" data-id="<?php $post->ID;?>"/></div>
</li>
<?php endforeach; ?></div>
</ul>
<?php endif; ?>
I also have that javascript
$(document).ready(function(){
$(".exposition").on('click',function(){
var hello = $(this).attr('data-id');
$('.slide-photos').hide();
$('[id='+ hello + ']').show();
$('[id='+ hello + ']').flickity({
wrapAround: true, lazyLoad: 2, selectedAttraction: 0.1,
friction: 0.5, cellAlign: 'left', adaptiveHeight: false, imagesLoaded: true,
});
console.log('[id='+ hello + ']');
});
});
get_field()
. Are you using Advanced Custom Fields to add images to a post?