問題解決ログ

スライドショーのタブ切り替えをJavaScriptで実装したい

インターネット技術, デザイン, ウェブサイト制作 | 10:04 |

最近、サイトのUIに凝っていて、閲覧者になじみのあるブラウザのUIをホームページに実装できないか考えていた。白羽の矢が立ったのがjQuery+Cycleプラグインだ。Cycleは多機能スライドショーだが、特性を利用してタブとして実装したい。

目的

• スクロールの排除による利便性の向上
• 視点移動を減らして、閲覧者の疲労削減
• 操作や表現の簡略化で記憶に残りやすくする

実装したい内容

• JavaScriptでの実装(Flashは使わない)
• JavaScriptを切った環境でも閲覧可能にする
• スライドショーをタブクリックで切り替える
• 現在表示しているタブを強調する
• タブに画像名(img alt要素)を表示する
• タブに自動でサムネイル画像を表示する
• スライドショーを前後ボタン「次へ」、「戻る」で1つずつ切り替える
• タブ、前後ボタンをスライドショー本体から切り離し、レイアウトの自由度を高める
• 初期状態に表示されるタブを、GETで指定切り替え

デモ

• スライドショーのタブ切り替え
• 2ページ目を最初に表示

デモのイメージ

ダウンロード

ソースファイル：slide_tab.zip

備考

• 核となるタブ切り替えはCycleオプションの"pagerAnchorBuilder"で実現しているが、日本語の解説が少なかったので骨が折れた
• 中でも、CSSで使現在表示しているタブを強調する"activeSlide"クラスは、たまたま存在に気付いた(ソースを読むといいことがある)
• もともとはスライドショーだが、テキスト要素を表示させることも可能
• 基本はjQuery Cycle Pluginで紹介されているまま。ソースには、実装で困ったところだけ日本語でコメントを書いている
• JavaScriptに明るくなくてもCSSが分かればすぐに使えると思う

参照

▽ jQuery Cycle Plugin

http://jquery.malsup.com/cycle/

言わずとしれたCycle配布元

▽ Cycle jGlycy

http://semooh.jp/jglycy/jquery-plugins/cycle

Cycleのオプションを日本語で解説してくれている

　平成23年5月28日(土) 記述

##### 平成23年6月2日(土)に追記 #####

GETで受け取った値をそのままJSに出力しないよう修正

JavaScriptインジェクションやXSSを警戒して。それでなくても記号や英字を入れるだけで誤作動していた。

参考

▽ JavaScriptインジェクション攻撃

http://itpro.nikkeibp.co.jp/article/COLUMN/20081006/316276/

▽ C# #29. JavaScript インジェクション攻撃の防止

http://msdn.microsoft.com/ja-jp/asp.net/ff652519

サイト利用者からの入力をHTMLエンコードする

▽ XSS対策:JavaScriptのエスケープ(その3)

http://d.hatena.ne.jp/ockeghem/20070519/1179592129

「JavaScriptの動的生成は推奨していない」を証明するかのようにエスケープ処理を何度も考察している。

ツイートする