how to pick up current slide from lightbox

hey guys I installed lightbox from w3 in laravel however when clicking in a pic will only show the first image in the table not the current one, when I first installed it would work properly but somehow is not working anymore.

here is my code from the index page. clicking in link show image and then clicking in image show in lightbox. however when clicking image instead showing current image, shows first image in the table.

<ul class="portfolios">
           @foreach($portfolios as $portfolio)

            <li>
                <a href="javascript:" onclick="changeImg('{!! $portfolio->thumb_image !!}');"><i class="fa fa-angle-right"></i>&nbsp;</a>
            </li>

           @endforeach

        </ul>

 <img height="500" class="img-thumbnail hover-shadow" id="imageHolder"  
src="{!! asset($port->images) !!}" alt="{!! $port->title !!}"  
onclick="openModal();currentSlide({!! $port->id !!})">

 <div id="myModal" class="modal">
                      <span class="close cursor" 
onclick="closeModal()">&times;</span>
                      <div class="modal-content text-center">
                        @foreach($portfolios as $portfolio)
                            <div class="mySlides">
                                <img class="img-fluid resize" src="{!! 
asset($portfolio->images) !!}" alt="{!! $portfolio->title !!}">
                            </div>
                         @endforeach



                        <a class="prev" onclick="plusSlides(-1)">&#10094;
</a>
                        <a class="next" onclick="plusSlides(1)">&#10095;</a>


                      </div>
                    </div>

javascript code from lightbox w3

function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 0;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex-1].style.display = "block";

}

controller public function index(){

    return view('frontpage.index')
        ->with('portfolios', Portfolio::all())
        ->with('port', Portfolio::all()->first())
        ->with('posts', Post::latestFirst()->get())
        ->with('settings', Setting::all()->first())
        ->with('meta', Meta::all()->first());

}


thanks in advanced!

via Chebli Mohamed