Skip to content

Commit

Permalink
Merge branch 'master' of github.com:nicolas-t/Chocolat
Browse files Browse the repository at this point in the history
  • Loading branch information
@nicolas-t
nicolas-t committed Mar 4, 2016
2 parents 38830db + 101dd72 commit 530d54f
Showing 1 changed file with 16 additions and 50 deletions.
66 changes: 16 additions & 50 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,56 +39,22 @@ $(document).ready(function(){
-----------

### Parameters

**container :** `default:window`
Sets whether viewer will open and fill the whole page (`default`) , or whether it should open in a particular block of the page. For example ` #container2` in this case the height and width of the block must be defined.
values can be : window, selector, jQuery element, or a node

**imageSelector :** `default : '.chocolat-image'`
Selector to find images in the parent element (on which chocolat is called)

**linkImages :** `default : true `
Sets whether we can switch from one image to another, within the same call, without closing the viewer (`true`) , or if the images remain independent (`false`).
Warning: if `LinkImage`: is `false` then `displayAsALink` must be worth `false` too. Otherwise we can only view the first image in the set.

**setTitle :** `default : ''`
Title of the set. Can also be defined from the html, with the `data-chocolat-title` attribute

**className :** `default : ''`
Add a custom css class to the parent of the lightbox

**imageSize :** `default : 'default'`
Can be `'default'`, `'contain'`, `'native'`, or `'cover'`.
`default` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions
`'contain'` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window
`'cover'` : the image cover the window, no white space are displayed.
more informations & exemple about contain/cover : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images
`'native'` : the image is never streched nor shrinked, always displayed at native dimensions

**fullScreen :** `default : false`
HTML5 new feature. Hides the browser.

**loop :** `default : false`
Last image + 1 leads to first image & first image - 1 leads to last image.

**duration :** `default : 300`
Animations duration

**firstImage :** `default : 0`
Index of the image that you want to start the series.

**lastImage :** `default : 0`
Index of the image that you want to end the series.

**separator2 :** `default : '/'`
Text between the number of the image and the number of images in the set, does not matter.

**images :** `default : []`
Array of object representing the set images `[{src:'img1.jpg'}, {src:'img1.jpg'}, ...]`
You can also specify image title `[{src:'img1.jpg', title: 'title'}, ..]`

**setIndex :** `default : 0`
Set index. yes.
| Name | Default | Description |
|---------------|---------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| container | `window` | Sets whether viewer will open and fill the whole page (`default`), or whether it should open in a particular block of the page. For example ` #container2`, in this case the height and width of the block must be defined.values can be : window, selector, jQuery element, or a node |
| imageSelector | `'.chocolat-image'` | Selector to find images in the parent element (on which chocolat is called) |
| linkImages | `true` | Sets whether we can switch from one image to another, within the same call, without closing the viewer (`true`) , or if the images remain independent (`false`). <br> Warning: if `LinkImage`: is `false` then `displayAsALink` must be worth `false` too. <br>Otherwise we can only view the first image in the set. |
| setTitle | `''` | Title of the set. Can also be defined from the html, with the `data-chocolat-title` attribute |
| className | `''` | Add a custom css class to the parent of the lightbox |
| imageSize | 'default' | Can be `'default'`, `'contain'`, `'native'`, or `'cover'`. <br>`default` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's not streched, only displayed at native dimensions. <br>`'contain'` : if the image is bigger than the window it's resized to fit, else if the image is smaller than the window it's streched, to fit the window. <br>`'cover'` : the image cover the window, no white space are displayed. More informations & exemple about contain/cover [here](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images). <br>`'native'` : the image is never streched nor shrinked, always displayed at native dimensions |
| fullScreen | `false` | Allow fullscreen browsing (hides the browser window) |
| loop | `false` | Last image + 1 leads to first image & first image - 1 leads to last image. |
| duration | `300` | Animations duration |
| firstImage | `0` | Index of the image that you want to start the series. |
| lastImage | `0` | Index of the image that you want to end the series. |
| separator2 | `'/'` | Text between the number of the image and the number of images in the set, does not matter. |
| images | `[]` | Array of object representing the set images `[{src:'img1.jpg'}, {src:'img1.jpg'}, ...] ` <br> You can also specify image title `[{src:'img1.jpg', title: 'title'}, ..]` |
| setIndex | `0` | Set index. yes. | |

### API

Expand Down

0 comments on commit 530d54f

Please sign in to comment.