【jQuery】シンプルでレスポンシブのギャラリープラグインjsGallery

jsGalleryはシンプルでレスポンシブのギャラリーjQueryプラグイン。

Usage

<div id="jsGallery" data-title="Galley title here">
...
<span data-album-name="Album - 1" data-src="01.jpg " data-thumbnail="thumb1.jpg"></span>
<span data-album-name="Album - 1" data-src="02.jpg"></span>
<span data-album-name="Second Album" data-src="P.jpg"></span>
<span data-album-name="Second Album" data-src="Q.jpg"></span>
...
</div>   

script

$('#jsGallery').jsGallery();
// or
$('#jsGallery').jsGallery({
...
showAlbums: true,
connectAlbums: true,
...
});

Options

Options Description
showAlbums Whether to show the albums’ name or not
connectAlbums Jump to next/prev album when reach last/first item of the album
zIndex z-index of the generated jsGallery element
galleryParent element in which generated element is appended
galleryTitleAttr name of data-attr from which gallery title is read
albumNameAttr name of data-attr from which name of each album is read
imageLinkAttr name of data-attr from which each image’s url is read

Methods

// jsGallery initialization
var gal = $('#jsGallery').jsGallery();
gal.jsGallery('<method name>', <param-1>, <param-2>, ...);
// for example
gal.jsGallery('show', 'Earth Stuff', 2);
Method name Parameter(s)
show albumName (optional), imageIndex (optional)
hide none
showNext none
showPrev none
selectAlbum albumName, callback (optional)
destroy none
 
jsGallery

【jQuery】シンプルでレスポンシブのギャラリープラグインjsGallery

  • LATEST
  • RELATED
  • POPULAR