jQuery

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

November 1, 2016
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