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?
