JavaScript

jquery.galleryview.jsを使って複数画像をギャラリー＆スライダー表示する方法

  /

このブログ記事では、初心者でも簡単に理解できるように、jQuery.galleryview.jsを使って複数の画像をギャラリー＆スライダー表示する方法を詳しく説明します。
手順ごとに解説していきますので、コードを見ながら一緒に進めていきましょう。

Contents

必要な準備

まずは、必要なファイルをダウンロードしておきましょう。以下のファイルが必要です：

  • jQueryライブラリ
  • jQuery UIライブラリ
  • jquery.timers.js
  • jquery.easing.js
  • jquery.galleryview.js
  • jquery.galleryview.css

これらのファイルは、公式サイトやCDNから取得することができます。以下にCDNのリンクを示しますので、これを使ってファイルを読み込むことができます。

CSSの設定

次に、CSSの設定を行います。CSSは、ギャラリーの見た目を整えるために必要です。jquery.galleryview-3.0-dev.cssファイルを読み込みます。
以下のコードを追加します。

<link type="text/css" rel="stylesheet" href="css/jquery.galleryview-3.0-dev.css" />
<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:800px;
	margin:0 auto;
}
-->
</style>

JavaScriptの設定

次に、JavaScriptの設定を行います。必要なファイルを読み込み、ギャラリーを初期化するスクリプトを記述します。
jquery.min.js、jquery-ui.min.js、jquery.timers-1.2.js、jquery.easing.1.3.js、jquery.galleryview-3.0-dev.jsファイルを読み込みます。
$(‘ギャラリー＆スライダーエリア’).galleryView()でギャラリー＆スライダーさせたいエリアを設定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<script type="text/javascript">
	$(function(){
		$('#myGallery').galleryView();
	});
</script>

HTMLの記述

最後に、HTML内にギャラリーの画像を配置します。ギャラリー＆スライダーエリア（id=”myGallery”）にjpg画像を5枚用意しました。以下のコードを参考にしてください。

<div class="clWrap">

	<h1>複数画像をギャラリー＆スライダー表示します。</h1>
    
    <div align="center">
	<ul id="myGallery">
		<li><img src="i1.jpg" alt="1枚目の画像" /></li>
		<li><img src="i2.jpg" alt="2枚目の画像" /></li>
		<li><img src="i3.jpg" alt="3枚目の画像" /></li>
		<li><img src="i4.jpg" alt="4枚目の画像" /></li>
		<li><img src="i5.jpg" alt="5枚目の画像" /></li>
	</ul>
    </div>

</div><!--/clWrap-->

jquery.galleryview：複数画像をギャラリー＆スライダー表示するデモページ

ここまでの手順を完了すると、以下のようなデモページが完成します。これで、jQuery.galleryview.jsを使って複数の画像をギャラリー＆スライダー表示する方法が理解できました。

jquery.galleryview：複数画像をギャラリー＆スライダー表示するデモページ

まとめ

この記事では、jQuery.galleryview.jsを使って複数の画像をギャラリー＆スライダー表示する方法を紹介しました。手順ごとに説明し、初心者でも簡単に実装できるように工夫しました。ぜひ、自分のプロジェクトに活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像スライダー jquery.galleryview ギャラリー
関連記事