Documentation

Options

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