I’m building a custom WordPress theme locally and using Advanced Custom Fields for much of the content alongside custom post types.
I’m currently building the gallery section and want to use lightbox – the two size images are custom size featured images.
Before I add the lightbox anchor image my code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?>">
</a>
However – when I then add in the lightbox images – the lightbox functionality works fine – but makes the page jump slightly on page load. The code looks like this:
<?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'featured-image-shop', true );
?>
<a href="<?php echo $thumbnail_url[0];?>" data-lightbox="gallery-images" data-title="<?php the_title();?>">
<img class="gallerypics" src="<?php echo $thumbnail_url[0];?>" alt="<?php the_title();?>">
</a>
Any ideas why this happens? I thought maybe it could be a javascript issue but even if I simply add an image in the anchor without the data-lightbox
attribute it still jumps.
Perhaps someone has come across this issue before?
It’s ok – just the act of writing this down gave an the answer so I thought I’d share for anyone who may have the same issue. I needed to add
This forces the scrollbar to be there before the content is fully loaded which is why it was jumping before!