How to add a lightbox style image gallery to a refinery-cms website?

Question

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

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

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

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

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

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

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'

And then run the folowing commands:

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.

Create a new file:

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>

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.

Next create the following file:

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

And add the following code:

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

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.