Displaying dynamic data inside Lightbox

My goal is to have an image gallery page that displays images in a modal when users click on a picture and be able to view other pictures by clicking on the left and right arrows. I'm attempting to achieve this with lightbox by Lokesh Dhakar http://lokeshdhakar.com/projects/lightbox2/ . I have added lighbox.css and lightbox.js to my laravel project and my view renders properly but when i click on an image in chromo, the image opens fully in the same tab so that i don't have that modal effect. From the console i see this warning message

Resource interpreted as Document but transferred with MIME type image/png: "http://127.0.0.1:8000/images/albums/albumImg/ckmUU5_album_image.png".

This is the first time I'm doing anything like this with laravel, so i haven't been able to figure out what I'm doing wrong. This is the code i have below

<div class="card-columns mb-5" id="albumImgs">

@foreach($album->photos as $photo)

    <div class="card">

        <a href="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" data-lightbox="photos">

            <img class="card-img" src="{{URL::to('/')}}/images/albums/albumImg/{{$photo->image}}" alt="">

        </a>

    </div>

@endforeach

</div>

I need help figuring out what I'm doing wrong and how to achieve my goal.