如何将灯箱样式的图片库添加到finery-cms网站? [英] How to add a lightbox style image gallery to a refinery-cms website?

问题描述

如何在使用Refinery-cms的Ruby-on-Rails网站上添加灯箱样式图片库?我希望内容管理器能够将图像上载到页面，但是让页面自动显示缩略图，该缩略图带有在灯箱样式窗口中显示完整尺寸图像的链接.

How can I add lightbox style image gallery to Ruby-on-Rails website that is using Refinery-cms? I want the content managers to be able upload images to a page but have the page automatically display thumbnails with links that show the full-size image in a lightbox style window.

推荐答案

第一步是从Github下载jquery_lightbox

First step is to download jquery_lightbox from Github

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

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

Unzip and copy the files to the correct locations

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

Copy jquery_lightbox.js to app/assests/javascripts dir of your website

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

Copy all the gif files from the images dir to app/assets/images dir of your website

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

Copy lightbox.css.scss from the css dir to app/assests/stylesheets dir of your website

按如下方式编辑您的app/assets/javascripts/application.js文件:

Edit your app/assets/javascripts/application.js file like so:

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

接下来，请确保您的网站中包含了finerycms-page-images，即使不仅仅是取消注释/将以下内容添加到您的Gemfile中:

Next make sure you have refinerycms-page-images included in your webiste, if not just uncomment/add the following to your Gemfile:

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

然后运行以下命令:

bundle install
rails generate refinery:page_images
rake db:migrate

安装了精炼厂页面图像后，通过精炼厂后端(称为图像)编辑页面时，您现在将有一个额外的标签，您可以在其中上传一个或多个图像并将它们与页面关联.为了能够看到图像，我们将需要创建一个自定义页面模板.

With refinery-page-images installed you will now have an extra tab when edting a page though the refinery backend called images, where you can upload one or more images and associate them them with the page. To be able to see the images we will need to create a custom page template.

创建一个新文件:

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

编辑文件并添加以下代码:

Edit the file and add the following code:

<%= 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大小的图像和宝丽来帧效果.精炼厂使用蜻蜓宝石控制图像，在线查看其他图像选项.链接网址指向同一张图片，但应用了不同的尺寸(600像素x 400像素).该代码的两个关键部分是将lightbox类添加到rel属性.添加该类将使使用jquery定位链接更加容易，以便我们可以应用灯箱功能. rel将对图像进行分组，以便灯箱可以使用图像上的下一个和上一个按钮滚动浏览页面上的图像.这些部分和div只是为了简化厨房的样式.

The first line will display the normal refinery page content. The rest of the code loops through the images on the images tab and creates an image link for each one. Each link has the thumbnail image to display, I have used an 80px x 80px sized image in the example with polaroid frame effect. Refinery uses the Dragonfly gem to control images, check out online for other image options. The link url is to the same image but with a different size applied (600px x 400px). Two key parts of this code are adding the lightbox class the rel attribute. adding the class will make it easier to target the link with jquery so that we can apply the lightbox functionallity. The rel will group the images so that lightbox will be able to scroll through the images on the page using the next and previous buttons on the image. The sections and divs are just to make the styling of the galley easier.

下一步创建以下文件:

app/assets/javascripts/gallery.js.coffee

并向其中添加以下代码:

And add the following code to it:

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

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

This will target the image links and add the lightbox functionallity. Next add the following file:

app/assets/stylesheets/gallery.css.scss

并添加以下代码:

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

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

Now to create a gallery page, start you web server and browse to the site backend. Go to the pages tab and create a new page. Expand the advanced options and from the View template drop-down select Gallery. Lastly go to the Images tab and add some images.

这篇关于如何将灯箱样式的图片库添加到finery-cms网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！