How to pass image to bootstrap modal window in rails 4

Question

I have photo index page, In that when I want to click a image that image will show in modal window. i have tried below code. i am not getting right output.

<%= render 'shared_page' %>
      <div class="widget-content">
        <%= render 'layouts/messages' %>
        <div class="table-responsive">
          <table class='datatable table-bordered table-hover'>
            <thead>
              <tr>
              <th>Address</th>              
              <th>Mobile Number</th>
              <th>Landline Number</th>
              <th>Image Type</th>
              <th>Image</th>
              <th>Actions</th>              
            </tr>
          </thead>

          <tbody>
            <% @cable_photos.each do |cable| %>
              <tr>
                <td><%= cable.address %></td>
                <td><%= cable.mobile_no %></td>
                <td><%= cable. phone_no %></td>
                <td><%= cable.image_type %></td>
                <td> <%= link_to image_tag cable.avatar.url(:thumb), data: {toggle: "modal",target: "#myModal", :id => cable.id } %></td> 
                <td>
                  <%= link_to 'Edit', edit_cable_photo_path(cable), class: 'btn btn-default btn-xs' %>
                  <%= link_to cable, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-xs btn-danger ' do %>
                    <i class='icon icon-remove'></i>
                  <% end %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
     </div>
      </div>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="myModalLabel">Image</h4>
      </div>
      <div class="modal-body">
        <% if params[:id].present? %>
       <% @cable = CablePhoto.find(data('id')) %>
       <%= image_tag @cable.avatar.url %>
       <% end %>
      </div>
      </div>
      </div>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

Is you main goal to display a larger version of the photo in a pop-up or pop-over window? If so, you may be better off using a "lightbox" type solution. They are straightforward to implement, and work great with Rails.

Here are some options to get you started:

• Lightbox 2
• Nivo Lightbox
• Lightbox for Bootstrap 3

If you do actually want to render dynamic content into a Bootstrap modal, you need to do a few additional things:

1. Add a "data-toggle" and "data-target" attribute to your anchor (link).
2. Create a modal "template" on the same page that Bootstrap will unhide and inject your dynamic content in to, using the matching "ID" tag specified in your "data-target" attribute
3. Add a "modal" function in your controller, which rails will call to get the dynamic data and add to your "modal.html.erb" view, which is what is injected into the Bootstrap modal template

If you is what you want to do, I can provide a specific example of working code.