Getting started

  1. Download
  2. Add link to jGallery on your webpage
  3. Create your gallery

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 link to jGallery on your webpage

In <head> section, put link to jGallery: 

<script type="text/javascript" src="js/jgallery.min.js?v=2.2.1"></script>

Create your gallery

In <body> section, create html element(e.g. <div id="gallery"></div>) and put Javascript code, to initialize your jGallery. Example: 

<div id="gallery">
</div>
<script type="text/javascript">
    document.querySelector('#gallery').appendChild(JGallery.create([{
        title: 'Images',
        items: [
            {
                url: 'images/large/1.jpg',
                thumbUrl: 'images/thumbs/1.jpg',
                title: 'Photo1',
                hash: 'photo-1'
            },
            {
                url: 'images/large/2.jpg',
                thumbUrl: 'images/thumbs/2.jpg',
                title: 'Photo2',
                hash: 'photo-2'
            },
            {
                url: 'images/large/3.jpg',
                thumbUrl: 'images/thumbs/3.jpg',
                title: 'Photo3',
                hash: 'photo-3'
            }
        ]
    }, {
        title: 'HTML',
        items: [
            {
                element: JGallery.createElement('<video src="SampleVideo_1280x720_1mb.mp4" loop autoplay/>'),
                thumbElement: JGallery.createElement('<span>Video</span>'),
                title: 'Video',
                hash: 'video'
            },
            {
                element: JGallery.createElement('<span style="font-size: 10vmax">Any HTML content</span>'),
                thumbElement: JGallery.createElement('<span>HTML</span>'),
                title: 'HTML',
                hash: 'html'
            }
        ]
    }]).getElement());
</script>
Preview

If you want to use with webpack (typescript is optional) import JGallery: 

import JGallery from 'jgallery';

JGallery.create(...);