Page jump on load when implementing lightbox functionality

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.

Read More

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?

Related posts

1 comment

  1. 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

    html { overflow-x:auto; overflow-y:scroll; }
    

    This forces the scrollbar to be there before the content is fully loaded which is why it was jumping before!

Comments are closed.