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">×</a>
</div>
Controller
def show
@gallery = Gallery.find(params[:id])
respond_to do |format|
format.js
end
end
