Lightbox 2 not functioning with Wordpress

Question

It works fine with the static version of the website, but after transferring it to the WP version, clicking the image simply navigates to a new page, instead of bringing the LB up over the top, like on the static version. The template:

<?php
/*
Template Name: Work Child Page
*/
?>
<?php include 'header.php'; ?>

<?php while ( have_posts() ) : the_post(); ?>

<div class="col-md-10">
    <div class="row bottom-margin">
        <div class="col-md-12">
            <h3><?php the_field('title'); ?></h3>
        </div>
    </div>
    <div class="row">
        <?php           
            if(have_rows('images')):
                while(have_rows('images')): the_row();?>
                    <?php if(get_sub_field("image")): ?>

                        <div class="col-md-2 bottom-margin" data-title="" data-lightbox="Vacation">
                            <a href="<?php the_sub_field('image'); ?>">
                                <img class="img-responsive" src="<?php the_sub_field('image'); ?>" alt="">
                            </a>
                        </div>

                    <?php endif; // end of if field_name logic ?>   
                <?php endwhile;?>
            <?php endif;?>  

    </div>
</div>

<?php endwhile; // end of the loop. ?>

<?php include 'footer.php'; ?>

The console doesn't bring up any JS errors. It uses ACF repeater, the repeater is called "images" with one subfield "image" which is of type image and returns an image URL value?

Answer 1

Have you selected image url while creating the field. There is option for image object by default while creating image field. If its all ok try to find the script of lightbox in page source that is it the correct path you have included.

If that is also fine then it must be conflicting with some script of plugin you have used or there might be problem when you are including library. You may try to shift it over header to footer or vice versa.

Answer 2

Find this code

<a href="<?php the_sub_field('image'); ?>">
    <img class="img-responsive" src="<?php the_sub_field('image'); ?>" alt="">

and replace with this

<a href="<?php the_sub_field('image'); ?>" rel="lightbox">
    <img class="img-responsive" src="<?php the_sub_field('image'); ?>" alt="">