var options = { ... }
var elementRef = document.getElementById('gallery');
// The gallery accepts a literal as second argument for options
var gallery = new Natural(elementRef, options);
gallery.init();Natural and Responsive Square options
| Name | Type | Default | Description | Docs |
|---|---|---|---|---|
| rowHeight | Number | 400 | Maximum height for each row. | |
| ratioLimit | Number | {min: number, max: number} | Prevents narrow images by forcing the ratio to be in the given limits. min:1 and max:1 produce squares |
Square options
| Name | Type | Default | Description | Docs |
|---|---|---|---|---|
| itemsPerRow | Number | 4 | Number of columns for grid. |
Masonry options
| Name | Type | Default | Description | Docs |
|---|---|---|---|---|
| columnWidth | Number | 300 | Maximum width for each column. | |
| ratioLimit | Number | {min: number, max: number} | Prevents narrow images by forcing the ratio to be in the given limits. min:1 and max:1 produce squares |
Options summary for all galleries
| Name | Type | Default | Description | Docs |
|---|---|---|---|---|
| gap | Number | 3 | Number of pixels between items | |
| rowsPerPage | Number | 0 | Number of rows per page when positive. When 0, the infinite scroll is activated. | |
| showLabels | String | hover | Defines when the item's labels are shown. Accepts hover, always and never |
|
| lightbox | Boolean | False | Zoom images on click | Docs |
| photoSwipeOptions | Literal | null | Options specific to PhotoSwipe. | Docs |
| minRowsAtStart | Number | 2 | Number of rows to display when gallery initialises | |
| selectable | Boolean | false | Whether the gallery accepts or not items to be selectable by user | |
| activable | Boolean | false | If images have no link, but label has to be rendered as a button. Should be used with activable event | Docs |
| infiniteScrollOffset | Number | 0 | Number of pixels from the bottom of the gallery to offset the detection of the scroll event. If negative, the infinite scroll will expand the gallery before the bottom is visible in the viewport. If positive, the infinite scroll will expand the gallery after the bottom enters the viewport. Be sure to have at least as much space free under the gallery or infinite scroll will never expand. |
|
| backgroundSize | string | cover |
Applies a "background-size" compatible value to images. Use "auto" to prevent client side resizing and improve rendering performances. Resizing big pictures is very CPU and bandwidth consuming. If disabled, be sure the image minimum size is bigger than computed size. 
|
|
| backgroundPosition | string | center |
Applies a "background-position" compatible value to images. For example 0% 100% or top left |
Lightbox
If true, opens a PhotoSwipe gallery on zoom event. See interactions and PhotoSwipe for more about those two aspects.
In order to use PhotoSwipe, you'll need to add its template to your html and include its assets.
Photoswipe assets
Natural-gallery-js distributed files don't include PhotoSwipe sources. You need to add them by yourself before including natural assets.
<link rel="stylesheet" href="assets/photoswipe/photoswipe.css">
<link rel="stylesheet" href="assets/photoswipe/default-skin/default-skin.css">
<script src="assets/photoswipe/photoswipe.min.js" defer></script>
<script src="assets/photoswipe/photoswipe-ui-default.min.js" defer></script>Photoswipe template
There is no default template provided by natural-gallery-js, you have to add one by yourself.
Here's an example of PhotoSwipe template.
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- todo: photoswipe template is no longer necessary, remove later -->
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>Photoswipe usage
In this example we select the PhotoSwipe template by class name, and provide reference to gallery constructor as third argument.
You can find all the PhotoSwipe options here. The options "index" and "loop" are ignored because they are manipulated by the gallery itself.
window.addEventListener('load', function() {
var options = {
...
photoSwipeOptions: { ... }
};
// Get reference of gallery container
var elementRef = document.getElementById('gallery');
// Get reference of photoswipe element
var photoswipeRef = document.getElementsByClassName('pswp')[0];
var gallery = new Natural(elementRef, options, photoswipeRef);
gallery.init();
}An error is output to console if lightbox option is set to true but there is no PhotoSwipe reference provided.