1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" media="all" href="./css/jgallery.min.css?v=1.3.0" />
<script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./js/jgallery.min.js?v=1.3.0"></script>
2. HTML
<!-- 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>
Or slider mode
<div id="gallery">
<img src="images/larde/1.jpg" alt="Source: Pixabay.com" />
<!-- more images -->
</div>
3. 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() {}
});
});
JS Tutorial
