I got the answer from someone else and got it working. To summarize, the problem was not having the right use of WP functions to call the custom post thumbnail image dynamically. Hence the BueggetteBox.js plugin (a lightbox plugin) functionality would work properly when you clicked on a custom post thumbnail from the gallery within my freshly made custom WP theme.
This is what I had originally in my custom template file (page-portfolio.php)
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a class="lightbox" href="http://localhost:8888/wordpress_local/wp-content/uploads/2018/01/traffic.jpg">
<?php the_post_thumbnail( 333, 249 ); ?>
</a>
<div class="caption">
<h3><?php the_title(); ?></h3>
<p><?php the_field('editor'); ?></p>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
Here is the solution that worked. I replaced the above with the below code using the get_post_thumbnail_id() , wp_get_attachment_image_src($thumb_id,'full', true); and then applied the $thumbn_nail property to the hyperlink. See below for implementation:
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'full', true);
?>
<div class="col-sm-6 col-md-4"><!-- get_post_field -->
<div class="thumbnail">
<a class="lightbox" href="https://wordpress.stackexchange.com/questions/292235/<?php echo $thumb_url[0]; ?>">
<?php the_post_thumbnail( 333, 249 ); ?>
</a>
<div class="caption">
<h3><?php the_title(); ?></h3>
<p><?php the_field('editor'); ?></p>
</div>
</div>
</div>
<?php endwhile; endif; wp_reset_postdata(); ?>
annnnnnnnnd presto! Now it works fine!