Is there a conflict with this code and FancyBox3?

64 Views Asked by At

Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:

    <body id="portfolio"> 
     <div class="container-fluid" id="particles-js"></div>
      <%= render 'layouts/altmenu_gallery' %>
        <h1>Portfolio</h1>

        <div id="gallery" class="container-fluid">
          <% @photos.each_slice(4) do |group| %>
            <div class="row ">
              <% group.compact.each do |photo| %>
                  <div class= "col-md-3">
                    <a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%=  photo.description %>"> 
                      <%= image_tag photo.file_url, class:' img-fluid img-thumbnail'  if photo.file.present? %>
                     </a>
                  </div>
              <% end %>
            </div>
          <% end %>
          <br class="clear">
          </div>


        <%= link_to 'New Photo', new_photo_path %>
   </body>
1

There are 1 best solutions below

2
On

Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.