スマートフォンの勢いはうちのサイトでも例外なく、少ないアクセスの中でもかなりの割合を占めてきている。
アクセシビリティを考えると、そろそろflash依存のギャラリーから脱却するときかなと、いろいろと探してみた。
なんでもjqueryという言語を使ったのがいいらしく、NEXTGENと連携して使えるものを探したのだが、これが実に少ない。
その中で唯一使えそうなのが表題のプラグインなのだが、これがかなり厄介だ。
まず日本語で解説しているところがない。英語をなんとか紐解いていくと、ウィジェットで便利に使えるようになっている。
もちろんショートコードで記事中に記述もできるが、その説明もわかりにくい。
いろいろ調べて、nivo sliderというjqueryを使った汎用プラグインの説明に準拠していることがわかった。そのプラグインの記事ならたくさんある。
オプションを一つ一つ紐解いて、ショートコードを記述する。なんとか動くようになったが、スタイルはイマイチだ。
キャプションの表示位置は直接CSSを書き換えて変更できたが、画像がセンター揃えになってない。縦横混ざっているので非常にブサイクだ。
スライドショウ時に、前の画像が残る問題は、プラグインページのFAQに解決策があった。
しかし画像のセンター揃えができない問題は、
Center: Centers content in container. Requires width to be set. (sc: center=”1″)
この設定がどうも効いていないようなのだ。
これを解決しないと、過去記事に適用できない。
するとこんな記事があった。
http://wordpress.org/support/topic/plugin-jj-nextgen-jquery-slider-center-image-not-working
これを参考にしてCSSを修正すると、画像がセンタリングされてスライドするようにはなった。
が、エフェクトをかけていると画像があちこち移動してしまう。
そこで、もう背に腹は替えられないのでエフェクトの時間をゼロ、つまりエフェクトなしに設定する。
animSpeed: Slide transition speed. (sc: animspeed=”setting”)
この値をゼロにすると見かけ上エフェクトなしでカットで切り替わるようになる。これでなんとかなったと思いきや、一番最初の画像だけがセンターに来ない。
これはもうギブアップだ。
やりきれない感じで動作確認をしていると、まだトラップがあった。
同ページ内で複数の記事を表示していると、ショートコードにIDを設定していないとCSSがちゃんと動いてくれない。
HTML id: HTML id to use. Defaults to ‘slider’. Needs to be different for multiple sliders on same page. (sc: html_id=”slider”)
この設定を追加する。‘slider’のところに任意の英数字を設定する。私はパーマリンクにもある記事ID番号（この記事なら16539）を設定した。
もう限界だ。誰か助けてくれえ。
JJ NextGen JQuery Slider
