WPギャラリー機能とjQueryプラグインを使ってスライダーを実装してみた

WPのギャラリーを使ってなるべく簡単にスライダーを実装する方法を考えました。

bxSliderというプラグインを使います。
理由は、シンプルソースでパターンもいくつかあり、拡張しやすそうだったので。

　使用するタイプ：Thumbnail pager - method 1　
　デモ：http://bxslider.com/examples/thumbnail-pager-1

JS　Plugin

bxSlider
　jquery.bxslider.min.js
　jquery.bxslider.css

CSS

<style>
#slide { width:700px; margin:10px 0; }
#slide li{ text-align:center; list-style:none; }
.gallery { text-align:center; }
.gallery-item { width:60px; height:60px; margin-left:10px; display:inline; overflow:hidden; }
.gallery-icon { width:60px; height:60px; display:inline; }
.gallery-icon a { height:60px; display:block; }
</style>

JS

ここでのサムネイルにはカルーセル機能はありません。センター揃えでならべるだけです。
ギャラリーの出力で＜BR＞タグが生成されるので、削除しています。（※1）

<script>
jQuery(function($){
  var el = $(".gallery-item"),
  n = el.length,
  i,
  images = '';

//WPから自動生成されるタグをJSプラグイン用に整えます　※1
  $(".gallery")
    .attr("id","")
    .find("br").remove()
    .end()
    .wrap('<div id="carousel"></div>')
    .addClass("cf");

//画像を表示させる場所を生成します
  for (i=0; i<=n; i=i+1){
    var anc = $(".gallery-item:nth-child"+"("+ i +") a");
    var img_url = anc.attr("href");
    if(img_url) {
      var ii = i-1;
      anc.attr("data-slide-index",ii);
      images += '<li><img src="' + img_url +'" /></li>';
    }
  }
  $("#carousel")
    .wrap('<div id="slide"></div>');
  $("#slide")
    .prepend('<ul class="slide">'+images+'</ul>');

//JSプラグインを実行します
  $(".slide").bxSlider({
    pagerCustom: '#carousel'
  });
});
</script>