<commit_before>#FilmRoll
**A lightweight jQuery carousel**


##Description

**FilmRoll** is a lightweight jQuery carousel that focuses on one item at a time, centering it in the view, regardless of the relative sizes of the carousel items.

[**SEE DEMO**](http://straydogstudio.github.io/film_roll)

---

##Features

- Centers one item at a time in the view
- Uses css classes for easy styling / transitions
- Provides previous / next buttons and pagination automatically
- Defaults to auto scroll with pause on hover
- Supports [full screen usage](https://straydogstudio.github.io/film_roll/fullscreen.html)
- Yet to be implemented:
    - Swipe for mobile
    - Simple external link using classes/ids (For now [see Javascript below](#using-javascript))

##Usage

###Installation

- Download [jquery.film_roll.min.js](https://raw.github.com/straydogstudio/film_roll/master/js/jquery.film_roll.min.js) and place it in your scripts directory
- Link it in your web page: `<script src="js/jquery.film_roll.js"></script>`

###Markup

FilmRoll expects a parent div with children div elements, though it should work with most any child element:

```html
	<div id="film_roll">
	  <div>
	    <a href="..."><img src="..."> </a>
	  </div>
	  <div>
	    <a href="..."><img src="..."> </a>
	  </div>
	</div>
```

Using non `<div>` tags as children is untested, but may work, depending on the tag and styling.

###Create

Create the FilmRoll instance on dom:ready:

```javascript
  jQuery(function() {
    film_roll = new FilmRoll({
         container: '#container_id',
         prev: '#left_button_id',
         next: '#right_button_id',
       });
  })
```

###Configuration
**var film_roll = new FilmRoll({container: '#container_id', OPTIONS})**

Params:

- **:container** (Mandatory): The div that contains all elements that are to be displayed.

Options:

- **:animation**: The slide animation duration. 1/4 of interval by default. (See **interval** option.)
- **:height** Set the height of the film_roll wrapper (which sits inside the container.) Options are:
    - **Not set** (default): The wrapper will be the height of the container (100%), with a min-height of the tallest element.
    - **Integer/string**: Set the height directly. Can be an integer (pixels) or a string ('75%'.)
- **:interval**: The automatic scroll interval. 4 seconds by default. To turn off the automatic scroll, see the **scroll** option.
- **:next**: The jquery selector for the next button. Creates its own button by default. (See **prev** option.)
- **:no_css**: Do not add [default css](#default-css) to page. You will want to include it otherwise.
- **:pager**: Display pagination dots at the bottom of the carousel. True by default.
- **:prev**: The jquery selector for the previous button. Creates its own button by default. (See **next** option.)
- **:scroll**: Automatically scroll the carousel. True by default.
- **:shuttle_width**: The starting shuttle width until the page loads. Defaults to 10000. See [troubleshooting](#double-rows-on-start-shuttle-width).
- **:start_height**: A starting height to give the carousel. Use only if you are having content flashes.
- **:start_index**: The index of the first element to center
- **:vertical_center**: Center children vertically in the container. Requires a browser with **:before** CSS pseudo class support. This is useful for a full screen carousel.

###Examples
View the [project page for working examples](https://straydogstudio.github.io/film_roll).

###On load vs. dom:loaded

FilmRoll is written to be called on dom:ready. It inserts all markup before display and configures itself to resize itself once the content is loaded (after the window.load event) because **it must have content to center an item on the page**.

If, for some reason, you need to call FilmRoll on window.load, or create it using an in page script, trigger the width configuration manually:

```javascript
film_roll_var.configureWidths()
```

###Styling

FilmRoll takes the following markup:

```html
  <div id="id_or_class_for_selection">
    <div>...</div>
    <div>...</div>
  </div>
```

and wraps all children with two divs, adds the class `film_roll_child` and a style element to the children, and adds the 'active' class to the centered child:

```html
  <div id="id_or_class_for_selection">
    <div class="film_roll_wrapper">
      <div class="film_roll_shuttle">
        <div class="active film_roll_child">…</div>
        <div class="film_roll_child">…</div>
      </div>
    </div>
  </div>
```

Use these classes to apply styling and effects. See the [example page](https://straydogstudio.github.io/film_roll).

### Full Screen usage

To use FilmRoll full screen, do the following:

- Using CSS, configure your container div to be 100% height (and width if necessary):

```css
#film_roll { height: 100%; }
```

- Do not pass a height when you instantiate the FilmRoll.
- To align the children to vertical center, use the vertical_center option:

```javascript
var film_roll = new FilmRoll({
    container: '#film_roll',
    vertical_center: true,
});
```

- If you leave the pager enabled, you'll want to bump it back up with CSS:

```css
.film_roll_pager {
    position: relative;
    top: -20px;
}
```

See an [example here](https://straydogstudio.github.io/film_roll/fullscreen.html).

## Using Javascript

If you wish to move to a specific child using external javascript, use the `moveToIndex` or `moveToChild` functions:

```javascript
var film_roll = new FilmRoll(...);

$('#some_link_selector').click(function() {
  film_roll.moveToIndex(3);
  //or
  //film_roll.moveToChild($('#some_child_selector'));
  return false;
})
```<commit_msg>Fix exampe links<commit_after>#FilmRoll
**A lightweight jQuery carousel**


##Description

**FilmRoll** is a lightweight jQuery carousel that focuses on one item at a time, centering it in the view, regardless of the relative sizes of the carousel items.

[**SEE DEMO**](http://straydogstudio.github.io/film_roll)

---

##Features

- Centers one item at a time in the view
- Uses css classes for easy styling / transitions
- Provides previous / next buttons and pagination automatically
- Defaults to auto scroll with pause on hover
- Supports [full screen usage](http://straydogstudio.github.io/film_roll/fullscreen.html)
- Yet to be implemented:
    - Swipe for mobile
    - Simple external link using classes/ids (For now [see Javascript below](#using-javascript))

##Usage

###Installation

- Download [jquery.film_roll.min.js](https://raw.github.com/straydogstudio/film_roll/master/js/jquery.film_roll.min.js) and place it in your scripts directory
- Link it in your web page: `<script src="js/jquery.film_roll.js"></script>`

###Markup

FilmRoll expects a parent div with children div elements, though it should work with most any child element:

```html
	<div id="film_roll">
	  <div>
	    <a href="..."><img src="..."> </a>
	  </div>
	  <div>
	    <a href="..."><img src="..."> </a>
	  </div>
	</div>
```

Using non `<div>` tags as children is untested, but may work, depending on the tag and styling.

###Create

Create the FilmRoll instance on dom:ready:

```javascript
  jQuery(function() {
    film_roll = new FilmRoll({
         container: '#container_id',
         prev: '#left_button_id',
         next: '#right_button_id',
       });
  })
```

###Configuration
**var film_roll = new FilmRoll({container: '#container_id', OPTIONS})**

Params:

- **:container** (Mandatory): The div that contains all elements that are to be displayed.

Options:

- **:animation**: The slide animation duration. 1/4 of interval by default. (See **interval** option.)
- **:height** Set the height of the film_roll wrapper (which sits inside the container.) Options are:
    - **Not set** (default): The wrapper will be the height of the container (100%), with a min-height of the tallest element.
    - **Integer/string**: Set the height directly. Can be an integer (pixels) or a string ('75%'.)
- **:interval**: The automatic scroll interval. 4 seconds by default. To turn off the automatic scroll, see the **scroll** option.
- **:next**: The jquery selector for the next button. Creates its own button by default. (See **prev** option.)
- **:no_css**: Do not add [default css](#default-css) to page. You will want to include it otherwise.
- **:pager**: Display pagination dots at the bottom of the carousel. True by default.
- **:prev**: The jquery selector for the previous button. Creates its own button by default. (See **next** option.)
- **:scroll**: Automatically scroll the carousel. True by default.
- **:shuttle_width**: The starting shuttle width until the page loads. Defaults to 10000. See [troubleshooting](#double-rows-on-start-shuttle-width).
- **:start_height**: A starting height to give the carousel. Use only if you are having content flashes.
- **:start_index**: The index of the first element to center
- **:vertical_center**: Center children vertically in the container. Requires a browser with **:before** CSS pseudo class support. This is useful for a full screen carousel.

###Examples
View the [project page for working examples](http://straydogstudio.github.io/film_roll).

###On load vs. dom:loaded

FilmRoll is written to be called on dom:ready. It inserts all markup before display and configures itself to resize itself once the content is loaded (after the window.load event) because **it must have content to center an item on the page**.

If, for some reason, you need to call FilmRoll on window.load, or create it using an in page script, trigger the width configuration manually:

```javascript
film_roll_var.configureWidths()
```

###Styling

FilmRoll takes the following markup:

```html
  <div id="id_or_class_for_selection">
    <div>...</div>
    <div>...</div>
  </div>
```

and wraps all children with two divs, adds the class `film_roll_child` and a style element to the children, and adds the 'active' class to the centered child:

```html
  <div id="id_or_class_for_selection">
    <div class="film_roll_wrapper">
      <div class="film_roll_shuttle">
        <div class="active film_roll_child">…</div>
        <div class="film_roll_child">…</div>
      </div>
    </div>
  </div>
```

Use these classes to apply styling and effects. See the [example page](http://straydogstudio.github.io/film_roll).

### Full Screen usage

To use FilmRoll full screen, do the following:

- Using CSS, configure your container div to be 100% height (and width if necessary):

```css
#film_roll { height: 100%; }
```

- Do not pass a height when you instantiate the FilmRoll.
- To align the children to vertical center, use the vertical_center option:

```javascript
var film_roll = new FilmRoll({
    container: '#film_roll',
    vertical_center: true,
});
```

- If you leave the pager enabled, you'll want to bump it back up with CSS:

```css
.film_roll_pager {
    position: relative;
    top: -20px;
}
```

See an [example here](http://straydogstudio.github.io/film_roll/fullscreen.html).

## Using Javascript

If you wish to move to a specific child using external javascript, use the `moveToIndex` or `moveToChild` functions:

```javascript
var film_roll = new FilmRoll(...);

$('#some_link_selector').click(function() {
  film_roll.moveToIndex(3);
  //or
  //film_roll.moveToChild($('#some_child_selector'));
  return false;
})
```
{'fraction_non_alphanumeric': 0.12598147331274812, 'fraction_numerical': 0.0038817820908689897, 'mean_word_length': 4.081129538323622, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 65, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6357912', 'n_tokens_mistral': 3448, 'n_tokens_neox': 3281, 'n_words': 1350}