web creators特別号

いますぐ悩みが解決する！ Webデザイン仕事で役立つ54のアイデア

インタラクション＆エフェクト 3-10
画像をコマ送りで表示させるスライドショー

よく見かけるサイトヘッダ部分のスライドショーだが、情報過多で若干うるさい感じを受けてしまうこともあるだろう。ここでは、掲載画像をコマ送りで表示させつつ、シックでさりげない表示とする。

制作・文／ marine（松本まりん）

BROWSER IE…9over　Firefox…3.6over　Safari…3.1over　Chrome…10over

01

ここでは自在にスライドショー（カルーセル）表示を実現できるjQueryプラグイン(jquery.carouFredSel.js)を利用する。

まずはそれぞれのページで、jQuery【1-1】とプラグイン【1-2】を入手しよう。


【1-1】jQuery (http://jquery.com/download/)。


【1-2】jquery.carouFredSel.js(http://caroufredsel.dev7studios.com/index.php)

02

続いて、ダウンロードしたファイルを解凍し、jsファイルをHTMLに組み込む。

まずは解凍した2つのjsファイルをHTMLと同階層のjsディレクトリに収納しよう。

次にHTMLファイルのHEAD内にscript要素を組み込み【2-1】、オプションコードを記述する【2-2】。

親要素のimage_carouselの幅内で、コンテナ要素foo1内にある画像について、スライドショーを実行する。


【2-1】HTMLにscript要素を追加。なお、ここのjquery.carouFredSel.jsは、圧縮版を利用する。


【2-2】オプションコードなどを記述。

03

続いて、bodyにコンテナ要素とイメージ要素を作成していく【3-1】。

このjquery.carouFredSel.jsというプラグインは、スライドショーさせる画像などを、コンテナ要素の大きさに自動で合わせてくれるが、自動調整に若干の遅延感をともなうので、できれば画像の大きさを直接記述するか、CSSで画像の大きさを指定しておいた方がよいだろう。


【3-1】画像を配置するコンテナ要素foo1の中にイメージを配置する。その周りを<div class="mc_innerblock">と<div class="image_carousel">で包む。

04

次に、CSSを記述する。

ここでは、カバーとなる<div class="mc_innerblock">に左マージン（margin-left:110px;）を設定して、サイトネームを表示するためのスペースを空けている。

また、背景色に60%の透明度を設定して、その下に見える画像の彩度を落として表示している。

さらに、コンテナ要素内のimg要素に対して、右マージンを設定して、フィルムのコマのような表示とした【4-1】【4-2】。


【4-1】


【4-2】コンテナ要素class="mc_innerblock" を半透明として、彩度を落としてシックな印象を表現。

05

サンプル【5-1】では、画像をスライドショーするだけの表示としているが、今回利用したプラグインは指定した要素以下に<div>や<img>を並べるだけで、画像だけではなくどんなHTML要素も利用することができる。たとえば商品画像と説明文のブロックをスライドショー表示できるなど、豊かな表現が可能となっている。


【5-1】サンプルページ　(http://xoops123.com/webdesign/photograph/)

06

たとえば、スライドショーさせるサムネイル画像に大きな画像へのリンクを追加し、さらにa要素にjQueryプラグインのPrettyPhotoのようなポップアップ系のエフェクトを起動させる仕組みを加えると、スライドショーしている画像をクリックすると拡大表示するなど、インタラクティブな表現が可能となる【6-1】【6-2】【6-3】。便利なプラグインなので、いろいろな場面で活用してもらいたい。

ここでは、XOOPS Cube Legacy（XCL）のテーマを元に汎用化した手法をご紹介している。

なお、XCLと無償で公開されているテーマphotograph、モジュールwebphotoなどを利用すると、同様のページを簡単に構築することができるのでおすすめだ。


【6-1】jQueryプラグインPrettyPhoto を追加。


【6-2】大きな画像へのリンクとともに、a要素にjQueryプラグインPrettyPhoto起動させるための rel=”prettyPhoto”を追加。


【6-3】Lightboxのように、画像がポップアップする効果を追加できる。


[目次に戻る]

 

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。


※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。