Download .zip or .tar.gz archive with jGallery files. All examples published on this subpage there are placed in files below.
If you want to use npm enter in command line:
npm install jgallery
In <head> section, put link to jGallery:
<script type="text/javascript" src="js/jgallery.min.js?v=2.2.1"></script>
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>
If you want to use with webpack (typescript is optional) import JGallery:
import JGallery from 'jgallery';
JGallery.create(...);