Question

I am using the Zurb Foundation CSS framework on a RefineryCMS site and I have a gallery page with a number of thumbnail images and I would like the the image to be a link that opens the reveal modal with a larger image and description inside it, basically my show page.

I have used the fancy_box plugin before which was really simple but cant figure this one out.

Index page

 <ul class="large-block-grid-4" id="galleries">
  <% @galleries.each do |g| %>
   <li>
    <%= link_to refinery.galleries_gallery_path(g), :remote => "true", :data => { :"reveal-id" => "modal", :"reveal-ajax" => "true" } do %>
      <%= image_fu g.image, "250x250" %>
    <% end %>
   </li>
  <% end %>
 </ul>

show.js.erb

$("#modal").html('<%= escape_javascript(render "modal", image: @image)%>') 
$('#modal').foundation('reveal', 'open');

_modal.html.erb

<div id="modal" class="reveal-modal" data-reveal>
  <h2><%=raw @gallery.title %></h2>
  <%= image_fu @gallery.image, "600x600" %>
  <%=raw @gallery.description %>
  <a class="close-reveal-modal">&#215;</a>
</div>

Controller

def show
    @gallery = Gallery.find(params[:id])
    respond_to do |format|
      format.js
    end
end
Était-ce utile?

La solution

you can use image tag inside link tag

  <%= link_to image_tag(g.image, "250x250"),"#" %>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top