如何在Rails 4中配置blueimp gallery

Question

我正在尝试用Rails4做Blueimp Gallery (gem 'blueimp-gallery')教程，当我点击照片时不会收费。

我的application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require blueimp-gallery-all
//= require_tree .

我想问一下，在我的custom.css.sccs文件中，是使用@import "blueimp-gallery-all";更好，还是使用will更好，因为我使用的是Sass，并且我在其他配置中看到过他们推荐这样做。教程的不同之处！

然后在我的application.css.scss中：

 *= require_tree .
 *= require_self
 *= require blueimp-gallery-all

然后在I generate a Controller Gallery中：

class GalleryController < ApplicationController

  def lightbox

  end

  def caroussel
  end

end

在我看来，我是这样做的：

在lightbox.html.erb中

<h1>Gallery</h1>
<div id="blueimp-gallery" class="blueimp-gallery">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="close">×</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

<div id="links">

     <%= link_to image_tag("imgJatinho.jpg", :alt => "Rodrigo Batera1", height: '110', width: '110' )  %>
     <%= link_to image_tag("image2.jpg", :alt => "Rodrigo Batera2", height: '110', width: '110') %>
     <%= link_to image_tag("image3.jpg", :alt => "Rodrigo Batera3", height: '110', width: '110') %>

</div>

<script>
document.getElementById('links').onclick = function (event) {
  event = event || window.event;
  var target = event.target || event.srcElement,
    link = target.src ? target.parentNode : target,
    options = {index: link, event: event},
    links = this.getElementsByTagName('a');
  blueimp.Gallery(links, options);
};
</script>

文件视图caroussel.html.erb

<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a>
  <a class="next">›</a>
  <a class="play-pause"></a>
  <ol class="indicator"></ol>
</div>

<div id="links">

     <a href="imgJatinho.jpg" title="Banana" data-gallery>
        <img src="imgJatinho.jpg" alt="Banana">
    </a>
     <%= link_to image_tag("imgJatinho.jpg", :alt => "Rodrigo Batera1", height: '110', width: '110')%>
     <%= link_to image_tag("image2.jpg", :alt => "Rodrigo Batera2", height: '110', width: '110') %>
     <%= link_to image_tag("image3.jpg", :alt => "Rodrigo Batera3", height: '110', width: '110') %>
</div>

<script>
blueimp.Gallery(
  document.getElementById('links').getElementsByTagName('a'),
  {
    container: '#blueimp-gallery-carousel',
    carousel: true
  }
);
</script>

还有一件事，我想问的是，如果我使用coffescript的方式，.coffee文件的名字是怎样的？我把所有的代码都放到了gallery.coffee文件中(我试过了，但不起作用)？

Answer 1

我可以运行Lightbox Gallery。ruby on rails 4中的唯一方法是：

文件/视图/图库/lightbox.html.erb

<div id="links">

        <h3> PHOTOS </h3>   
             <a href="<%= image_path("image2.jpg") %>" title="title2" data-gallery>
                    <img src="<%= image_path("image2.jpg") %>" alt="title2" height=280 width=260 >
                </a>

        <h3> VIDEOS </h3>   

        <a href="http://vimeo.com/83451695" type="text/hml" data-vimeo="83451695" poster="'https://secure-b.vimeocdn.com/ts/83451695.jpg">Adele - Someone like you</a>

              <a
                  href="https://vimeo.com/YOUR_VIDEO_ID"
                  title="TITLE VIDEO"
                  type="text/html"
                  data-vimeo="YOUR_VIDEO_ID"
                  poster="https://i.vimeocdn.com/video/YOUR_THUMBNAIL_IMAGE.webp">
                  <img src="https://i.vimeocdn.com/video/YOUR_THUMBNAIL_IMAGE.webp" alt="YOUR TEXT VIDEO" height=210 width=270 >
              </a>
</div>

OBS:为了显示图像缩略图，我的方法是在Vimeo中检查视频配置中的元素。然后我选择要显示图像的时间，在选择图像之后，我将检查元素，然后我就得到了这个URL：https://i.vimeocdn.com/video/YOUR_THUMBNAIL_IMAGE.webp

我的旋转木马画廊也不能用了！