Question

如何将Lightbox样式图库添加到使用Refinery-cms的Ruby-on-Rails网站？我希望内容管理员能够将图像上传到页面，但让页面自动显示缩略图，其中包含在灯箱样式窗口中显示完整尺寸图像的链接。

Answer 1

第一步是从Github下载jquery_lightbox

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

将文件解压缩并复制到正确的位置

将jquery_lightbox.js复制到您网站的app / assests / javascripts目录

将所有gif文件从images dir复制到您网站的app / assets / images目录

将lightbox.css.scss从css dir复制到您网站的app / assests / stylesheets目录

编辑你的app / assets / javascripts / application.js文件，如下所示：

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

接下来请确保您的网站中包含refinerycms-page-images，如果不是只是取消注释/将以下内容添加到您的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大小的图像。炼油厂使用Dragonfly宝石来控制图像，在线查看其他图像选项。链接URL是相同的图像，但应用了不同的大小（600px x 400px）。此代码的两个关键部分是添加lightbox类的rel属性。添加该类将更容易使用jquery定位链接，以便我们可以应用lightbox functionallity。 rel将对图像进行分组，以便灯箱可以使用图像上的下一个和上一个按钮滚动页面上的图像。部分和div只是为了使厨房的造型更容易。

接下来创建以下文件：

app/assets/javascripts/gallery.js.coffee

并将以下代码添加到其中：

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

这将定位图像链接并添加灯箱功能。接下来添加以下文件：

app/assets/stylesheets/gallery.css.scss

并添加以下代码：

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

现在要创建一个图库页面，启动Web服务器并浏览到站点后端。转到页面选项卡并创建一个新页面。展开高级选项，然后从“视图模板”下拉列表中选择“图库”。最后转到图像选项卡并添加一些图像。

如何将灯箱风格的图库添加到refinery-cms网站？

1 个答案: