Documentation

  1. Options
  2. HTML classes
  3. Methods

Options

autostartBooleantrue
If set as 'true' jGallery will be started automatically after loading the document(only for full-screen or standard mode).
Possible values: true, false
$( '#gallery' ).jGallery( {
    autostart: true
} );
autostartAtImageNumber1
Number of image which will be loaded by autostart(only when 'autostart' parameter set as 'true').
Examples: 1, 2, 3
$( '#gallery' ).jGallery( {
    autostartAtImage: 1
} );
autostartAtAlbumNumber1
Number of album which will be loaded by autostart(only when 'autostart' parameter set as 'true').
Examples: 1, 2, 3
$( '#gallery' ).jGallery( {
    autostartAtAlbum: 1
} );
backgroundColorString'#fff'
Background color for jGallery container.
Examples: '#ffffff', 'silver'
$( '#gallery' ).jGallery( {
    backgroundColor: '#fff'
} );
browserHistoryBooleantrue
If set as 'true', changes of active image will be saved in browser history.
Possible values: true, false
$( '#gallery' ).jGallery( {
    browserHistory: true
} );
canChangeModeBooleantrue
If set as 'true' you can change display mode(only for full-screen or standard mode).
Possible values: true, false
$( '#gallery' ).jGallery( {
    canChangeMode: true
} );
canCloseBooleanfalse
If set as 'true' you can close jGallery(only for full-screen or standard mode).
Possible values: true, false
$( '#gallery' ).jGallery( {
    canClose: false
} );
canMinimalizeThumbnailsBooleantrue
If set as 'true', you can minimalize thumbnails(only when 'thumbnails' parameter set as 'true').
Possible values: true, false
$( '#gallery' ).jGallery( {
    canMinimalizeThumbnails: true
} );
canZoomBooleantrue
If set as 'true' you can zoom photos.
Possible values: true, false
$( '#gallery' ).jGallery( {
    canZoom: true
} );
disabledOnIE8AndOlderBooleantrue
If set as 'true', jGallery will be blocked for Internet Explorer 8 and older.
Possible values: true, false
$( '#gallery' ).jGallery( {
    disabledOnIE8AndOlder: true
} );
draggableZoomBooleantrue
If set as 'true' you can drag active image.
Possible values: true, false
$( '#gallery' ).jGallery( {
    draggableZoom: true
} );
draggableZoomHideNavigationOnMobileBooleantrue
If set as 'true' navigation of draggable zoom will be hidden when width of window <= 'maxMobileWidth' parameter (default value - 767px)
Possible values: true, false
$( '#gallery' ).jGallery( {
    draggableZoomHideNavigationOnMobile: true
} );
heightString'600px'
Height of jGallery container(only for standard or slider mode).
$( '#gallery' ).jGallery( {
    height: '600px'
} );
hideThumbnailsOnInitBooleanfalse
If set as 'true', thumbnails will be minimized by default, when jGallery will be started(only when 'thumbnails' parameter set as 'true').
Possible values: true, false
$( '#gallery' ).jGallery( {
    hideThumbnailsOnInit: false
} );
itemsArray | nullnull
You can pass images as array (you don't have to create HTML elements).
$( '#gallery' ).jGallery( {
    items: null
} );
maxMobileWidthNumber767
Maximum width(px) for jGallery shows a view for mobile device.
$( '#gallery' ).jGallery( {
    maxMobileWidth: 767
} );
modeString'standard'
Display mode.
Possible values: 'full-screen', 'standard', 'slider'
$( '#gallery' ).jGallery( {
    mode: 'standard'
} );
preloadAllBooleanfalse
If set as 'true', all photos will be loaded before first shown photo.
Possible values: true, false
$( '#gallery' ).jGallery( {
    preloadAll: false
} );
slideshowBooleantrue
If set as 'true', option slideshow is enabled.
Possible values: true, false
$( '#gallery' ).jGallery( {
    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
$( '#gallery' ).jGallery( {
    slideshowAutostart: false
} );
slideshowCanRandomBooleantrue
If set as 'true', you can enable random change photos for slideshow(only when 'slideshow' has been set as true).
Possible values: true, false
$( '#gallery' ).jGallery( {
    slideshowCanRandom: true
} );
slideshowIntervalString'8s'
Time between change of photos for slideshow(only when 'slideshow' has been set as true).
Possible values: '3s', '6s', '10s'
$( '#gallery' ).jGallery( {
    slideshowInterval: '8s'
} );
slideshowRandomBooleanfalse
If set as 'true', photos in slideshow will be changing random(only when 'slideshow' has been set as true and 'slideshowCanRandom' has been set as true).
Possible values: true, false
$( '#gallery' ).jGallery( {
    slideshowRandom: false
} );
swipeEventsBooleantrue
If set as 'true', you can switch to next/prev photo and thumbnails using swipe events.
Possible values: true, false
$( '#gallery' ).jGallery( {
    swipeEvents: true
} );
textColorString'#000'
Color of text and icons.
Examples: '#000000', 'rgb(0,153,221)'
$( '#gallery' ).jGallery( {
    textColor: '#000'
} );
thumbnailsBooleantrue
If set as 'true', thumbnails will be displayed.
Possible values: true, false
$( '#gallery' ).jGallery( {
    thumbnails: true
} );
thumbHeightNumber75
Height(pixels) of thumbnails.
Examples: 50, 75, 125
$( '#gallery' ).jGallery( {
    thumbHeight: 75
} );
thumbHeightOnFullScreenNumber100
Height(pixels) of thumbnails for thumbnails displayed in full-screen.
Examples: 125, 160, 200
$( '#gallery' ).jGallery( {
    thumbHeightOnFullScreen: 100
} );
thumbnailsFullScreenBooleantrue
If set as 'true', thumbnails will be displayed in full-screen.
Possible values: true, false
$( '#gallery' ).jGallery( {
    thumbnailsFullScreen: true
} );
thumbnailsHideOnMobileBooleantrue
If set as 'true', thumbnails will be hidden when width of window <= 'maxMobileWidth' parameter (default value - 767px).
Possible values: true, false
$( '#gallery' ).jGallery( {
    thumbnailsHideOnMobile: true
} );
thumbnailsPositionString'bottom'
Thumbnails position(only when 'thumbnails' parameter set as 'true').
Possible values: 'top', 'bottom', 'left', 'right'
$( '#gallery' ).jGallery( {
    thumbnailsPosition: 'bottom'
} );
thumbTypeString'image'
Thumbnails type(only when 'thumbnails' parameter set as 'true').
Possible values: 'image', 'square', 'number'
$( '#gallery' ).jGallery( {
    thumbType: 'image'
} );
thumbWidthNumber75
Width(pixels) of thumbnails.
Examples: 50, 75, 125
$( '#gallery' ).jGallery( {
    thumbWidth: 75
} );
thumbWidthOnFullScreenNumber100
Width(pixels) of thumbnails for thumbnails displayed in full-screen.
Examples: 125, 160, 200
$( '#gallery' ).jGallery( {
    thumbWidthOnFullScreen: 100
} );
titleBooleantrue
If set as 'true', near photo will be shown title from alt attribute of img.
Possible values: true, false
$( '#gallery' ).jGallery( {
    title: true
} );
titleExpandedBooleanfalse
If set as 'true', in bottom area of zoomed photo will be shown title from alt attribute of img(only when 'title' has been set as true).
Possible values: true, false
$( '#gallery' ).jGallery( {
    titleExpanded: false
} );
tooltipCloseString'Close'
Text of tooltip which will be displayed next to icon for close jgallery(if you set canClose parameter as true).
Examples: 'Close', 'Zamknij'
$( '#gallery' ).jGallery( {
    tooltipClose: 'Close'
} );
tooltipFullScreenString'Full screen'
Text of tooltip which will be displayed next to icon for change display mode.
Examples: 'Full screen', 'Tryb pełnoekranowy'
$( '#gallery' ).jGallery( {
    tooltipFullScreen: 'Full screen'
} );
tooltipRandomString'Random'
Text of tooltip which will be displayed next to icon for random slideshow toggling.
Examples: 'Random', 'Kolejność losowa'
$( '#gallery' ).jGallery( {
    tooltipRandom: 'Random'
} );
tooltipsBooleantrue
If set as 'true', tooltips will be displayed next to icons.
Possible values: true, false
$( '#gallery' ).jGallery( {
    tooltips: true
} );
tooltipSeeAllPhotosString'See all photos'
Text of tooltip which will be displayed next to icon for change thumbnails view.
Examples: 'See all photos', 'Zobacz wszystkie zdjęcia'
$( '#gallery' ).jGallery( {
    tooltipSeeAllPhotos: 'See all photos'
} );
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'
$( '#gallery' ).jGallery( {
    tooltipSeeOtherAlbums: 'See other albums'
} );
tooltipSlideshowString'Slideshow'
Text of tooltip which will be displayed next to icon for play/pause slideshow.
Examples: 'Slideshow', 'Pokaz slajdów'
$( '#gallery' ).jGallery( {
    tooltipSlideshow: 'Slideshow'
} );
tooltipToggleThumbnailsString'Toggle thumbnails'
Text of tooltip which will be displayed next to icon for toggle thumbnails.
Examples: 'Toggle thumbnails', 'Pokaż/ukryj miniatury'
$( '#gallery' ).jGallery( {
    tooltipToggleThumbnails: 'Toggle thumbnails'
} );
tooltipZoomString'Zoom'
Text of tooltip which will be displayed next to icon for zoom photo.
Examples: 'Zoom', 'Powiększenie'
$( '#gallery' ).jGallery( {
    tooltipZoom: 'Zoom'
} );
transitionString'moveToLeft_moveFromRight'
Transition effect for change active image.
Possible values: 'moveToLeft_moveFromRight', 'moveToRight_moveFromLeft', 'moveToTop_moveFromBottom', 'moveToBottom_moveFromTop', 'fade_moveFromRight', 'fade_moveFromLeft', 'fade_moveFromBottom', 'fade_moveFromTop', 'moveToLeftFade_moveFromRightFade', 'moveToRightFade_moveFromLeftFade', 'moveToTopFade_moveFromBottomFade', 'moveToBottomFade_moveFromTopFade', 'moveToLeftEasing_moveFromRight', 'moveToRightEasing_moveFromLeft', 'moveToTopEasing_moveFromBottom', 'moveToBottomEasing_moveFromTop', 'scaleDown_moveFromRight', 'scaleDown_moveFromLeft', 'scaleDown_moveFromBottom', 'scaleDown_moveFromTop', 'scaleDown_scaleUpDown', 'scaleDownUp_scaleUp', 'moveToLeft_scaleUp', 'moveToRight_scaleUp', 'moveToTop_scaleUp', 'moveToBottom_scaleUp', 'scaleDownCenter_scaleUpCenter', 'rotateRightSideFirst_moveFromRight', 'rotateLeftSideFirst_moveFromLeft', 'rotateTopSideFirst_moveFromTop', 'rotateBottomSideFirst_moveFromBottom', 'flipOutRight_flipInLeft', 'flipOutLeft_flipInRight', 'flipOutTop_flipInBottom', 'flipOutBottom_flipInTop', 'rotateFall_scaleUp', 'rotateOutNewspaper_rotateInNewspaper', 'rotatePushLeft_moveFromRight', 'rotatePushRight_moveFromLeft', 'rotatePushTop_moveFromBottom', 'rotatePushBottom_moveFromTop', 'rotatePushLeft_rotatePullRight', 'rotatePushRight_rotatePullLeft', 'rotatePushTop_rotatePullBottom', 'rotatePushBottom_page', 'rotateFoldLeft_moveFromRightFade', 'rotateFoldRight_moveFromLeftFade', 'rotateFoldTop_moveFromBottomFade', 'rotateFoldBottom_moveFromTopFade', 'moveToRightFade_rotateUnfoldLeft', 'moveToLeftFade_rotateUnfoldRight', 'moveToBottomFade_rotateUnfoldTop', 'moveToTopFade_rotateUnfoldBottom', 'rotateRoomLeftOut_rotateRoomLeftIn', 'rotateRoomRightOut_rotateRoomRightIn', 'rotateRoomTopOut_rotateRoomTopIn', 'rotateRoomBottomOut_rotateRoomBottomIn', 'rotateCubeLeftOut_rotateCubeLeftIn', 'rotateCubeRightOut_rotateCubeRightIn', 'rotateCubeTopOut_rotateCubeTopIn', 'rotateCubeBottomOut_rotateCubeBottomIn', 'rotateCarouselLeftOut_rotateCarouselLeftIn', 'rotateCarouselRightOut_rotateCarouselRightIn', 'rotateCarouselTopOut_rotateCarouselTopIn', 'rotateCarouselBottomOut_rotateCarouselBottomIn', 'rotateSidesOut_rotateSidesInDelay', 'rotateSlideOut_rotateSlideIn', 'random'
$( '#gallery' ).jGallery( {
    transition: 'moveToLeft_moveFromRight'
} );
transitionBackwardString'auto'
Transition effect for change active image(when user selected one of previous images).
Possible values: 'auto', 'moveToLeft_moveFromRight', 'moveToRight_moveFromLeft', 'moveToTop_moveFromBottom', 'moveToBottom_moveFromTop', 'fade_moveFromRight', 'fade_moveFromLeft', 'fade_moveFromBottom', 'fade_moveFromTop', 'moveToLeftFade_moveFromRightFade', 'moveToRightFade_moveFromLeftFade', 'moveToTopFade_moveFromBottomFade', 'moveToBottomFade_moveFromTopFade', 'moveToLeftEasing_moveFromRight', 'moveToRightEasing_moveFromLeft', 'moveToTopEasing_moveFromBottom', 'moveToBottomEasing_moveFromTop', 'scaleDown_moveFromRight', 'scaleDown_moveFromLeft', 'scaleDown_moveFromBottom', 'scaleDown_moveFromTop', 'scaleDown_scaleUpDown', 'scaleDownUp_scaleUp', 'moveToLeft_scaleUp', 'moveToRight_scaleUp', 'moveToTop_scaleUp', 'moveToBottom_scaleUp', 'scaleDownCenter_scaleUpCenter', 'rotateRightSideFirst_moveFromRight', 'rotateLeftSideFirst_moveFromLeft', 'rotateTopSideFirst_moveFromTop', 'rotateBottomSideFirst_moveFromBottom', 'flipOutRight_flipInLeft', 'flipOutLeft_flipInRight', 'flipOutTop_flipInBottom', 'flipOutBottom_flipInTop', 'rotateFall_scaleUp', 'rotateOutNewspaper_rotateInNewspaper', 'rotatePushLeft_moveFromRight', 'rotatePushRight_moveFromLeft', 'rotatePushTop_moveFromBottom', 'rotatePushBottom_moveFromTop', 'rotatePushLeft_rotatePullRight', 'rotatePushRight_rotatePullLeft', 'rotatePushTop_rotatePullBottom', 'rotatePushBottom_page', 'rotateFoldLeft_moveFromRightFade', 'rotateFoldRight_moveFromLeftFade', 'rotateFoldTop_moveFromBottomFade', 'rotateFoldBottom_moveFromTopFade', 'moveToRightFade_rotateUnfoldLeft', 'moveToLeftFade_rotateUnfoldRight', 'moveToBottomFade_rotateUnfoldTop', 'moveToTopFade_rotateUnfoldBottom', 'rotateRoomLeftOut_rotateRoomLeftIn', 'rotateRoomRightOut_rotateRoomRightIn', 'rotateRoomTopOut_rotateRoomTopIn', 'rotateRoomBottomOut_rotateRoomBottomIn', 'rotateCubeLeftOut_rotateCubeLeftIn', 'rotateCubeRightOut_rotateCubeRightIn', 'rotateCubeTopOut_rotateCubeTopIn', 'rotateCubeBottomOut_rotateCubeBottomIn', 'rotateCarouselLeftOut_rotateCarouselLeftIn', 'rotateCarouselRightOut_rotateCarouselRightIn', 'rotateCarouselTopOut_rotateCarouselTopIn', 'rotateCarouselBottomOut_rotateCarouselBottomIn', 'rotateSidesOut_rotateSidesInDelay', 'rotateSlideOut_rotateSlideIn', 'random'
$( '#gallery' ).jGallery( {
    transitionBackward: 'auto'
} );
transitionColsNumber1
Number of columns in the image divided into columns.
Examples: 1, 2, 3, 4, 5, 6
$( '#gallery' ).jGallery( {
    transitionCols: 1
} );
transitionDurationString'0.7s'
Duration of transition between photos.
Possible values: '0.2s', '0.5s', '1s'
$( '#gallery' ).jGallery( {
    transitionDuration: '0.7s'
} );
transitionRowsNumber1
Number of columns in the image divided into rows.
Examples: 1, 2, 3, 4, 5, 6
$( '#gallery' ).jGallery( {
    transitionRows: 1
} );
transitionTimingFunctionString'cubic-bezier(0,1,1,1)'
Timig function for showing photo.
Possible values: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(0.5,-0.5,0.5,1.5)', 'cubic-bezier(0,1,1,1)'
$( '#gallery' ).jGallery( {
    transitionTimingFunction: 'cubic-bezier(0,1,1,1)'
} );
transitionWaveDirectionString'forward'
Direction of animation(only when 'transitionCols' > 1 or 'transitionRows' > 1).
Possible values: 'forward', 'backward'
$( '#gallery' ).jGallery( {
    transitionWaveDirection: 'forward'
} );
widthString'100%'
Width of jGallery container(only for standard or slider mode).
$( '#gallery' ).jGallery( {
    width: '100%'
} );
zoomSizeString'fit'
Size of zoomed photo(only for full-screen or standard mode).
Possible values: 'fit', 'original', 'fill'
$( '#gallery' ).jGallery( {
    zoomSize: 'fit'
} );
afterLoadPhotoFunctionfunction() {}
Custom function that will be called after loading photo.
Examples: function(link,thumbnail) { console.log( link,thumbnail ) }
$( '#gallery' ).jGallery( {
    afterLoadPhoto: function() {}
} );
beforeLoadPhotoFunctionfunction() {}
Custom function that will be called before loading photo.
Examples: function(link,thumbnail) { console.log( link,thumbnail ) }
$( '#gallery' ).jGallery( {
    beforeLoadPhoto: function() {}
} );
closeGalleryFunctionfunction() {}
Custom function that will be called after hiding jGallery.
Examples: function() { alert( 'closeGallery' ) }
$( '#gallery' ).jGallery( {
    closeGallery: function() {}
} );
initGalleryFunctionfunction() {}
Custom function that will be called before initialization of jGallery.
Examples: function() { alert( 'initGallery' ) }
$( '#gallery' ).jGallery( {
    initGallery: function() {}
} );
showGalleryFunctionfunction() {}
Custom function that will be called after showing jGallery.
Examples: function() { alert( 'showGallery' ) }
$( '#gallery' ).jGallery( {
    showGallery: function() {}
} );
showPhotoFunctionfunction() {}
Custom function that will be called before showing photo.
Examples: function(link,thumbnail) { console.log( link,thumbnail ) }
$( '#gallery' ).jGallery( {
    showPhoto: function() {}
} );

HTML classes

has-jgallery
If html document contain initialized jgallery, html element has class "has-jgallery".
     <html class="has-jgallery">                            
has-visible-jgallery
If html document contain visible jgallery, html element has classes "has-visible-jgallery" and "has-jgallery".
     <html class="has-jgallery has-visible-jgallery">                            
has-hidden-jgallery
If html document contain hidden jgallery, html element has classes "has-hidden-jgallery" and "has-jgallery".
     <html class="has-jgallery has-hidden-jgallery">                            

Methods

getOptions Return: Plain Object
Return current object options.
     $( '#gallery' ).jGallery().getOptions();                            
getDefaults Return: Plain Object
Return default options.
     $( '#gallery' ).jGallery().getDefaults();                            
restoreDefaults Return: jQuery
Restore default options.
     $( '#gallery' ).jGallery().restoreDefaults();                            
getTransitions Return: Plain Object
Return list of all transitions.
     $( '#gallery' ).jGallery().getTransitions();                            
destroy Return: jQuery
Destroy jGallery.
     $( '#gallery' ).jGallery().destroy();