如何在 Rails 4 中配置 blueimp-gallery答案

【问题标题】：How to Configure the blueimp-gallery in Rails 4如何在 Rails 4 中配置 blueimp-gallery
【发布时间】：2015-09-12 09:32:55
【问题描述】：

我正在尝试使用 Rails 4 完成教程 Blueimp Gallery (gem 'blueimp-gallery')，当我点击照片时不会收取费用。

我的应用程序.js

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

我想问一下@import "blueimp-gallery-all";是否更好或者是否可以在我的 custom.css.sccs 文件中工作，因为我使用的是 Sass，并且我在其他配置中看到他们建议这样做。不同于教程！

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

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

然后在我生成一个控制器库：

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>

文件视图 carousel.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>

还有一件事我想问一下如果我使用咖啡脚本的方式，文件.coffee 的名称将如何？我将每个代码都放在文件gallery.coffee 中（我尝试过但不起作用）？

【问题讨论】：

标签： javascript ruby-on-rails-4 coffeescript blueimp bootstrap-sass

【解决方案1】：

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

文件/views/gallery/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

而我的 Caroussel Gallery 不工作了！

【讨论】：