Bootstap carousel with Ruby keeps showing the last image

I am working on a dinamic photos carousel using Ruby and bootstrap ligthbox carousel, but i cannot make it work properly. when clicking on an image of the carousel to open that image in a modal keeps showing the last closed photo and not the photo I am clickin on. Any help will be appreciated, thanks.

     <div class="container">
  <div class="row d-flex flex-wrap align-items-center" data-toggle="modal" data-target="#lightbox">
    <% @photos.each do |photo| %>
      <div class="col-12 col-md-6 col-lg-3">
        <img src="<%= cl_image_path photo.photo.key %>"/> 
      </div>
    <% end %>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="lightbox" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <button type="button" class="close text-right p-2" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <div  id="myCarousel" data-ride="carousel" class="carousel slide">
          <ol class="carousel-indicators">
            <% @photos.each_with_index do |photo, n| %>
              <li data-target='#MyCarousel' data-slide-to="#{n}" class="#{'active' if n == 0}"></li>
            <% end %>
          </ol>
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
              <img class="d-block w-100" src="<%= cl_image_path @photos.first.photo.key %>">
            </div>
            <% @photos.drop(1).each do |photo| %>
              <div class="carousel-item">
                <img class="d-block w-100" src="<%= cl_image_path photo.photo.key %>">
              </div>
            <% end %>
          </div>

          <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

`

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum