Documentation

Options

autoStartAtAlbumnumber1
Index of album which will be loaded by auto start.
JGallery.create(albums,{
    "autoStartAtAlbum": 1
});
Try it »
JGallery.create(albums,{
    "autoStartAtAlbum": 2
});
Try it »
autoStartAtItemnumber1
Index of item which will be loaded by auto start.
JGallery.create(albums,{
    "autoStartAtItem": 1
});
Try it »
JGallery.create(albums,{
    "autoStartAtItem": 2
});
Try it »
JGallery.create(albums,{
    "autoStartAtItem": 3
});
Try it »
backgroundColorstring'#000'
Background color for jGallery container.
JGallery.create(albums,{
    "backgroundColor": '#ffffff'
});
Try it »
JGallery.create(albums,{
    "backgroundColor": 'silver'
});
Try it »
browserHistorybooleantrue
If set as 'true', changes of active item will be saved in browser history.
JGallery.create(albums,{
    "browserHistory": true
});
Try it »
JGallery.create(albums,{
    "browserHistory": false
});
Try it »
canMinimizeThumbnailsbooleantrue
If set as 'true', you can minimize thumbnails(only when 'thumbnails' parameter set as 'true').
JGallery.create(albums,{
    "canMinimizeThumbnails": true
});
Try it »
JGallery.create(albums,{
    "canMinimizeThumbnails": false
});
Try it »
canChangePreviewSizebooleantrue
If set as 'true', you can change preview size (only for images).
JGallery.create(albums,{
    "canChangePreviewSize": true
});
Try it »
JGallery.create(albums,{
    "canChangePreviewSize": false
});
Try it »
itemOnHide(p: { album: Album, item: AlbumItem }) => any() => {}
Custom function that will be called after hide item.
JGallery.create(albums,{
    "itemOnHide": function() { console.log('called') }
});
Try it »
itemOnLoad(p: { album: Album, item: AlbumItem }) => any() => {}
Custom function that will be called after load item.
JGallery.create(albums,{
    "itemOnLoad": function() { console.log('called') }
});
Try it »
itemOnShow(p: { album: Album, item: AlbumItem }) => any() => {}
Custom function that will be called after show item.
JGallery.create(albums,{
    "itemOnShow": function() { console.log('called') }
});
Try it »
navigationOnPreviewClickbooleantrue
If set as 'true', clicking in preview area will change active item(to next if click on right side, or previous if click on left side).
JGallery.create(albums,{
    "navigationOnPreviewClick": true
});
Try it »
JGallery.create(albums,{
    "navigationOnPreviewClick": false
});
Try it »
onChange(p: { album: Album, item: AlbumItem, prevItem: AlbumItem }) => any() => {}
Custom function that will be called before change (hide) item.
JGallery.create(albums,{
    "onChange": function() { console.log('called') }
});
Try it »
previewDraggablebooleantrue
If set as 'true', you can drag image in preview (only for preview size 'auto').
JGallery.create(albums,{
    "previewDraggable": true
});
Try it »
JGallery.create(albums,{
    "previewDraggable": false
});
Try it »
previewSizeSizeSize.cover
Size of preview for images.
JGallery.create(albums,{
    "previewSize": 'cover'
});
Try it »
JGallery.create(albums,{
    "previewSize": 'contain'
});
Try it »
JGallery.create(albums,{
    "previewSize": 'auto'
});
Try it »
slideShowbooleantrue
If set as 'true', option slideshow is enabled.
JGallery.create(albums,{
    "slideShow": true
});
Try it »
JGallery.create(albums,{
    "slideShow": false
});
Try it »
slideShowAutoStartbooleanfalse
If set as 'true', slideshow will be started immediately after initializing jGallery(only when 'slideshow' has been set as true).
JGallery.create(albums,{
    "slideShowAutoStart": true
});
Try it »
JGallery.create(albums,{
    "slideShowAutoStart": false
});
Try it »
slideShowIntervalnumber4000
Time (in ms) between change of photos for slideshow(only when 'slideshow' has been set as true).
JGallery.create(albums,{
    "slideShowInterval": 3000,
    "slideShowAutoStart": true
});
Try it »
JGallery.create(albums,{
    "slideShowInterval": 6000,
    "slideShowAutoStart": true
});
Try it »
JGallery.create(albums,{
    "slideShowInterval": 10000,
    "slideShowAutoStart": true
});
Try it »
textColorstring'#fff'
Color of text and icons.
JGallery.create(albums,{
    "textColor": '#000000'
});
Try it »
JGallery.create(albums,{
    "textColor": 'rgb(0,153,221)'
});
Try it »
thumbnailHeightstring'64px'
Height(pixels) of thumbnails.
JGallery.create(albums,{
    "thumbnailHeight": '50px'
});
Try it »
JGallery.create(albums,{
    "thumbnailHeight": '75px'
});
Try it »
JGallery.create(albums,{
    "thumbnailHeight": '125px'
});
Try it »
thumbnailHeightOnFullScreenstring'128px'
Height(pixels) of thumbnails for thumbnails displayed in full-screen.
JGallery.create(albums,{
    "thumbnailHeightOnFullScreen": '125px'
});
Try it »
JGallery.create(albums,{
    "thumbnailHeightOnFullScreen": '160px'
});
Try it »
JGallery.create(albums,{
    "thumbnailHeightOnFullScreen": '200px'
});
Try it »
thumbnailWidthstring'64px'
Width(pixels) of thumbnails.
JGallery.create(albums,{
    "thumbnailWidth": '50px'
});
Try it »
JGallery.create(albums,{
    "thumbnailWidth": '75px'
});
Try it »
JGallery.create(albums,{
    "thumbnailWidth": '125px'
});
Try it »
thumbnailWidthOnFullScreenstring'128px'
Width(pixels) of thumbnails for thumbnails displayed in full-screen.
JGallery.create(albums,{
    "thumbnailWidthOnFullScreen": '125px'
});
Try it »
JGallery.create(albums,{
    "thumbnailWidthOnFullScreen": '160px'
});
Try it »
JGallery.create(albums,{
    "thumbnailWidthOnFullScreen": '200px'
});
Try it »
thumbnailsbooleantrue
If set as 'true', thumbnails will be displayed.
JGallery.create(albums,{
    "thumbnails": true
});
Try it »
JGallery.create(albums,{
    "thumbnails": false
});
Try it »
thumbnailsFullScreenbooleantrue
If set as 'true', thumbnails will be displayed in full-screen.
JGallery.create(albums,{
    "thumbnailsFullScreen": true
});
Try it »
JGallery.create(albums,{
    "thumbnailsFullScreen": false
});
Try it »
thumbnailsPositionThumbnailsPosition'bottom'
Thumbnails position(only when 'thumbnails' parameter set as 'true').
JGallery.create(albums,{
    "thumbnailsPosition": 'top'
});
Try it »
JGallery.create(albums,{
    "thumbnailsPosition":  'bottom'
});
Try it »
JGallery.create(albums,{
    "thumbnailsPosition": 'left'
});
Try it »
JGallery.create(albums,{
    "thumbnailsPosition": 'right'
});
Try it »
thumbnailsVisiblebooleantrue
If set as 'true', thumbnails will be displayed on gallery initialization.
JGallery.create(albums,{
    "thumbnailsVisible": true
});
Try it »
JGallery.create(albums,{
    "thumbnailsVisible": false
});
Try it »
tooltipChangeSizestring'Change size'
Text of tooltip which will be displayed next to icon for change preview size(only for images).
JGallery.create(albums,{
    "tooltipChangeSize": 'Change size'
});
Try it »
JGallery.create(albums,{
    "tooltipChangeSize": 'Zmień rozmiar'
});
Try it »
tooltipSeeAllItemsstring'See all items'
Text of tooltip which will be displayed next to icon for change thumbnails view.
JGallery.create(albums,{
    "tooltipSeeAllItems": 'See all items'
});
Try it »
JGallery.create(albums,{
    "tooltipSeeAllItems": 'Zobacz wszystkie elementy'
});
Try it »
tooltipSeeOtherAlbumsstring'See other albums'
Text of tooltip which will be displayed next to icon for change album(if your jGallery has more than one album).
JGallery.create(albums,{
    "tooltipSeeOtherAlbums": 'See other albums'
});
Try it »
JGallery.create(albums,{
    "tooltipSeeOtherAlbums": 'Zobacz pozostałe albumy'
});
Try it »
tooltipSlideShowPausestring'Pause slide show'
Text of tooltip which will be displayed next to icon for pause slideshow.
JGallery.create(albums,{
    "tooltipSlideShowPause": 'Pause slide show'
});
Try it »
JGallery.create(albums,{
    "tooltipSlideShowPause": 'Zatrzymaj pokaz slajdów'
});
Try it »
tooltipSlideShowStartstring'Start slide show'
Text of tooltip which will be displayed next to icon for play slideshow.
JGallery.create(albums,{
    "tooltipSlideShowStart": 'Start slide show'
});
Try it »
JGallery.create(albums,{
    "tooltipSlideShowStart": 'Uruchom pokaz slajdów'
});
Try it »
tooltipThumbnailsTogglestring'Toogle whumbnails'
Text of tooltip which will be displayed next to icon for toggle thumbnails.
JGallery.create(albums,{
    "tooltipThumbnailsToggle": 'Toggle thumbnails'
});
Try it »
JGallery.create(albums,{
    "tooltipThumbnailsToggle": 'Pokaż/ukryj miniatury'
});
Try it »
transitionAnimateSliceHeightbooleanfalse
If set as 'true', slices' height will be animated.
JGallery.create(albums,{
    "transitionAnimateSliceHeight": true,
    "transitionAnimateSliceWidth": false,
    "transitionXAxis": false,
    "transitionYAxis": true
});
Try it »
JGallery.create(albums,{
    "transitionAnimateSliceHeight": false
});
Try it »
transitionAnimateSliceWidthbooleantrue
If set as 'true', slices' width will be animated.
JGallery.create(albums,{
    "transitionAnimateSliceWidth": true
});
Try it »
JGallery.create(albums,{
    "transitionAnimateSliceWidth": false,
    "transitionAnimateSliceHeight": true,
    "transitionXAxis": false,
    "transitionYAxis": true
});
Try it »
transitionDetailsnumber1
Specifies how many slices will have transition mask.
JGallery.create(albums,{
    "transitionDetails": 1
});
Try it »
JGallery.create(albums,{
    "transitionDetails": 0.25
});
Try it »
JGallery.create(albums,{
    "transitionDetails": 0.5
});
Try it »
JGallery.create(albums,{
    "transitionDetails": 2
});
Try it »
JGallery.create(albums,{
    "transitionDetails": 4
});
Try it »
transitionDurationnumber250
Duration(in ms) of transition between items.
JGallery.create(albums,{
    "transitionDuration": 500
});
Try it »
JGallery.create(albums,{
    "transitionDuration": 250
});
Try it »
JGallery.create(albums,{
    "transitionDuration": 1000
});
Try it »
JGallery.create(albums,{
    "transitionDuration": 2000
});
Try it »
transitionOpacitybooleanfalse
If set as 'true', slices' opacity will be animated.
JGallery.create(albums,{
    "transitionOpacity": true
});
Try it »
JGallery.create(albums,{
    "transitionOpacity": false
});
Try it »
transitionOriginXnumber.5
Specifies center point of transition at X axis
JGallery.create(albums,{
    "transitionOriginX": 0.5
});
Try it »
JGallery.create(albums,{
    "transitionOriginX": 0
});
Try it »
JGallery.create(albums,{
    "transitionOriginX": 1
});
Try it »
transitionOriginYnumber.5
Specifies center point of transition at Y axis
JGallery.create(albums,{
    "transitionOriginY": 0.5,
    "transitionAnimateSliceWidth": false,
    "transitionAnimateSliceHeight": true,
    "transitionXAxis": false,
    "transitionYAxis": true
});
Try it »
JGallery.create(albums,{
    "transitionOriginY": 0,
    "transitionAnimateSliceWidth": false,
    "transitionAnimateSliceHeight": true,
    "transitionXAxis": false,
    "transitionYAxis": true
});
Try it »
JGallery.create(albums,{
    "transitionOriginY": 1,
    "transitionAnimateSliceWidth": false,
    "transitionAnimateSliceHeight": true,
    "transitionXAxis": false,
    "transitionYAxis": true
});
Try it »
transitionXAxisbooleantrue
If set as 'true', transition mask will be sliced along X axis.
JGallery.create(albums,{
    "transitionXAxis": true
});
Try it »
JGallery.create(albums,{
    "transitionXAxis": false
});
Try it »
transitionYAxisbooleanfalse
If set as 'true', transition mask will be sliced along Y axis.
JGallery.create(albums,{
    "transitionYAxis": true,
    "transitionAnimateSliceHeight": true
});
Try it »
JGallery.create(albums,{
    "transitionYAxis": false
});
Try it »
transitionEasingFunction(time: number) => numbert => Math.sin(t*1.5707963267948966)
Specifies transition easing. Argument 'time' is value between 0, 1.
JGallery.create(albums,{
    "transitionEasingFunction": function(time) { return time; }
});
Try it »