How to Configure the blueimp-gallery in Rails 4

Question

I'm trying to do the tutorial Blueimp Gallery (gem 'blueimp-gallery') with Rails 4 and isn't charge the photos when I click in them.

my application.js

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

I want to ask to if it's better to do @import "blueimp-gallery-all"; or if will works in my custom.css.sccs file because i'm using Sass and I saw in other configurations they recommend do this. Different of the tutorial!

then in my application.css.scss:

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

then in I generate a Controller Gallery:

class GalleryController < ApplicationController

  def lightbox

  end

  def caroussel
  end

end

and in my views I do this:

in the 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>

The file view 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>

And other thing I want to ask if I use the coffescript way how will be the name of the file .coffee? I put every code in the file gallery.coffee(I try that and don't works)?

Answer 1

I can put to run the Lightbox Gallery. The only way in ruby on rails 4 was:

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.: For show the image thumbnail the way I do was inspect the element in the configuration of the video in Vimeo. Than I choose the time I want to show the image and after I select the image I put for inspect the element and then I have this URL: https://i.vimeocdn.com/video/YOUR_THUMBNAIL_IMAGE.webp

And my Caroussel Gallery don't works!