<commit_before># Photo Gallery components for Rails

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

## Usage

`gem 'rails-gallery'

## Galleries included

* slideshow
* responsive
* galleria

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

## Configuration

In `application.css` manifest file:

```css
/*
 * require responsive-gallery
 * require gallery/responsive/elastislide
 * require gallery/responsive/style
 * require gallery/slideshow
 * require gallery/galleria
*/
```

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

```
@import 'gallery/responsive/elastislide';
@import 'gallery/responsive/style';
@import 'gallery/slideshow';
@import 'gallery/galleria';
```

In `application.js` manifest file:

```javascript
//= require gallery/responsive
//= require gallery/slideshow
//= require gallery/galleria

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

## Minimalistic Slideshow gallery

See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info.


### Customization

Pls Fill in here ;)

## Responsive gallery

See [responsive-image-gallery](http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/) for more info.

### Customization

*Remove thumbnails*

Change `mode = 'carousel'` to `'fullview'`

*Remove 'mode' bar*

```css
.rg-view{
  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 );` (~ line 103):

```javascript
window.setInterval(function(){
_navigate( ‘right’ );
}, 5000);
```

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

## Galleria

See [galleria.io](http://galleria.io) 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

```ruby
class PropertiesController < ApplicationController
  def show
    @property = property
  end
<commit_msg>fancybox customization example<commit_after># Photo Gallery components for Rails

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

## Usage

`gem 'rails-gallery'

## Galleries included

* slideshow
* responsive
* galleria

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

## Configuration

In `application.css` manifest file:

```css
/*
 * require responsive-gallery
 * require gallery/responsive/elastislide
 * require gallery/responsive/style
 * require gallery/slideshow
 * require gallery/galleria
*/
```

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

```
@import 'gallery/responsive/elastislide';
@import 'gallery/responsive/style';
@import 'gallery/slideshow';
@import 'gallery/galleria';
```

In `application.js` manifest file:

```javascript
//= require gallery/responsive
//= require gallery/slideshow
//= require gallery/galleria

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

## Minimalistic Slideshow gallery

See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info.


### Customization

Pls Fill in here ;)

## Responsive gallery

See [responsive-image-gallery](http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/) for more info.

### Customization

*Remove thumbnails*

Change `mode = 'carousel'` to `'fullview'`

*Remove 'mode' bar*

```css
.rg-view{
  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 );`

```javascript
window.setInterval(function(){
  _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 

```javascript
$(document).ready(function() {
  $(“.fancybox”).fancybox();
});
```

## Galleria

See [galleria.io](http://galleria.io) 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

```ruby
class PropertiesController < ApplicationController
  def show
    @property = property
  end

{'fraction_non_alphanumeric': 0.13050934659578117, 'fraction_numerical': 0.011147316069284856, 'mean_word_length': 4.410018552875695, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4566101', 'n_tokens_mistral': 2015, 'n_tokens_neox': 1815, 'n_words': 574}