pg-gallery

1.0.1 • Public • Published

PIGNOSE-Gallery

PIGNOSE Gallery is so simple and fast gallery style component.

npm version Bower version Join the chat at https://gitter.im/KennethanCeyer/PIGNOSE

Sample Image

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

  1. Download or Clone the sources.
  2. Import jQuery library from here
  3. Insert snippets like below.
$(function() {
   $('.gallery').pignoseGallery({
    thumbnails: '.gallery-thumbnails'
   });
});
  1. 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!

Package Sidebar

Install

npm i pg-gallery

Weekly Downloads

3

Version

1.0.1

License

MIT

Last publish

Collaborators

  • kenneth-ceyer