私が大抵いつも使うギャラリーjs！使い勝手がいいんですよね！

公開日：2014年6月24日
最終更新日: 2015年2月23日

js_gallery_photo_01

こんにちは！

jsでギャラリー機能を使用する際、どんなjsを使用していますか？
私は数年ぐらい前から、いつも使用するギャラリーjsがあります。

なぜそのjsを使用するのかというと単純に、使い勝手が良いからです。
ブラウザによって動かないなんてこともないですし、使用も簡単です。
特別な動きをする訳ではないのですが、私のお気に入りです。

こんなギャラリーです。

js_gallery_photo_02

最近はWordPressのカスタムフィールドと絡めて、使用するケースが多いです。今回は、そのギャラリーjsの設置方法について記事にしたいと思います。

目次！

1.設置手順！
2.デモページ！
3.対応ブラウザ！
4.カスタムフィールドと絡めて使用！

設置手順！

それでは実際に設定してみたいと思います。

jsの読み込み！

まずはhtmlのhead部分に必要なjsを読み込んでください。
jsのパスを各環境に合わせるのと、「#imgMain」の部分は各自のCSSのid名に合わせてください。

<script type='text/javascript' src='js/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready( function() {
  $("#gallery a img")
  .fadeTo(1,1)
  .hover( 
    function(){
      $(this).fadeTo(200, 0.5);
    },
    function(){
      $(this).fadeTo(300, 1);
    }
  )
  .click( function() {
  var changeSrc = this.src;
  var changeUrl = this.alt;
    $("#target").fadeOut(
      "fast",
      function() {
        $(this).attr("src", changeSrc);
        $("#imgMain a").attr("href", changeUrl);
        $(this).fadeIn();
      }
    );
    return false;
  });
});

$(function() {
  $('#imgMain a').lightBox();
});
</script>

CSSの読み込み！

次にCSSを読み込みます。こちらもCSSのパスは各環境に合わせてください。

<style type="text/css">
<!--
ul#gallery {
  width: 640px;
  height: auto;
}

ul#gallery li {
  width: 100px;
  padding: 8px 8px 0px 0px;
  height: auto;
  float: left;
}

ul#gallery li.end {
  width: 100px;
  padding: 8px 0px 0px 0px;
  height: auto;
}

ul#gallery li img {
  width: 100px;
  height: 67px;
}
-->
</style>

htmlの作成！

以下が上記で説明したjsとCSSを記述し、ギャラリーを表示させるhtmlになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ギャラリーjsのサンプル</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
ul#gallery {
  width: 640px;
  height: auto;
}

ul#gallery li {
  width: 100px;
  padding: 8px 8px 0px 0px;
  height: auto;
  float: left;
}

ul#gallery li.end {
  width: 100px;
  padding: 8px 0px 0px 0px;
  height: auto;
}

ul#gallery li img {
  width: 100px;
  height: 67px;
}
-->
</style> 

<script type='text/javascript' src='js/jquery.min.js'></script>

<script type="text/javascript">
$(document).ready( function() {
  $("#gallery a img")
  .fadeTo(1,1)
  .hover( 
    function(){
      $(this).fadeTo(200, 0.5);
    },
    function(){
      $(this).fadeTo(300, 1);
    }
  )
  .click( function() {
  var changeSrc = this.src;
  var changeUrl = this.alt;
    $("#target").fadeOut(
      "fast",
      function() {
        $(this).attr("src", changeSrc);
        $("#imgMain a").attr("href", changeUrl);
        $(this).fadeIn();
      }
    );
    return false;
  });
});

$(function() {
  $('#imgMain a').lightBox();
});
</script>

</head>

<body>
  <div id="page">

    <div id="imgMain"><img src="img/photo_01.jpg" alt="" name="target" id="target" /></div>
      <ul id="gallery" class="clearfix">
        <li><a href="img/photo_01.jpg"><img src="img/photo_01.jpg" alt="" /></a></li>
        <li><a href="img/photo_02.jpg"><img src="img/photo_02.jpg" alt=" " /></a></li>
        <li><a href="img/photo_03.jpg"><img src="img/photo_03.jpg" alt="" /></a></li>
        <li><a href="img/photo_04.jpg"><img src="img/photo_04.jpg" alt="" /></a></li>
        <li><a href="img/photo_05.jpg"><img src="img/photo_05.jpg" alt=" " /></a></li>
        <li class="end"><a href="img/photo_06.jpg"><img src="img/photo_06.jpg" alt="" /></a></li>
      </ul>
    </div>

</body>
</html>

<div id=”imgMain”>が、大きい画像が切り替わる部分で、デフォルトで一番最初に表示される画像を指定します。

<ul id=”gallery”>の<li>の部分で、縮小されている画像を指定します。idの「imgMain」と「gallery」は必ずjsと合わせてください。

これで設定完了です。

デモページ！

上記の設定をしたデモページを作成しました。

デモページはこちら！

デモページのサンプルファイルはこちらよりダウンロードできます。

サンプルファイルはこちら！

対応ブラウザ！

下記のブラウザで動作チェック済です。

Google Chrome(Windows)
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)
Internet Explorer 8(Windows)
Internet Explorer 7(Windows)

カスタムフィールドと絡めて使用！

WordPressのカスタムフィールドと絡めて、施工実績などのギャラリーに使用するケースが多いです。

カスタムフィールドの設定！

WordPressの管理画面にログインし、「設定」⇒「カスタムフィールド」⇒「テンプレートコンテンツ」に以下のコードを追加してください。カスタムフィールドの設定をします。「カスタムフィールド」のプラグインは事前にインストールしておいてください。

[img01]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像1(サイズ最大幅は640px・リンクURLありを選択)

[img02]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像2(サイズ最大幅は640px・リンクURLありを選択)

[img03]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像3(サイズ最大幅は640px・リンクURLありを選択)

[img04]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像4(サイズ最大幅は640px・リンクURLありを選択)

[img05]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像5(サイズ最大幅は640px・リンクURLありを選択)

[img06]
type = textarea
rows = 6
cols = 90
mediaButton = true
tinyMCE = true
label = 画像6(サイズ最大幅は640px・リンクURLありを選択)

ここに上記のコードを追加してください。

js_gallery_photo_03

カスタムフィールドを設定すると以下のように投稿画面から画像を選択できるようになります。

js_gallery_photo_04

phpファイルに追加するコード！

WordPressのphpファイルに、ギャラリーを表示させる以下のコードを追加してください。「post_custom」で指定する部分は前の項目で指定したテンプレートコンテンツと合わせてください。

<div id="imgMain"><?php echo post_custom('img01'); ?></div>
  <ul id="gallery" class="clearfix">
    <li><?php echo post_custom('img01'); ?></li>
    <li><?php echo post_custom('img02'); ?></li>
    <li><?php echo post_custom('img03'); ?></li>
    <li><?php echo post_custom('img04'); ?></li>
    <li><?php echo post_custom('img05'); ?></li>
    <li class="end"><?php echo post_custom('img06'); ?></li>
  </ul>
</div>

以上で設定完了です。