I've created a layout for my single post that have a fixed column and another that contains images that has the vertical scroll. I'm using viewportchecker to check if the images are inside the viewport to add a fade in effect using animate.css library. The problem is that it will work only for the first image. Can anyone suggest me a solution?Here is the code:

<?php get_header(); ?>

<div class="container-fluid" id="post-content">
  <div class="row">
<?php if( have_posts() ): while( have_posts() ): the_post();
  $attached_images = get_post_gallery_images($post->ID);
  <div class="col-sm-12 col-md-6 col-lg-4 shadow" id="single-post-text">
    <h2 class=""><?php the_title(); ?></h2>
  add_filter('the_content', 'remove_shortcode_from');
  remove_filter('the_content', 'remove_shortcode_from');
<?php if($attached_images): ?>
  <div class="col-sm-12 col-md-6 col-lg-6" id="single-post-img">
<?php foreach($attached_images as $image): ?>
    <img class="img-fluid w-100 show" src="<?php echo $image; ?>" alt="" title="" id="post-image" />
<?php endforeach; ?>
<?php endif; ?>

<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>

<?php get_footer(); ?>


     var scroll = $(window).scrollTop();
         classToAdd: 'animated fadeInUp show',
         classToRemove: 'hide',
         offset: 50,


  opacity: 0;
  opacity: 1;
  position: fixed;
  top: 25%;
  left: 2%;
  background-color: white;
  position: relative;
  top: 0;
  left: 50%;
  right: 0;

Another question, how I can obtain the images attached to a gallery of a page?

1 Answer 1


It looks like you're reusing an id for each image. In that case, Js will only select the first element it runs into with the id

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.