Question

我尝试使用Rails 4进行教程Blueimp Gallery (gem 'blueimp-gallery')，并且在点击它们时不会对照片进行充电。

我的application.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>

文件视图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方式，文件的名称将如何？咖啡？我把每个代码都放在文件gallery.coffee中（我尝试过这个并且不起作用）？

Answer 1

我可以运行Lightbox Gallery。轨道4上红宝石的唯一方法是：

file /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画廊不起作用！

如何在Rails 4中配置blueimp-gallery

1 个答案: