Fork me on GitHub

FREE jQuery photo gallery with albums and preloader v1.3.2 — last update: 2014-06-16

Demo & Customize Download

Why jGallery?

Usage example

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8" />
    <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.min.css?v=1.3.2" />
    <script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="./js/tinycolor-0.9.16.min.js"></script>
    <script type="text/javascript" src="./js/jgallery.min.js?v=1.3.2"></script>
    <script type="text/javascript">
    $( function() {
        $( '#gallery' ).jGallery( {
            mode: 'full-screen', // [ full-screen, standard, slider ]
            width: '100%', // (only for standard or slider mode)
            height: '600px', // (only for standard or slider mode)
            autostart: false, // (only for full-screen mode)
            autostartAtImage: 1,
            autostartAtAlbum: 1,
            canClose: true, // (only for full-screen mode)
            canResize: true,
            draggableZoom: true,
            canChangeMode: false,
            backgroundColor: '#000',
            textColor: '#fff',
            browserHistory: true,
            thumbnails: true,
            thumbnailsFullScreen: true,
            thumbType: 'image', // [ image | square | number ]
            thumbnailsPosition: 'bottom', // [ top | bottom | left | right ]
            reloadThumbnails: true, //Reload thumbnails when function jGallery() is called again for the same item
            thumbWidth: 100, //px
            thumbHeight: 100, //px
            thumbWidthOnFullScreen: 100, //px
            thumbHeightOnFullScreen: 100, //px
            canMinimalizeThumbnails: true,
            hideThumbnailsOnInit: false,
            transition: 'moveToRight_moveFromLeft', // http://jgallery.jakubkowalczyk.pl/customize
            transitionBackward: 'moveToLeft_moveFromRight', // http://jgallery.jakubkowalczyk.pl/customize
            transitionWaveDirection: 'forward', // [ forward | backward ]
            transitionCols: 1,
            transitionRows: 5,
            showTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
            hideTimingFunction: 'linear', // [ linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) ]
            transitionDuration: '0.7s',
            zoomSize: 'fit', // [ fit | original | fill ] (only for full-screen or standard mode)
            title: true,
            slideshow: true,
            slideshowAutostart: false,
            slideshowCanRandom: true,
            slideshowRandom: false,
            slideshowRandomAutostart: false,
            slideshowInterval: '8s',
            preloadAll: false,
            appendTo: 'body', // selector (only for full-screen mode)
            disabledOnIE8AndOlder: true,
            initGallery: function() {},
            showPhoto: function() {},
            beforeLoadPhoto: function() {},
            afterLoadPhoto: function() {},
            showGallery: function() {},
            closeGallery: function() {}
        } );
    } );
    </script>
</head>
<body style="padding: 40px; color: #fff; background: #000;">

    <!-- For full-screen or standard mode -->
    <div id="gallery">
        <div class="album" data-jgallery-album-title="Album 1">
            <h1>Album 1</h1>
            <a href="images/large/1.jpg">
                <img src="images/thumbs/1.jpg" alt="Source: Pixabay.com"  data-jgallery-bg-color="#3e3e3e" data-jgallery-text-color="#fff" />
            </a>
            <!-- more albums -->
        </div>
        <!-- more images -->
    </div>


    <!-- For slider mode -->
    <div id="gallery">
        <img src="images/larde/1.jpg" alt="Source: Pixabay.com" />
        <!-- more images -->
    </div>

</body>
</html>
        

Changelog

1.3.2 2014-06-16
Fixed: Too many calls to history.pushState().
Fixed: Random transition effect.
1.3.1 2014-06-11
Modif: Updated Font Awesome to 4.1.0.
Modif: Removed delay when photo was loaded successfully.
Modif: Default value of 'transitionBackward' parameter for slider mode: 'rotateCubeRightOut_rotateCubeRightIn'.
Fixed: Arrow up for vertical thumbnails.
Fixed: Detecting url when 'autostart' and 'browserHistory' are enabled.
1.3.0 2014-05-18
Added: 'browserHistory' parameter(default: true for full-screen mode, false for standard/slider mode).
Added: 'hideThumbnailsOnInit' parameter(default: false).
Added: 'transitionBackward' parameter(default: moveToLeft_moveFromRight).
Removed: 'slideshowRandomAutostart' parameter.
Modif: First show photo animation removed.
Modif: Random icon is hidden when slideshow is stopped.
Modif: Default thumbnail size(75px).
Fixed: Thumbnails size when thumbnail width and height are different.
1.2.0 2014-04-28
Added: Draggable zoom parameter(default: true).
Added: Scrolling for menu of albums.
Modif: If image is wider or higher than container for gallery you can see image in original size.
Modif: restyled thumbnails.
Fixed: No bind click event for links which don't have img element.
1.1.6 2014-03-27
Added: 'canChangeMode' parameter(default: false).
Modif: Changed 'disabledOnIE7AndOlder' parameter to 'disabledOnIE8AndOlder'.
Fixed: Loading preview photo when album/gallery has only one photo.
Fixed: Binding event click for reloaded thumbnails.
Fixed: You can call jGallery function before loading the document.
1.1.5 2014-03-20
Added: 'reloadThumbnails' parameter(default: true). Reload thumbnails when function jGallery() is called again for the same item.
1.1.4 2014-03-16
Fixed: Hiding jGallery container.
Fixed: Image preview(backface visibility).
Fixed: Croping rectangle thumbnails.
Fixed: Background color of elements on dropdown menu for change album.
1.1.3 2014-02-27
Fixed: Transition effects.
Fixed: Progress spinner position.
1.1.2 2014-02-25
Added: Css class prefixes(bootstrap no conflict).
Fixed: 'canClose' parameter.
1.1.1 2014-02-17
Added: 'autostartAtImage' and 'autostartAtAlbum' parameters.
Fixed: Storage options for more than one jgallery.
1.1.0 2014-02-12
Added: Display mode — 'mode' parameter. Possible values: full-screen(default), standard, slider.
Added: Icon to minimizing thumbnails — 'canMinimalizeThumbnails' parameter.
Added: 'appendTo' parameter that determines where the html gallery will be added.
Fixed: 'transitionDuration' parameter.
1.0.2 2014-01-06
Fixed: Color of active item on dropdown menu for change album.
1.0.1 2014-01-03
Fixed: Show title of album next to icon for change album.
Fixed: Thumbnails full screen view.
1.0 2014-01-01
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.
0.9.6 2013-11-22
Fixed: Visibility of navigation when jgallery doesn't contains any album.
Fixed: Dropdowns for changing albums.
Fixed: Visibility of thumbnails after changing album.
Modif: Partial refactoring.
0.9.5 2013-11-15
Fixed: Visibility of spinner.
Modif: Partial refactoring.
0.9.4 2013-11-08
Fixed: No thumbs when jgallery contains only one album.
0.9.3 2013-11-06
Fixed: Jquery compatibility fix; now jgallery work with jquery 1.7 and higher.
0.9.2 2013-10-29
Added: Parameters 'backgroundColor' and 'textColor'.
Removed: Parameters 'descriptions' and 'theme'.
Modif: Click on the left side of the photo shows the previous photo, click on the right shows next.
Fixed: Preloading preview photo on IE and Android.
Fixed: Preloading thumbnails.
0.9.1 2013-10-16
Added: LESS css.
Added: Can change parameters after initialization jGallery.
Added: Select albums on full screen thumbnails view.
Added: Can create multiple jGallery.
Modif: Design lifting.
Modif: Disabling percentage progress in preloader when preloadAll parameter set as false.
Fixed: Navigation of thumbnails when more than one album has the same photo.
Fixed: Showing thumbnails when jGallery contains only one album.
0.9 2013-08-19
Release of the first version.

License

The MIT License (MIT)

Copyright © 2013 Jakub Kowalczyk

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.