close
ADVERTISEMENT

Learn languages

Create own dictionaries, translate, learn words and play games — anywhere, any device.

Try it
Learn words
ADVERTISEMENT

JSoccer

3D browser game

Play
JSoccer

Documentation

  1. Options
  2. HTML classes
  3. Methods

Options

autostart Boolean Default: true
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
    } );
                                
autostartAtImage Number Default: 1
Number of image which will be loaded by autostart(only when 'autostart' parameter set as 'true').
Examples: 1 2 3
     
    $( '#gallery' ).jGallery( {
        autostartAtImage: 1
    } );
                                
autostartAtAlbum Number Default: 1
Number of album which will be loaded by autostart(only when 'autostart' parameter set as 'true').
Examples: 1 2 3
     
    $( '#gallery' ).jGallery( {
        autostartAtAlbum: 1
    } );
                                
backgroundColor String Default: '#fff'
Background color for jGallery container.
Examples: '#ffffff' 'silver'
     
    $( '#gallery' ).jGallery( {
        backgroundColor: '#fff'
    } );
                                
browserHistory Boolean Default: true
If set as 'true', changes of active image will be saved in browser history.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        browserHistory: true
    } );
                                
canChangeMode Boolean Default: true
If set as 'true' you can change display mode(only for full-screen or standard mode).
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        canChangeMode: true
    } );
                                
canClose Boolean Default: false
If set as 'true' you can close jGallery(only for full-screen or standard mode).
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        canClose: false
    } );
                                
canMinimalizeThumbnails Boolean Default: true
If set as 'true', you can minimalize thumbnails(only when 'thumbnails' parameter set as 'true').
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        canMinimalizeThumbnails: true
    } );
                                
canZoom Boolean Default: true
If set as 'true' you can zoom photos.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        canZoom: true
    } );
                                
disabledOnIE8AndOlder Boolean Default: true
If set as 'true', jGallery will be blocked for Internet Explorer 8 and older.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        disabledOnIE8AndOlder: true
    } );
                                
draggableZoom Boolean Default: true
If set as 'true' you can drag active image.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        draggableZoom: true
    } );
                                
draggableZoomHideNavigationOnMobile Boolean Default: true
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
    } );
                                
height String Default: '600px'
Height of jGallery container(only for standard or slider mode).
     
    $( '#gallery' ).jGallery( {
        height: '600px'
    } );
                                
hideThumbnailsOnInit Boolean Default: false
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
    } );
                                
items Array | null Default: null
You can pass images as array (you don't have to create HTML elements).
     
    $( '#gallery' ).jGallery( {
        items: null
    } );
                                
maxMobileWidth Number Default: 767
Maximum width(px) for jGallery shows a view for mobile device.
     
    $( '#gallery' ).jGallery( {
        maxMobileWidth: 767
    } );
                                
mode String Default: 'standard'
Display mode.
Possible values: 'full-screen' 'standard' 'slider'
     
    $( '#gallery' ).jGallery( {
        mode: 'standard'
    } );
                                
preloadAll Boolean Default: false
If set as 'true', all photos will be loaded before first shown photo.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        preloadAll: false
    } );
                                
slideshow Boolean Default: true
If set as 'true', option slideshow is enabled.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        slideshow: true
    } );
                                
slideshowAutostart Boolean Default: false
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
    } );
                                
slideshowCanRandom Boolean Default: true
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
    } );
                                
slideshowInterval String Default: '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'
    } );
                                
slideshowRandom Boolean Default: false
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
    } );
                                
swipeEvents Boolean Default: true
If set as 'true', you can switch to next/prev photo and thumbnails using swipe events.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        swipeEvents: true
    } );
                                
textColor String Default: '#000'
Color of text and icons.
Examples: '#000000' 'rgb(0,153,221)'
     
    $( '#gallery' ).jGallery( {
        textColor: '#000'
    } );
                                
thumbnails Boolean Default: true
If set as 'true', thumbnails will be displayed.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        thumbnails: true
    } );
                                
thumbHeight Number Default: 75
Height(pixels) of thumbnails.
Examples: 50 75 125
     
    $( '#gallery' ).jGallery( {
        thumbHeight: 75
    } );
                                
thumbHeightOnFullScreen Number Default: 100
Height(pixels) of thumbnails for thumbnails displayed in full-screen.
Examples: 125 160 200
     
    $( '#gallery' ).jGallery( {
        thumbHeightOnFullScreen: 100
    } );
                                
thumbnailsFullScreen Boolean Default: true
If set as 'true', thumbnails will be displayed in full-screen.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        thumbnailsFullScreen: true
    } );
                                
thumbnailsHideOnMobile Boolean Default: true
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
    } );
                                
thumbnailsPosition String Default: 'bottom'
Thumbnails position(only when 'thumbnails' parameter set as 'true').
Possible values: 'top' 'bottom' 'left' 'right'
     
    $( '#gallery' ).jGallery( {
        thumbnailsPosition: 'bottom'
    } );
                                
thumbType String Default: 'image'
Thumbnails type(only when 'thumbnails' parameter set as 'true').
Possible values: 'image' 'square' 'number'
     
    $( '#gallery' ).jGallery( {
        thumbType: 'image'
    } );
                                
thumbWidth Number Default: 75
Width(pixels) of thumbnails.
Examples: 50 75 125
     
    $( '#gallery' ).jGallery( {
        thumbWidth: 75
    } );
                                
thumbWidthOnFullScreen Number Default: 100
Width(pixels) of thumbnails for thumbnails displayed in full-screen.
Examples: 125 160 200
     
    $( '#gallery' ).jGallery( {
        thumbWidthOnFullScreen: 100
    } );
                                
title Boolean Default: true
If set as 'true', near photo will be shown title from alt attribute of img.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        title: true
    } );
                                
titleExpanded Boolean Default: false
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
    } );
                                
tooltipClose String Default: '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'
    } );
                                
tooltipFullScreen String Default: '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'
    } );
                                
tooltipRandom String Default: 'Random'
Text of tooltip which will be displayed next to icon for random slideshow toggling.
Examples: 'Random' 'Kolejność losowa'
     
    $( '#gallery' ).jGallery( {
        tooltipRandom: 'Random'
    } );
                                
tooltips Boolean Default: true
If set as 'true', tooltips will be displayed next to icons.
Possible values: true false
     
    $( '#gallery' ).jGallery( {
        tooltips: true
    } );
                                
tooltipSeeAllPhotos String Default: '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'
    } );
                                
tooltipSeeOtherAlbums String Default: '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'
    } );
                                
tooltipSlideshow String Default: 'Slideshow'
Text of tooltip which will be displayed next to icon for play/pause slideshow.
Examples: 'Slideshow' 'Pokaz slajdów'
     
    $( '#gallery' ).jGallery( {
        tooltipSlideshow: 'Slideshow'
    } );
                                
tooltipToggleThumbnails String Default: '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'
    } );
                                
tooltipZoom String Default: 'Zoom'
Text of tooltip which will be displayed next to icon for zoom photo.
Examples: 'Zoom' 'Powiększenie'
     
    $( '#gallery' ).jGallery( {
        tooltipZoom: 'Zoom'
    } );
                                
transition String Default: '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'
    } );
                                
transitionBackward String Default: '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'
    } );
                                
transitionCols Number Default: 1
Number of columns in the image divided into columns.
Examples: 1 2 3 4 5 6
     
    $( '#gallery' ).jGallery( {
        transitionCols: 1
    } );
                                
transitionDuration String Default: '0.7s'
Duration of transition between photos.
Possible values: '0.2s' '0.5s' '1s'
     
    $( '#gallery' ).jGallery( {
        transitionDuration: '0.7s'
    } );
                                
transitionRows Number Default: 1
Number of columns in the image divided into rows.
Examples: 1 2 3 4 5 6
     
    $( '#gallery' ).jGallery( {
        transitionRows: 1
    } );
                                
transitionTimingFunction String Default: '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)'
    } );
                                
transitionWaveDirection String Default: 'forward'
Direction of animation(only when 'transitionCols' > 1 or 'transitionRows' > 1).
Possible values: 'forward' 'backward'
     
    $( '#gallery' ).jGallery( {
        transitionWaveDirection: 'forward'
    } );
                                
width String Default: '100%'
Width of jGallery container(only for standard or slider mode).
     
    $( '#gallery' ).jGallery( {
        width: '100%'
    } );
                                
zoomSize String Default: 'fit'
Size of zoomed photo(only for full-screen or standard mode).
Possible values: 'fit' 'original' 'fill'
     
    $( '#gallery' ).jGallery( {
        zoomSize: 'fit'
    } );
                                
afterLoadPhoto Function Default: function() {}
Custom function that will be called after loading photo.
Examples: function(link,thumbnail) { console.log( link,thumbnail ) }
     
    $( '#gallery' ).jGallery( {
        afterLoadPhoto: function() {}
    } );
                                
beforeLoadPhoto Function Default: function() {}
Custom function that will be called before loading photo.
Examples: function(link,thumbnail) { console.log( link,thumbnail ) }
     
    $( '#gallery' ).jGallery( {
        beforeLoadPhoto: function() {}
    } );
                                
closeGallery Function Default: function() {}
Custom function that will be called after hiding jGallery.
Examples: function() { alert( 'closeGallery' ) }
     
    $( '#gallery' ).jGallery( {
        closeGallery: function() {}
    } );
                                
initGallery Function Default: function() {}
Custom function that will be called before initialization of jGallery.
Examples: function() { alert( 'initGallery' ) }
     
    $( '#gallery' ).jGallery( {
        initGallery: function() {}
    } );
                                
showGallery Function Default: function() {}
Custom function that will be called after showing jGallery.
Examples: function() { alert( 'showGallery' ) }
     
    $( '#gallery' ).jGallery( {
        showGallery: function() {}
    } );
                                
showPhoto Function Default: function() {}
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();