1.0.1 • Published 8 years ago
pg-gallery v1.0.1
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.xhigher version.
Usage
- Download or Clone the sources.
- Import jQuery library from here
Insert snippets like below.
$(function() { $('.gallery').pignoseGallery({ thumbnails: '.gallery-thumbnails' }); });
4. Markup structure must be like below.
```html
<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-galleryIf you use npm
npm install pg-galleryMove 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!