PIGNOSE Gallery

View project on Github Download Zip
v1.0.1

options

name type 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.

bower

If you use bower

bower install pg-gallery

npm

If you use npm

npm install pg-gallery

sample

HTML Javascript CSS 
<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>
$(function() {
	$('.gallery').pignoseGallery({
		thumbnails '.gallery-thumbnails'
	});
});
.pignose-gallery {
	margin: 0 auto;
	width: 600px;
	height: 360px;
}