theme development - two col layout bootstrap 4 with one fixed col and fade in effect on image

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>
<?php
  add_filter('the_content', 'remove_shortcode_from');
  the_content();
  remove_filter('the_content', 'remove_shortcode_from');
?>
  </div>
<?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; ?>
  </div>
<?php endif; ?>

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

<?php get_footer(); ?>

JS

$(window).scroll(function(e){
     var scroll = $(window).scrollTop();
       $('#post-image').viewportChecker({
         classToAdd: 'animated fadeInUp show',
         classToRemove: 'hide',
         offset: 50,
       });
     });

CSS

.hide{
  opacity: 0;
}
.show{
  opacity: 1;
}
#single-post-text{
  position: fixed;
  top: 25%;
  left: 2%;
  background-color: white;
}
#single-post-img{
  position: relative;
  top: 0;
  left: 50%;
  right: 0;
}

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

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>
<?php
  add_filter('the_content', 'remove_shortcode_from');
  the_content();
  remove_filter('the_content', 'remove_shortcode_from');
?>
  </div>
<?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; ?>
  </div>
<?php endif; ?>

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

<?php get_footer(); ?>

JS

$(window).scroll(function(e){
     var scroll = $(window).scrollTop();
       $('#post-image').viewportChecker({
         classToAdd: 'animated fadeInUp show',
         classToRemove: 'hide',
         offset: 50,
       });
     });

CSS

.hide{
  opacity: 0;
}
.show{
  opacity: 1;
}
#single-post-text{
  position: fixed;
  top: 25%;
  left: 2%;
  background-color: white;
}
#single-post-img{
  position: relative;
  top: 0;
  left: 50%;
  right: 0;
}

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

• theme-development
• single
• twitter-bootstrap
• screen-layout

Share Improve this question asked Feb 19, 2019 at 21:59 ZWPDevZWPDev 11622 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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