WordPress : mise en page à deux cols bootstrap 4 avec un col fixe et effet de fondu sur l’image
J’ai créé une mise en page pour mon article unique qui a une colonne fixe et une autre qui contient des images avec le défilement vertical. J’utilise viewportchecker pour vérifier si les images sont à l’intérieur de la fenêtre pour ajouter un effet de fondu à l’aide de la bibliothèque animate.css. Le problème est que cela ne fonctionnera que pour la première image. Quelqu’un peut-il me suggérer une solution ? Voici le 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;
}
Autre question, comment puis-je obtenir les images attachées à une galerie d’une page ?
Solution n°1 trouvée
Il semble que vous réutilisiez un identifiant pour chaque image. Dans ce cas, Js ne sélectionnera que le premier élément qu’il rencontre avec l’id
0 commentaire