こんにちは。
jQueryを使ったスライドショーは非常に人気ですね。
コーポレートサイトなんかでは最近は要素いっぱいというよりもウィンドウ幅一杯にひろげるタイプのもの増えてきました。
世間の流行りものは少し送れて案件にやってくる、ということで今回担当した案件ではこのタイプのスライドショーを実装することになりましたのでその時のメモです。
仕様を考える
どのような構造にして、どの部分をスライドさせるのかをまずは考えていきます。今回の場合は、WordPressで作られたサイトになり、クライアントさんはできればHTMLは打たないで更新したいというのが前提にあります。また、PCとスマホでは別のテーマを使用しており、今回はPC側だけに実装することになりましたので、スマホについては考慮しなくてOKとなりました。
ということで、こんな感じの仕様になりました
- スライド部分はウィジェット（dynamic_sidebar）を使用し、簡単に画像の差し替えや並び替えができるものとする
- 画像ウィジェットのリンク先をいじることで、スライドからの飛び先を変更する
- エフェクトの設定などは固定（JS直書きでOK）
- PC以外のデバイスは考慮しないでOK
こんな感じでしょうか？
ということで早速やっていきます。
必要なファイルを揃える
今回はスライダー部分に jQuery Cycle Plugin を使用しますので、公式サイトまたは github よりダウンロードします。
新しいバージョンの Cycle2 というのもあるようですが、今回の仕様だと思ったように動作させることができなかったので無印版を使いました。でももしかしたら組み方次第では Cycle2 でもいけるかもしれません（未検証）
スクリプトを書く
スクリプトは大きく3つに分かれます。
具体的には画像ウィジェットにより生成された要素から必要なデータを取り出してスライダー用の要素を作るパート、リンクを動作するようにするパート（今回は背景画像としてスライドを配置するため）、そして Cycle プラグインを起動するパートです。
テーマ（またはHTML）の編集
スクリプトを書く前に、出力先であるテンプレートを修正します。
|
1 2 3 4 5 6 7 8 |
<div id="slideImgs"> <a href="http://example.com/"><img src="slide/slide1.png" alt=""></a> <img src="slide/slide2.png" alt=""> <a href="http://example.com/"><img src="slide/slide3.png" alt=""></a> <a href="http://example.com/"><img src="slide/slide4.png" alt=""></a> <a href="http://example.com/"><img src="slide/slide5.png" alt=""></a> </div> <div id="index_slider"></div> |
今回はテスト用に直接リンクや画像を書き出していますが、最終的にこの部分（2-6行目）は、
|
1 2 3 4 |
<div id="slideImgs"> <?php dynamic_sidebar('index_slider'); ?> </div> <div id="index_slider"></div> |
のような感じにしてウィジェットを吐き出させます。
スライダー要素の作成とリンクの有効化
続いて任意のJSファイルなどにこのような感じで関数を作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
function slideInit($slideImgs,$slideWraper) { // ウィジェットで出力した部分は直接利用はしないため隠してしまう $($slideImgs).hide(); // ウィジェットで出力された画像タグを調べて個数を覚えておく slide = $($slideImgs).find('img'); slideCnt = slide.size(); // 今見つけた画像をそれぞれスライド用DIVの背景画像に指定して追加する // 同時に、リンク付きの画像の場合はリンク文字のないリンクを生成、 // ついでにそれとわかるクラスも付けておく $(slide).each(function(i) { var image = $(this).attr('src'); var href = $(this).parent('a').attr('href'); if (href != undefined) { $($slideWraper).append('<div class="slide linked" style="background-image:url('+image+')"><a href="'+href+'"></a></div>'); } else { $($slideWraper).append('<div class="slide no-link" style="background-image:url('+image+')"></div>'); } }); // リンク付き要素はクリックしたら内包されるリンクが発火するようにする // このままではリンクだと分かりにくいのでマウスカーソルをポインターに変更する $($slideWraper).children('.linked').each(function(){ $(this).css('cursor','pointer'); $(this).click(function(){ window.location = $(this).find('a').attr('href'); return false; }); }); // jQuery Cycle プラグインを起動する $($slideWraper).cycle({ fx : 'scrollHorz', speed : 1500, timeout : 4000, easing : 'easeOutQuart', pause : 0 }); } |
そして、jQuery(document).ready(function($) {} の中に、
|
1 |
slideInit($slideImgs,$slideWraper); |
というふうにして呼び出します。
パラメータは以下のとおりに設定します。
$slideImgs
スライド画像が収められている要素です。今回はImageWidgetプラグインで画像を指定することにしましたので、該当する dynamic_sidebar を収めている要素ですね。
$slideWraper
実際にスライドショー用に整形されたデータを出力する部分です。
CSSを調整する
最後にスライドショー部分のCSSを調整します。
|
1 2 3 4 5 6 7 8 9 10 |
#index_slider { width: 100%; height: 440px; } #index_slider div { width: 100%; height: 100%; background-position: center top; backgrpimd-repeat: no-repeat; } |
今回はスライドショーの高さは400ピクセルで固定していますので、CSSでサイズを固定しています。
横幅はブラウザのウィンドウ幅に合わせるので100%となります。
#index_slider div （スライドの中身）の方は、背景画像になるため、要素の中身自体は空っぽです。なのでこのままでは大きさも0になってしまいますからCSSで高さ・幅共に100%を指定して背景画像がスライドショー領域いっぱいに見えるようにします。
そして、最後に重要なポイントですが background-position に center top と指定するのを忘れないようにするということです。
なぜそうするのかというと、左寄せのままですと、スライドが実際に見える範囲というのはこうなるからです。
青：スライド全体（ウィンドウ幅の変化に対応するため、通常より横長に作ります）
茶：狭いウィンドウ幅の時に見える範囲
緑：広いウィンドウ幅の時に見える範囲
なるほど確かに問題なさそうにも見えます。ですが、よく見かけるデザイン手法の１つである、960ピクセル固定で中央寄せのメイン要素を持つデザインですと、ウィンドウ幅が広がった場合左右に余白ができますが、その余白はウィンドウ幅によって異なります。
しかし余白にかかわらずスライダーは左端ぴったりからスタートしますので1枚目の図のパターンですと、ウィンドウ幅が広がれば広がるほどスライドの本文部分が左側に飛び出しているように見えてしまいます。
※右の薄い青はウィンドウからはみ出して見えない領域です。
もちろんそういうデザインも有りだとは思いますが、2枚目の図のようにヘッダーも960ピクセルで中央に寄ってる場合だと、そこだけ飛び出してるのが目立ってしまうのであまりよろしくないですよね。
（もちろん狙ってそういうデザインにしているなら全く問題ありませんが。）
そこで、中央に寄せるとどうなるかですが、
こういう風になります。ウィンドウ幅が広がると、両端の背景が広がっていくわけですね。
この図のオレンジの横幅をメイン要素と合わせておくと（今回の例なら960ピクセル）
全体でみるとこんな感じでしょうか？
これならウィンドウサイズにかかわらずしっかりとスライドの位置を合わせられそうです。
因みに作成する画像の大きさですが、だいたいメイン要素の2倍〜2.5倍程度まで横長にしておけばよっぽど横長にしない限りは大丈夫なはずです。自分は特に指定がなければ2000pxくらいにしてます。
この先どんどん画面が大きくなっていってブラウザの横幅最大値も伸びることが考えられますが、あまり横を伸ばし過ぎるとメイン要素が中央にちょこんとある状態になってしまってそれはそれで読みにくくなる可能性があるため、多分そこまで広げて見ることは無いのではないかな…と思います。
それにきっとそんな超解像度の画面が主流になる頃には、またWebのトレンドとかも変わってきてるかもしれませんし、その時はまたその時、考えることにしましょうｗ
そのくらいまで解像度が上がる頃には横幅960pxというデザインも古くなってるかもしれませんしね。
コメントする