如何在Rails 4中配置blueimp-gallery

我正在嘗試使用Rails 4來編寫教程Blueimp Gallery (gem 'blueimp-gallery')，並且在點擊它們時不收取照片。如何在Rails 4中配置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文件工作，因爲我使用無禮，我在看到其他他們推薦的配置做這個。不同的教程！

然後在我的application.css.scss：

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

然後我產生控制器畫廊：

class GalleryController < ApplicationController 

    def lightbox 

    end 

    def caroussel 
    end 

end

，在我的觀點我這樣做：

在燈箱.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中（我嘗試過並且不行）？

來源

2015-06-25 rld

我可以運行燈箱庫。在軌道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中的視頻配置。比我選擇我想顯示圖像的時間，然後我選擇我放置檢查元素的圖像，然後我有這個網址：https://i.vimeocdn.com/video/YOUR_THUMBNAIL_IMAGE.webp

而我的Caroussel畫廊不工作！

來源

2015-07-02 14:36:40 rld

如何在Rails 4中配置blueimp-gallery

回答

相關問題