1

我是 Rails 的新手，我正在尝试为投资组合制作一些简单的图片库，也许有人可以提供一些建议。我在 Bootstap 中寻找类似 modal 的东西。

我暂时有这样的事情

<article class="thumbnail">           
  <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="/assets/project1.png" alt="Project1" /></a>
  <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h3 id="myModalLabel"><img src="/assets/project1.png" alt="Project1" /></h3>
     </div>
     <div class="modal-footer">
       <a class="btn btn-info modal-prev"> Previous</a>
       <a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>           
     </div>
   </div>
</article>

我正在考虑如何使我的模态页脚工作。

4

1 回答 1

4

好吧，如果您正在寻找客户端实现，我建议您使用 Fancybox：http ://fancyapps.com/fancybox/这个库功能强大，但易于使用。

如果您正在寻找滚动条，请尝试使用 FlexSlider：https ://github.com/woothemes/FlexSlider

更新

这是一个如何在 rails 应用程序中使用 Fancybox 来显示照片的示例（取自我的工作应用程序）：

在 javascript 文件夹中有两个文件：jquery.fancybox.pack.js 和 jquery.fancybox-buttons.js（因为我还需要为我的画廊使用控制按钮）。我也有 MouseWheel 库，但这个是可选的。在 application.js 中（当然，你可以有其他库）：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require lib/jquery.mousewheel
//= require lib/jquery.fancybox.pack
//= require lib/jquery.fancybox-buttons

jQuery(function($) { // as soon as DOM is ready
$(".fancybox").fancybox({ // initialize fancybox on all pages where it is present
        helpers: {
            title: {type: 'inside'},
            buttons: {}
        }
    });
});

另外不要忘记下载 FancyBox 样式并将其包含在您的 application.css 中。

在我看来：

<% photos.each do |photo| %>
<%= link_to image_tag(photo.file.thumb('200x200#').url),
                photo.file.remote_url,
                class: 'fancybox', rel: 'group', title: photo.title, alt: 'Photo' %>
  <% end %>
于 2013-07-02T08:57:34.640 回答