如何添加一個燈箱樣式的圖片庫到煉油廠的網站？

Question

如何將lightbox樣式的圖片庫添加到使用Refinery-cms的Ruby-on-Rails網站上？我希望內容管理者能夠將圖片上傳到頁面，但讓頁面自動顯示縮略圖，並在鏈接中顯示全尺寸圖片。

Answer 1

第一步是從GitHub

https://github.com/krewenki/jquery-lightbox/archive/master.zip

解壓下載jquery_lightbox和文件複製到正確的位置

複製jquery_lightbox.js到應用程序/租入資產價值/ JavaScript的網站的目錄

將圖片目錄中的所有gif文件複製到您網站的應用/資產/圖片目錄

個從CSS目錄複製lightbox.css.scss到App網站

編輯的/租入資產價值/樣式目錄您的應用程序/資產/ Java腳本/ application.js中的文件，像這樣：

//= require jquery 
//= require jquery_ujs 
//= require jquery_lightbox 
//= require_tree . 

下一頁確保已包含在您的網站refinerycms頁的圖像，如果不只是取消註釋/以下內容添加到您的Gemfile：

gem 'refinerycms-page-images', '~> 2.1.0' 

然後運行如下因素命令：

bundle install 
rails generate refinery:page_images 
rake db:migrate 

通過安裝煉油廠頁面圖像，您可以在精煉廠後臺調用圖像的情況下編輯頁面時擁有額外的選項卡，您可以在其中上載一個或多個圖像並將它們與頁面關聯。爲了能夠看到圖像，我們需要創建一個自定義頁面模板。

創建一個新的文件：

app/views/refinery/pages/gallery.html.erb 

編輯該文件並添加以下代碼：

<%= render '/refinery/content_page' %> 
<section id="gallery"> 
    <% @page.images.each do |image| %> 
    <div class="gallery_item"> 
     <%= link_to image_tag(image.thumbnail(geometry: '80x80#c') 
          .png.convert("-background #666666 +polaroid").url), 
      image.thumbnail(geometry: "600x400").url, 
      class: 'lightbox', 
      rel: 'gallery' %> 
    </div> 
<% end %> 
</section> 

的第一行顯示正常的煉油廠頁面內容。其餘代碼在圖像選項卡上循環顯示圖像，併爲每個圖像創建一個圖像鏈接。每個鏈接都有要顯示的縮略圖圖像，我在示例中使用了一個80px x 80px大小的圖像以及寶麗來幀效果。煉油廠使用蜻蜓寶石控制圖像，在線檢查其他圖像選項。鏈接網址是相同的圖像，但應用了不同的尺寸（600px x 400px）。此代碼的兩個關鍵部分是添加lightbox類rel屬性。添加類將使它更容易定位與jQuery的鏈接，以便我們可以應用燈箱功能。 rel會對圖像進行分組，以便使用圖像上的下一個和上一個按鈕，lightbox可以在頁面上滾動瀏覽圖像。部分和div只是爲了使廚房的造型更容易。

下一頁創建以下文件：

app/assets/javascripts/gallery.js.coffee 

並將下面的代碼添加到它：

$ -> 
    if $('#gallery').length > 0 
    $('.lightbox').lightbox() 

這將目標圖片鏈接，並添加收藏夾functionallity。接下來，添加以下文件：

app/assets/stylesheets/gallery.css.scss 

，並添加以下代碼：

#gallery { 
    .gallery_item { 
    float: left; 
    width: 100px; 
    height: 100px; 
    } 
} 

現在開始創建畫廊頁，啓動你的web服務器和瀏覽到網站後臺。轉到頁面選項卡並創建一個新頁面。展開高級選項並從視圖模板下拉菜單中選擇圖庫。最後轉到圖像選項卡並添加一些圖像。