Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Popular javascript photo gallery and carousel components ready for use with Rails 3 and above :)
Tree: 81791329fe

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Photo Gallery components for Rails

Popular Javascript Photo galleries/carousels ready to use with Rails 3+.


`gem 'rails-gallery'

Galleries included

  • slideshow
  • responsive
  • galleria
  • touch_touch

Please add more using a similar convention as is used for these galleries ;)


In application.css manifest file:

 * require responsive-gallery
 * require gallery/responsive/elastislide
 * require gallery/responsive/style
 * require gallery/slideshow
 * require gallery/galleria
 * require gallery/touch_touch

Using Compass, f.ex in application.css.scss

@import 'gallery/responsive/elastislide';
@import 'gallery/responsive';
@import 'gallery/slideshow';
@import 'gallery/galleria';
@import 'gallery/touch_touch';

In application.js manifest file:

//= require gallery/responsive
//= require gallery/slideshow
//= require gallery/galleria
//= require gallery/touch_touch

//= require jquery/jquery.easing-1.3
//= require jquery/jquery.elastislide
//= require jquery/jquery.tmpl.min



    // Initialize the gallery
    $('#thumbs a').touchTouch();


See TouchTouch and github repo

Minimalistic Slideshow gallery

See minimalistic-slideshow-gallery for more info.


Pls Fill in here ;)

Responsive gallery

See responsive-image-gallery for more info.


Remove thumbnails

Change mode = 'carousel' to 'fullview'

Remove 'mode' bar

  display: none;

.rg-thumbs {
  padding-top: 10px;

placement of thumbnails

To adjust placement of thumbnails, use: prependTo or appendTo in gallery/responsive.js:

``javascript _addImageWrapper= function() {

// adds the structure for the large image and the navigation buttons (if total items > 1)
// also initializes the navigation events
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery )

*Automatic slideshow*

I wanted the same thing and I find a way to do it.
In the file gallery.js, in the function _initCarousel add these lines after: 

`$esCarousel.elastislide( 'setCurrent', current );`

  _navigate( 'right' );
}, 5000);

You just have to change 5000 to the value you want (milliseconds).

  • Fancybox integration*

First you have to include the js and the css file of fancybox in the file where you have the carousel.

In the file responsive.js, replace this line:

$rgGallery.find('div.rg-image').empty().append('img src="' + largesrc + '"');

With this (which adds 'fancybox' class to all images):

$rgGallery.find('div.rg-image').empty().append('a class="fancybox" href="'+largesrc+ '" img src="' + largesrc + '" a');

In this line, don’t forget to add the " for the img and link tags.

Then do the fancybox magic on any class with the fancybox class

$(document).ready(function() {


See for more info.

Rails engine usage

This gem is a Rails 3+ engine :)

Some HAML views (partials) are included in app/views/gallery

Rails views usage

class PropertiesController < ApplicationController
  def show
    @property = property


  def property  title: 'A beautiful property', 
                      description: decription,
                      photos: photos

  def description
    %q{Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris arcu, auctor ac rhoncus non,  libero. Nulla dolor velit, volutpat a bibendum ut, hendrerit id mi. Pellentesque convallis erat in mi interdum rutrum. Phasellus interdum velit nulla.

  def photos
    @photos ||= nil, photo_class: Property::Photo
    5.times do
      @photos.pages << {|n| (Kernel.rand(7) + 1).to_s }

This engine comes with a RGallery::Photosmodel which can encapsulate your photos for display and allows you to group photos in multiple pages. TheRGallery::Photo` class is a base class for describing a photo.

You should create your own Photo class that inherits from RGallery::Photo (or implements the API), which knows how to render and describe your photos.

Here a rough example:

class Property
  class Photo < RGallery::Photo
    def path
      File.join folder, super

    # mogrify -path fullpathto/temp2 -resize 60x60% -quality 60 -format jpg *.png

    # this will take all png files in your current directory (temp), 
    # resize to 60% (of largest dimension and keep aspect ratio), 
    # set jpg quality to 60 and convert to jpg.
    def thumb
      File.join folder, 'thumbs', file_path

    def folder

    def title
      'property title'

    def alt
      'property alt'

    def self.extension

See the `lib/rails-gallery/rgallery/photos.rb

Then in your properties/show.html.haml:

Responsive Gallery

= render partial: 'gallery/template/responsive'
= render partial: 'gallery/responsive', locals: { photos: }

Note :Currently only the responsive gallery uses a template, and thus requires rendering an extra partial.

Slideshow Gallery

= render partial: 'gallery/slideshow', locals: { photos: }


= render partial: 'gallery/galleria', locals: { photos: }

All galleries should follow this convention (or as close as possible)


Note that all gallery labels are rendered using Rails I18n I18n.t. You should include appropriate translations for the following keys under 'rgallery':

  • previous
  • next
  • photos_loading

The engine includes a config/locales/rails_gallery.yml file, currently only with english translation mappings. Include a config/locales/rails_gallery.yml file in your Rails app and override or supply you additional translation mappings ;)

View helpers

There are also some view helpers included in rails-gallery/view_helper.rb

= gallery_image type, photo

Simple example:

Iterate all photos as a "single page".

- photos.all.each do |photo|
  = gallery_image :responsive, photo`

Pages example:

Iterate photos, one page at a time.

- photos.pages.each do |photo|
  = gallery_image :responsive, photo`

Advanced example:

Iterate photos, first page visible, then remaining pages invisible.

  - do |photo|
    = gallery_image :responsive, photo`

- photos.pages.remainder.each do |page|
    - do |photo|
      = gallery_image :responsive, photo`


Adding more galleries

Simply follow the existing conventions (see the code).


Add the gallery name to the #galleries class method of the ViewHelper and create a module for that gallery with a [name]_gallery_image(photo) method.

Then add gallery client-side pieces to the assets folder following conventions and make sure that your css files (and possible js files) references the icons used (and any other asset) correctly using /assets/ in the path ;)


Would perhaps be nice to allow pages/albums to have info assigned, such as title and/or description, tags etc. ?

Contributing to rails-gallery

  • Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
  • Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
  • Fork the project.
  • Start a feature/bugfix branch.
  • Commit and push until you are happy with your contribution.
  • Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
  • Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.


Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for further details.

Something went wrong with that request. Please try again.