How to combine Lightbox and bxSlider?

I am trying to use bxSlider to create an image carousel and to use Lightbox to make the affect that upon clicking the image it will show larger (as demonstrated in the "Two individual images" section in the Lightbox website I've linked).

I have first managed to use the bxSlider to create the carousel, the code for this in my case looks like this

                  <div class="slider1">
                        <div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-offset="50" data-wow-delay="0.6s">
                            <div class="portfolio-thumb">
                                <div class="slide"> 
                                    <img src="images/portfolio-img1.jpg" class="img-responsive" alt="portfolio img 1">
                                </div>
                            </div>
                        </div>
                 </div>

where inside the first div ("slider1") I have a div clas "col -..." for each image in the gallery. In this code example I have included the code for the first image.

The result looks like this

Now I want to add the Lightbox functionality, and this is where I'm having problems.

Instead of the I have tried using something like

<a href="link-to-the-image.jpg" data-lightbox="gallery-name"><img alt="" src="link-to-the-image.jpg"/></a>

like I have seen both on the Lightbox website and on the following SO question

but what I get is that when I click the image in the carousel I get to a new page with only the image:

I remembered to link to the lightbox.css and to the lightbox.js files, as in the instructions on the lightbox website.

Any ideas about why the lightbox functionality isn't working for me and how to fix it ?