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?
Share Improve this question asked Feb 19, 2019 at 21:59 ZWPDevZWPDev 1162 silver badges16 bronze badges1 Answer
Reset to default 0It 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