Bloosh Company

Development>WordPress

lightgallery.js v1 基本の使い方

, , , ,

lightgallery.js Ver1の話です。Ver1とVer2があり、商用利用する場合はVer2は有料です。
lightgalleryに関する新しい記事はこちら
Ver1公式サイトはこちら
Ver2公式サイトはこちら
 
 
まずは公式サイトからlightgallery.jsのプラグインをゲットします。
画面右上のタブもしくは「View on github」をクリックしてgithubへ。
ZIPでダウンロードします。

必要なファイルは、基本的には

です。
lightgallery.min.jsも内容は同じですが、より軽量です。
 
他に、サムネイル機能を使うときは

です。画像をクリックして大きくしたとき、下部に他の画像を小さく表示するための機能です。

 
また、同じページ内に複数ギャラリーを設置するときは

が必要です。
 
ダウンロードしたZIPフォルダを解凍したら、WordPressを設置しているサーバー上のトップ/wp-content/themes/該当テンプレートフォルダの中に、必要なファイルをアップロードします。

こんな感じ。
 
そしたら、読み込みの設定をします。
●通常の場合

<head>
	~~~
	<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
</head>
	~~~
※bodyタグ閉じる直前
	<script src="js/lightgallery.js"></script>

	<!-- ↓追加機能を使う場合は、lightgallery.jsの下に読み込む -->
	<script src="js/lg-hash.js"></script>
	<script src="js/lg-thumbnail.js"></script>
</body>

 
●WordPressの場合
functions.phpに書きます。


function my_enqueue_scripts(){
	wp_register_style(
		"lightgallery-css",
		get_theme_file_uri("css/lightgallery.css")
	);
	wp_enqueue_style( 'lightgallery-css' );

	wp_enqueue_script(
		"lightgallery-js",
		get_theme_file_uri("js/lightgallery.js"),
		array(),
		false,
		true
	);
	wp_enqueue_script(
		"lg-hash",
		get_theme_file_uri("js/lg-hash.js"),
		array("lightgallery-js"),
		false,
		true
	);
	wp_enqueue_script(
		"lg-thumbnail",
		get_theme_file_uri("lg-thumbnail.js"),
		array("lightgallery-js"),
		false,
		true
	);

	//style.cssでlightgallery.cssを上書きする場合は、第三引数に指定
	wp_enqueue_style(
		"style",
		get_stylesheet_uri(),
		array("lightgallery-css"),
		filemtime(get_stylesheet_directory())
	);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

style.cssの前にlightgallery.csslg-thumbnail.jsなどの前にlightgallery.jsを読み込むのがポイントです。
 
次に、HTMLマークアップ。


<div id="gallery">
	<a href="/img/1.jpg">
		<img src="/img/1_thum.jpg">
	</a>

	<a style="display:none" href="/img/2.jpg" data-sub-html="キャプション">
		<img src="/img/2_thum.jpg">
	</a>

	<a style="display:none" href="/img/3.jpg" data-sub-html="キャプション">
		<img src="/img/3_thum.jpg">
	</a>
</div>
 
<script type="text/javascript">
	lightGallery(document.getElementById('gallery'));
</script>

気付いたこと
aタグにしていますが、ulなど他のタグでも可能とのこと。
aならhrefに大きい画像のURLを指定。
display:noneの要素も中身にimgタグを書かないと表示されない。
●キャプションはalt属性でもtitle属性でもなくdata-sub-htmlで。
もしかしたらタグや属性の相性によって違うかもしれません。
 
その他、公式サイトにデモがたくさんあるので参考にしてください。
Gallery  with animated thumbnails ・・・ サムネイル付きギャラリー
 
下記、動作サンプル

lightgallery.js v1 基本の使い方 #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #JavaScript #lightgalleryjs #ギャラリー #画像 #軽量化

<<次の記事

1. アルバムの作り方 – lightgallery.js WordPressギャラリー事例

前の記事>>

lightgallery.jsの画像が2枚だけのときスライド方向が逆になる

Tweets by blooshcompany