Drupal 7 でスライドショーと jQuery カルーセルを作成する。パート 2

チュートリアルの前のパートでは、スライドショーを作成しました。私はそれを会社のスタッフを表示するのに使いましたが、ウェブサイトのヘッダーのバナーとして使うこともできます。ただし、デフォルトのソリューションは私にはあまり合いません――前後のスライド用のナビゲーションボタンを追加したいのです。これは、単純なテキストや数字のコントロールよりずっと見栄えがよくなります。

おさらいすると、すでに Views と Views_slideshow がインストールされています。

さて、この記事にいくつかの矢印アイコンを添付しました――それらをスライドショーに追加しましょう。まず、テキストベースのスライドページャーを有効にする必要があります。

これでページャーは「Next（次へ）」と「Previous（前へ）」のテキストリンクを表示するように切り替わるはずです。

アイデアは、CSS を使って「next」と「previous」リンクに背景画像を設定し、CSS でそれらを適切に配置することです。

効果的に作業するには、Firefox 用の Firebug 拡張機能が必要です。便利な CSS 検査ツールを提供します。Firebug でページャーリンクがどう表示されるかは次のとおりです:

各要素の id が重要です――CSS ルールでそれを使います。また、矢印画像をテーマの images フォルダーに配置する必要もあります。

では、テーマの style.css に追加して CSS を更新しましょう。コードは次のようになるかもしれませんが、レイアウトに合わせて値を調整してください:

a#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

a はリンクタグで、# は一致する id を持つ要素を表します。

「next」ボタンの CSS は少し異なります:

a#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 30px;
    height: 0px;
    padding-top: 30px;
    position: relative;
    top: 0px;
    left: 30px;
    overflow: hidden;
    z-index: 5;
    display: block;
}

「pause（一時停止）」リンクは完全に非表示にできます:

a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}

Firebug を使ってパディングと配置を調整し、最終的な値を style.css に書き込みます。

私の最終的な CSS は次のようになります:

#views_slideshow_singleframe_prev_view_slideshow-block_1 {
    background: url('images/left.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: -55px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
#views_slideshow_singleframe_next_view_slideshow-block_1 {
    background: url('images/right.png');
    width: 35px;
    height: 0px;
    padding-top: 26px;
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    z-index: 5;
    display: block;
}
a#views_slideshow_singleframe_playpause_view_slideshow-block_1 {
    display: none;
}
#views_slideshow_singleframe_controls_view_slideshow-block_1 {
    height: 0px;
}

バナーの完成です! チュートリアルの次のパートでは、jQuery カルーセル を作成します。