Flexible Photo Gallery Plugin with jQuery and CSS3 - jGallery

File Size: 4.72 MB
Views Total: 19467
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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

2014-12-08

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.