pg-gallery
v1.0.1
Published
The slider to support prallax animation with jQuery.
Downloads
46
Maintainers
Readme
PIGNOSE-Gallery
PIGNOSE Gallery is so simple and fast gallery style component.
Check demo page and enjoy it! See Demo
Description
- This plugin supports IE8+, Firefox, Chrome, Safari, Opera browser version.
- This plugin needs
jQuery library 1.11.x
higher version.
Usage
- Download or Clone the sources.
- Import jQuery library from here
- Insert snippets like below.
$(function() {
$('.gallery').pignoseGallery({
thumbnails: '.gallery-thumbnails'
});
});
- Markup structure must be like below.
<div class="gallery">
<div class="gallery-item"><img src="demo/img/sample0.jpg" alt="" /></div>
<div class="gallery-item"><img src="demo/img/sample1.jpg" alt="" /></div>
<div class="gallery-item"><img src="demo/img/sample2.jpg" alt="" /></div>
<div class="gallery-item"><img src="demo/img/sample3.jpg" alt="" /></div>
<div class="gallery-item"><img src="demo/img/sample4.jpg" alt="" /></div>
<div class="gallery-thumbnails">
<a href="#"><img src="demo/img/sample0.jpg" alt="" /></a>
<a href="#"><img src="demo/img/sample1.jpg" alt="" /></a>
<a href="#"><img src="demo/img/sample2.jpg" alt="" /></a>
<a href="#"><img src="demo/img/sample3.jpg" alt="" /></a>
<a href="#"><img src="demo/img/sample4.jpg" alt="" /></a>
</div>
</div>
If you use Bower
bower install pg-gallery
If you use npm
npm install pg-gallery
Move dist/pignose.gallery.min.js
, dist/pignose.gallery.min.css
to your project folder.
Options
| name | value | default | description |
|------|-----------------|---------|-------------|
| focus | number
| 0 | You can set first showing image by give index (number type / start from 0). |
| thumbnails | selector string
| null | Gallery's thumbnails wrapper selctor string. |
| time | number
| 3000 | Millisecond time of the delay the auto change animation. |
| auto | boolean
| true | If you turn on this option, You can control to pause/play of the gallery by mouseover, and mouseout event. |
| hover | boolean
| true | If you set this option to true, You can switch images by hover on each of thumbnails. |
Issues
We welcome to receive bug reports.
Please report to us, When you find some problems.
Thank you!