Question

我有一个图像索引页面，它以统一的方形网格显示来自用户的Facebook个人资料的整个照片专辑。为了获得方形网格形状，我不得不使用一些css从侧面剪切一点点图像（基本上是缩略图）。

我希望用户能够点击图片，以便显示一个模式，显示完整的图像，然后他们可以自己裁剪。

最重要的是，我想知道如何制作它，以便弹出的模式就像一个表单，在这里您选择要裁剪的部分，然后单击提交，照片和裁剪参数将保存到数据库

这是我到目前为止所做的：

<!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </div>
    </div>

<% @profile = @graph.get_object("me") %>
<%= @profile["name"] %><br>
<%= link_to 'Sign Out', sign_out_path, method: :delete %>

<br>

<% @albums = @graph.get_connections("me", "albums?fields=name,photos{name, images{source}}") %>
<% @albums.at(3)["photos"]["data"].each do |data| %>
    <div id="<%= data["id"] %>" class="myImages" data-toggle="modal" data-target="#myModal">
    <%= image_tag data["images"].first["source"] %>
  </div>
<% end %>

<script>
$(document).ready(function() {
    $(".myImages").click(function (e){
    e.preventDefault();
    $(".modal-body").html($(this).html());
  });
});
</script>

从Rails中的图库中将照片提交到数据库

0 个答案: