jGallery - Mobile friendly, flexible jQuery photo gallery/slider/slideshow/carousel with albums, preloader and swipe events

Download
Add links to required files on your webpage
Create your gallery
Full screen mode
Slider
Slider with links
Albums
Gallery height the same as viewport
Custom background and text colours
Different background and text colours for each photo

Download

Download .zip or .tar.gz archive with jGallery files. All examples published on this subpage there are placed in files below.

Download .zip Download .tar.gz

If you want to use npm enter in command line:

npm install jgallery

Add links to required files on your webpage

In <head> section, put links to required js and css files:

<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.6.4" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jgallery.min.js?v=1.6.4"></script>

If you need touch gestures(swipe events) support, put link like below in <head> section:

<script type="text/javascript" src="js/touchswipe.min.js"></script>

Create your gallery

In <body> section, create html element(e.g. <div>) and put links to your photos. You have to put also Javascript code, to initialize your jGallery. Example:

HTML API

<div id="gallery">
    <a href="static/jgallery/images/large/1.jpg"><img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="static/jgallery/images/large/2.jpg"><img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="static/jgallery/images/large/3.jpg"><img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>

Preview

<div id="gallery">
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery({
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                title: 'Photo3'
            }
        ]
    });
} );
</script>

Preview

Full screen mode

If you want to display your photos on full screen, you should change JavaScript code:

HTML API

<div id="gallery">
    <a href="static/jgallery/images/large/1.jpg"><img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="static/jgallery/images/large/2.jpg"><img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="static/jgallery/images/large/3.jpg"><img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { mode: 'full-screen' } );
} );
</script>

Preview

<div id="gallery">
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( {
        mode: 'full-screen',
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                title: 'Photo3'
            }
        ]
    } );
} );
</script>

Preview

Slider

If you want to display your photos on slider, you should create code:

HTML API

<div id="gallery">
    <img src="static/jgallery/images/large/1.jpg" alt="Photo 1" />
    <img src="static/jgallery/images/large/2.jpg" alt="Photo 2" />
    <img src="static/jgallery/images/large/3.jpg" alt="Photo 3" />
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { mode: 'slider' } );
} );
</script>

Preview

<div id="gallery">
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery({
        mode: 'slider',
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                title: 'Photo3'
            }
        ]
    });
} );
</script>

Preview

Slider with links

If you want to display your photos on slider and you want to add link for each slide, you should create code:

HTML API

<div id="gallery">
    <a href="http://jgallery.jakubkowalczyk.pl"><img src="static/jgallery/images/large/1.jpg" alt="Photo 1" /></a>
    <a href="http://jgallery.jakubkowalczyk.pl"><img src="static/jgallery/images/large/2.jpg" alt="Photo 2" /></a>
    <a href="http://jgallery.jakubkowalczyk.pl"><img src="static/jgallery/images/large/3.jpg" alt="Photo 3" /></a>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { mode: 'slider' } );
} );
</script>

Preview

<div id="gallery">
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery({
        mode: 'slider',
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                link: 'http://jgallery.jakubkowalczyk.pl',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                link: 'http://jgallery.jakubkowalczyk.pl',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                link: 'http://jgallery.jakubkowalczyk.pl',
                title: 'Photo3'
            }
        ]
    });
} );
</script>

Preview

Albums

If you want to catalog photos, you should use html code like below:

HTML API

<div id="gallery">
    <div class="album" data-jgallery-album-title="Album 1">
        <a href="static/jgallery/images/large/1.jpg"><img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" /></a>
        <a href="static/jgallery/images/large/2.jpg"><img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" /></a>
        <a href="static/jgallery/images/large/3.jpg"><img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" /></a>
    </div>
    <div class="album" data-jgallery-album-title="Album 2">
        <a href="static/jgallery/images/large/4.jpg"><img src="static/jgallery/images/thumbs/4.jpg" alt="Photo 4" /></a>
        <a href="static/jgallery/images/large/5.jpg"><img src="static/jgallery/images/thumbs/5.jpg" alt="Photo 5" /></a>
        <a href="static/jgallery/images/large/6.jpg"><img src="static/jgallery/images/thumbs/6.jpg" alt="Photo 6" /></a>
    </div>
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>

Preview

<div id="gallery">
</div>
<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery({
        items: [
            {
                title: 'Album 1',
                images: [
                    {
                        url: 'static/jgallery/images/large/1.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                        title: 'Photo1'
                    },
                    {
                        url: 'static/jgallery/images/large/2.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                        title: 'Photo2'
                    },
                    {
                        url: 'static/jgallery/images/large/3.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                        title: 'Photo3'
                    }
                ]
            },
            
            {
                title: 'Album 2',
                images: [
                    {
                        url: 'static/jgallery/images/large/4.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/4.jpg',
                        title: 'Photo4'
                    },
                    {
                        url: 'static/jgallery/images/large/5.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/5.jpg',
                        title: 'Photo5'
                    },
                    {
                        url: 'static/jgallery/images/large/6.jpg',
                        thumbUrl: 'static/jgallery/images/thumbs/6.jpg',
                        title: 'Photo6'
                    }
                ]
            }
        ]
    });
} );
</script>

Preview

Gallery height the same as viewport

You should set height parameter as 100vh.

HTML API

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { height: '100vh', canChangeMode: false } );
} );
</script>
<div id="gallery">
    <a href="static/jgallery/images/large/1.jpg"><img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="static/jgallery/images/large/2.jpg"><img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="static/jgallery/images/large/3.jpg"><img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>

Preview

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( {
        height: '100vh',
        canChangeMode: false, 
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                title: 'Photo3'
            }
        ]
    } );
} );
</script>
<div id="gallery">
</div>

Preview

Custom background and text colours

If you want to specify custom background colors and text colors, you need TinyColor. Put link to this library in <head> section:

HTML API

<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

In <body> section, create JavaScript and html code like below:

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( { backgroundColor: 'black', textColor: 'white' } );
} );
</script>
<div id="gallery">
    <a href="static/jgallery/images/large/1.jpg"><img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" /></a>
    <a href="static/jgallery/images/large/2.jpg"><img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" /></a>
    <a href="static/jgallery/images/large/3.jpg"><img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>

Preview

<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

In <body> section, create JavaScript and html code like below:

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery( {
        backgroundColor: 'black',
        textColor: 'white', 
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                title: 'Photo1'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                title: 'Photo2'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                title: 'Photo3'
            }
        ]
    } );
} );
</script>
<div id="gallery">
</div>

Preview

Different background and text colours for each photo

If you want to specify different background colors and text colors for each photo, you need TinyColor. Put link to this library in <head> section:

HTML API

<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

Photos with custom background color must have "data-jgallery-bg-color" attribute. Photos with custom text color must have "data-jgallery-text-color" attribute.

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery();
} );
</script>
<div id="gallery">
    <a href="static/jgallery/images/large/1.jpg">
        <img src="static/jgallery/images/thumbs/1.jpg" alt="Photo 1" data-jgallery-bg-color="#3E3E3E" data-jgallery-text-color="#FFFFFF" />
    </a>
    <a href="static/jgallery/images/large/2.jpg">
        <img src="static/jgallery/images/thumbs/2.jpg" alt="Photo 2" data-jgallery-bg-color="#010301" data-jgallery-text-color="#CDE897" />
    </a>
    <a href="static/jgallery/images/large/3.jpg">
        <img src="static/jgallery/images/thumbs/3.jpg" alt="Photo 3" data-jgallery-bg-color="#EAF037" data-jgallery-text-color="#21408A" />
    </a>
</div>

Preview

<script type="text/javascript" src="js/tinycolor-0.9.16.min.js"></script>

Photos with custom background color must have "data-jgallery-bg-color" attribute. Photos with custom text color must have "data-jgallery-text-color" attribute.

<script type="text/javascript">
$( function() {
    $( '#gallery' ).jGallery({
        items: [
            {
                url: 'static/jgallery/images/large/1.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/1.jpg',
                title: 'Photo1',
                bgColor: '#3E3E3E',
                textColor: '#FFFFFF'
            },
            {
                url: 'static/jgallery/images/large/2.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/2.jpg',
                title: 'Photo2',
                bgColor: '#010301',
                textColor: '#CDE897'
            },
            {
                url: 'static/jgallery/images/large/3.jpg',
                thumbUrl: 'static/jgallery/images/thumbs/3.jpg',
                title: 'Photo3',
                bgColor: '#EAF037',
                textColor: '#21408A'
            }
        ]
    });
} );
</script>
<div id="gallery">
</div>

Preview

Getting started

Download

Add links to required files on your webpage

Create your gallery

Full screen mode

Slider

Slider with links

Albums

Gallery height the same as viewport

Custom background and text colours

Different background and text colours for each photo