🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

PIGNOSE Gallery is so simple and fast gallery style component.

Gallery Plugins Slider

Documentation

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

Screenshot Main

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.

Question

If you found something problem of this plugin, or you have some question.

Please send me a message to use either gitter or Github issue. (gitter url is on the top of the manual)


You May Also Like