Flexible Photo Gallery Plugin with jQuery and CSS3 - jGallery

jGallery is a flexible and interactive jQuery photo gallery plugin that comes with lots of options and transition effects.

Features:

• 41+ implement options to create your own photo gallery
• 43+ transition effects to make your gallery more attractive
• Supports all the major browsers
• Supports albums, thumbnails and preloader
• Supports full screen gallery with auto play
• Free for commercial and personal use

Basic Usage:

1. Include jQuery javascript library and jQuery jGallery plugin on the page

<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/jgallery-0.9-beta.min.js"></script>

2. Include required CSS files to style the photo gallery

<link rel="stylesheet" type="text/css" media="all" href="./css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="./css/jgallery-0.9-beta.min.css" />

3. Markup html structure

<div id="album">

<div data-jgallery-album-title="Album 1" class="album">
<h1>Album 1</h1>
<a href="images/large/1.jpg"><img alt="" src="images/thumbs/1.jpg"></a>
<a href="images/large/2.jpg"><img alt="" src="images/thumbs/2.jpg"></a>
<a href="images/large/3.jpg"><img alt="" src="images/thumbs/3.jpg"></a>
...
</div>

<div data-jgallery-album-title="Album 2" class="album">
<h1>Album 1</h1>
<a href="images/large/1.jpg"><img alt="" src="images/thumbs/1.jpg"></a>
<a href="images/large/2.jpg"><img alt="" src="images/thumbs/2.jpg"></a>
<a href="images/large/3.jpg"><img alt="" src="images/thumbs/3.jpg"></a>
...
</div>

<div data-jgallery-album-title="Album 3" class="album">
<h1>Album 1</h1>
<a href="images/large/1.jpg"><img alt="" src="images/thumbs/1.jpg"></a>
<a href="images/large/2.jpg"><img alt="" src="images/thumbs/2.jpg"></a>
<a href="images/large/3.jpg"><img alt="" src="images/thumbs/3.jpg"></a>
...
</div>

</div>

4. Call the plugin with options

<script type="text/javascript">
//<![CDATA[
$( function() {
$( '#album' ).jGallery( {
autostart: true,
zoomSize: '100%'
} );
} );
//]]>
</script>

5. All the options.

• autostart: true: Boolean; If set as 'true' jGallery will be started automatically after loading the document(only for full-screen or standard mode).; [ true, false ]
• autostartAtImage: 1: Number; Number of image which will be loaded by autostart(only when 'autostart' parameter set as 'true').; ; [ 1, 2, 3 ]
• autostartAtAlbum: 1: Number; Number of album which will be loaded by autostart(only when 'autostart' parameter set as 'true').; ; [ 1, 2, 3 ]
• backgroundColor: '#fff': String; Background color for jGallery container.; ; [ '#ffffff', 'silver' ]
• browserHistory: true: Boolean; If set as 'true', changes of active image will be saved in browser history.; [ true, false ]
• canChangeMode: true: Boolean; If set as 'true' you can change display mode(only for full-screen or standard mode).; [ true, false ]
• canClose: false: Boolean; If set as 'true' you can close jGallery(only for full-screen or standard mode).; [ true, false ]
• canMinimalizeThumbnails: true: Boolean; If set as 'true', you can minimalize thumbnails(only when 'thumbnails' parameter set as 'true').; [ true, false ]
• canZoom: true: Boolean; If set as 'true' you can zoom photos.; [ true, false ]
• disabledOnIE8AndOlder: true: Boolean; If set as 'true', jGallery will be blocked for Internet Explorer 8 and older.; [ true, false ]
• draggableZoom: true: Boolean; If set as 'true' you can drag active image.; [ true, false ]
• height: '600px': String; Height of jGallery container(only for standard or slider mode).
• hideThumbnailsOnInit: false: Boolean; If set as 'true', thumbnails will be minimized by default, when jGallery will be started(only when 'thumbnails' parameter set as 'true').; [ true, false ]
• mode: 'standard': String; Display mode.; [ 'full-screen', 'standard', 'slider' ]
• preloadAll: false: Boolean; If set as 'true', all photos will be loaded before first shown photo.; [ true, false ]
• reloadThumbnails: true: Boolean; Thumbnails will be reloaded when function jGallery() will be called again for the same element.; [ true, false ]
• slideshow: true: Boolean; If set as 'true', option slideshow is enabled.; [ true, false ]
• slideshowAutostart: false: Boolean; If set as 'true', slideshow will be started immediately after initializing jGallery(only when 'slideshow' has been set as true).; [ true, false ]
• slideshowCanRandom: true: Boolean; If set as 'true', you can enable random change photos for slideshow(only when 'slideshow' has been set as true).; [ true, false ]
• slideshowInterval: '8s': String; Time between change of photos for slideshow(only when 'slideshow' has been set as true).; [ '3s', '6s', '10s' ] 
• slideshowRandom: false: Boolean; 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).; [ true, false ]
• textColor: '#000': String; Color of text and icons.; ; [ '#000000', 'rgb(0,153,221)' ]
• thumbnails: true: Boolean; If set as 'true', thumbnails will be displayed.; [ true, false ]
• thumbHeight: 75: Number; Height(pixels) of thumbnails.; ; [ 50, 75, 125 ]
• thumbHeightOnFullScreen: 100: Number; Height(pixels) of thumbnails for thumbnails displayed in full-screen.; ; [ 125, 160, 200 ]
• thumbnailsFullScreen: true: Boolean; If set as 'true', thumbnails will be displayed in full-screen.; [ true, false ]
• thumbnailsPosition: 'bottom': String; Thumbnails position(only when 'thumbnails' parameter set as 'true').; [ 'top',  'bottom', 'left', 'right' ]
• thumbType: 'image': String; Thumbnails type(only when 'thumbnails' parameter set as 'true').; [ 'image', 'square', 'number' ]
• thumbWidth: 75: Number; Width(pixels) of thumbnails.; ; [ 50, 75, 125 ]
• thumbWidthOnFullScreen: 100: Number; Width(pixels) of thumbnails for thumbnails displayed in full-screen.; ; [ 125, 160, 200 ]
• title: true: Boolean; If set as 'true', near photo will be shown title from alt attribute of img.; [ true, false ]
• titleExpanded: false: Boolean; 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).; [ true, false ]
• tooltipClose: 'Close': String; Text of tooltip which will be displayed next to icon for close jgallery(if you set canClose parameter as true).; ;
• tooltipFullScreen: 'Full screen': String; Text of tooltip which will be displayed next to icon for change display mode.; ; [ 'Full screen', 'Tryb pełnoekranowy' ]
• tooltipRandom: 'Random': String; Text of tooltip which will be displayed next to icon for random slideshow toggling.; ; [ 'Random', 'Kolejność losowa' ]
• tooltips: true: Boolean; If set as 'true', tooltips will be displayed next to icons.; [ true, false ]
• tooltipSeeAllPhotos: 'See all photos': String; Text of tooltip which will be displayed next to icon for change thumbnails view.; ; [ 'See all photos', 'Zobacz wszystkie zdjęcia' ]
• tooltipSeeOtherAlbums: 'See other albums': String; Text of tooltip which will be displayed next to icon for change album(if your jGallery has more than one album).; ; [ 'See other albums', 'Zobacz pozostałe albumy' ]
• tooltipSlideshow: 'Slideshow': String; Text of tooltip which will be displayed next to icon for play/pause slideshow.; ; [ 'Slideshow', 'Pokaz slajdów' ]
• tooltipToggleThumbnails: 'Toggle thumbnails': String; Text of tooltip which will be displayed next to icon for toggle thumbnails.; ; [ 'Toggle thumbnails', 'Pokaż/ukryj miniatury' ]
• tooltipZoom: 'Zoom': String; Text of tooltip which will be displayed next to icon for zoom photo.; ; [ 'Zoom', 'Powiększenie' ]
• transition: 'moveToRight_moveFromLeft': String; Transition effect for change active image.; [ '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' ]
• transitionBackward: 'auto': String; Transition effect for change active image(when user selected one of previous images).; [ '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' ]
• transitionCols: 1: Number; Number of columns in the image divided into columns.; ; [ 1, 2, 3, 4, 5, 6 ]
• transitionDuration: '0.7s': String; Duration of transition between photos.; [ '0.2s', '0.5s', '1s' ] 
• transitionRows: 1: Number; Number of columns in the image divided into rows.; ; [ 1, 2, 3, 4, 5, 6 ]
• transitionTimingFunction: 'cubic-bezier(0,1,1,1)': String; Timig function for showing photo.; [ '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)' ]
• transitionWaveDirection: 'forward': String; Direction of animation(only when 'transitionCols' > 1 or 'transitionRows' > 1).; [ 'forward', 'backward' ]
• width: '100%': String; Width of jGallery container(only for standard or slider mode).
• zoomSize: 'fit': String; Size of zoomed photo(only for full-screen or standard mode).; [ 'fit', 'original', 'fill' ]
• afterLoadPhoto: function() {}: Function; Custom function that will be called after loading photo.; ; [ function() { alert( 'afterLoadPhoto' ) } ]
• beforeLoadPhoto: function() {}: Function; Custom function that will be called before loading photo.; ; [ function() { alert( 'beforeLoadPhoto' ) } ]
• closeGallery: function() {}: Function; Custom function that will be called after hiding jGallery.; ; [ function() { alert( 'closeGallery' ) } ]
• initGallery: function() {}: Function; Custom function that will be called before initialization of jGallery.; ; [ function() { alert( 'initGallery' ) } ]
• showGallery: function() {}: Function; Custom function that will be called after showing jGallery.; ; [ function() { alert( 'showGallery' ) } ]
• showPhoto: function() {}: Function; Custom function that will be called before showing photo.; ; [ function() { alert( 'showPhoto' ) } ]

Change logs:

2017-11-06

• v1.6.4

2017-10-27

• v1.6.3: Stop shlideshow on change album or press arrow keys

2017-05-08

• v1.6.2: closing fullscreen mode on ESC

2017-02-04

• v1.6.1: Creating a gallery by API causes gallery to disappear when shrinking

2016-11-25

• v1.6: API to creating gallery without HTML elements

2016-08-22

• v1.5.6: fix Error: cannot read property of undefined (function drag)

2015-07-29

• v1.5.5

2015-07-03

• fix swipe events

2015-07-02

• showing navigation of preview, when dragging preview

2015-02-12

• v1.5.3

2015-01-14

• Fixed view for mobile devices

2015-01-13

• Overlay for thumbnails

2014-12-19

• Navigation for draggable zoom

2014-12-08

• update.

2014-11-19

• Fixed: title background of photos for slider mode

2014-11-18

• Fixed method getOptions()

2014-11-15

• Added AMD support.

2014-11-13

• no wait for $(document).ready to initializing jGallery; 
• fixed: change width or height of existing jGallery

2014-11-08

• Fix: cropping thumbnails when their height === width; navigation for zoom draggable

v1.4.0 (2014-08-20)

• Added: Tooltips for icons(tooltipClose, tooltipFullScreen, tooltipRandom, tooltips, tooltipSeeAllPhotos, tooltipSeeOtherAlbums, tooltipSlideshow, tooltipToggleThumbnails, tooltipZoom parameters

v1.3.4 (2014-08-20)

• Update.

v1.3.3 (2014-08-19)

• Added: titleExpanded parameter(default: false).
• Modif: Pause slideshow when you click on zoom icon or draging of image.
• Fixed: Title of image overlap navigation icons.

v1.3.2 (2014-06-16)

• Fixed: Random transition effect, Too many calls to history.pushState()

v1.3.1 (2014-06-11)

• Updated Font Awesome to 4.1.0; 
• Removed delay when photo was loaded successfully.

v1.3.0 (2014-05-19)

• added saving browser history, hideThumbnailsOnInit and transitionBackward parameters

v1.2.0 (2014-04-28)

• update.

v1.1.6 (2014-03-28)

• update.

v1.1.5 (2014-03-20)

• Reload thumbnails when function jGallery() is called again for the same item

v1.1.4 (2014-03-17)

• update

v1.1.3 (2014-02-28)

• fixed transition effects
• fixed progress spinner position

v1.1.2 (2014-02-26)

• added css class prefixes(bootstrap no conflict);
• fixed canClose param

v1.1.1 (2014-02-17)

• version update.

v1.1.0 (2014-02-13)

• version update.

v1.0.1 (2014-01-03)

• Fixed: Show title of album next to icon for change album.
• Fixed: Thumbnails full screen view.

v1.0.0 (2014-01-02)

• Added: New transition effects.
• Added: Value 'random' for 'transition' parameter.
• Added: Parameters 'transition', 'transitionWaveDirection', 'transitionCols' and 'transitionRows'.
• Removed: Parameters 'titleShowEffect', 'titleHideEffect', 'titleShowTimingFunction', 'titleHideTimingFunction', 'titleShowDuration', 'titleHideDuration', 'showEffect', 'hideEffect', 'showDuration', 'hideDuration'.
• Modif: Change values of 'zoomSize' parameter.
• Fixed: Customization of colors, when there is more than one Jgallery on one side.
• Fixed: Navigation visibility when jgallery doesn't contains any album.
• Modif: Partial refactoring.

v0.9.6 (2013-11-22)

• updated to the latest version

v0.9.5 (2013-11-15)

• partial refectoring, fixed spinner visibility.

v0.9.4 (2013-11-08)

• fixed: no thumbs when jgallery contains only one album

v0.9.3 (2013-11-07)

• jquery compatibility fix, now jgallery work with jquery 1.7 and higher

---

This awesome jQuery plugin is developed by jakubkowalczyk-pl. For more Advanced Usages, please check the demo page or visit the official website.