人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイトのトップページなどで、画像のスライドショーを組み込みたいと考えています。
現在、jQueryで画像のみのスライドショーは作成できているのですが、
画像と連動するテキストボックスの表示方法がわかりません。

参考サイト:
http://www.timeout.jp/ja/tokyo

上記のサイトのように、画像のスライドショーと同時に、テキストで表示させたリンクも連動させたいです。

作動させたい内容は以下の通りです。
☆画像のスライドショー
☆画像にマウスオーバーで、スライドショーが一時ストップ、マウスアウトで再開。
☆画像と一緒にテキストボックス(リンク)の背景等が変わる。
☆テキストボックスにマウスオーバーで、該当の画像に変更、マウスアウトでスライドショー再開。
※参考サイトとほぼ同じ動きができれば幸いです。

できればjQueryで作れるものだとありがたいです。
よろしくお願いいたします。

●質問者: hiropon71
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●100ポイント ベストアンサー

次のjQuery Pluginを利用すると可能です。
http://malsup.com/jquery/cycle/download.html

・オプション一覧
http://malsup.com/jquery/cycle/options.html

次ページで日本語で紹介されていますので、参考になると思います。
http://shanabrian.com/web/library/cycle.php
http://alphasis.info/2011/07/jquery-cycle/

・HTML

<div id="slideshow">
 <a href="xxx001.html" title="XXX1"><img src="img/image1.jpg" width="420" alt="Image 1" class="active" /></a>
 <a href="xxx002.html" title="XXX2"><img src="img/image2.jpg" width="420" alt="Image 2" /></a>
 <a href="xxx03.html" title="XXX3"><img src="img/image3.jpg" width="420" alt="Image 3" /></a>
 <a href="xxx04.html" title="XXX4"><img src="img/image4.jpg" width="420" alt="Image 4" /></a>
</div>

※リンク先の説明属性である「title」を必ず指定してください。(ナビゲーションの自動出力で使用します。)

・CSS

body,div,ul { margin:0;padding:0;color:brown; }
img { border:0; }
#slideshow { position:relative;width:420px; }
#navi { position:absolute;top:351px;left:0;list-style-type:none; }
#navi li { border:1px solid #ccc;float:left;width:103px;height:30px;color:#cc6;text-align:center;padding-top:8px; }
#navi li.activeSlide { color:#fff;background-color:#888; }
#navi li.activeSlide a:link, #navi li.activeSlide a:visited { color:#fff; }
#navi li a { text-decoration:none; }
#navi li a:link { color:#8cc; }
#navi li a:visited { color:#666; }
#navi li a:hover { color:#fff; }


※スライドショーの表示幅等は、画像のサイズ等に合わせて任意で変更してください。
※背景画像ではなく背景色にしてありますので、任意の背景画像を指定してください。

・Javascript

$(function() {
 $('#slideshow').after('<ul id="navi">').cycle({
 pager:'#navi',
 pagerEvent:'mouseover',
 pagerAnchorBuilder: function(idx, slide) {
 var link = $('#slideshow > a:eq(' + idx + ')');
 return '<li><a href="' + link.attr('href') + '">' + link.attr('title') + '</a></li>';
 },
 pauseOnPagerHover:true,
 allowPagerClickBubble: true, // Pagerのリンククリックでリンク先に飛ぶ為に使用
 pause:1,
 delay:2000 // こちらは特に指定する必要はありませんが一応・・・
 });
});


※新しいブラウザではほぼ問題なく動作すると思います。(※IE7はCSSで表示を調整する必要があります。)

次のjQuery ToolsでもTabsのmouseoverによる切り替えとSlideshow Pluginを組み合わせると希望の動作になりましたが、タイミングによってはマウスオーバーしてもそのまま次に進んでしまう事もある等、若干動作が不安定でした。
興味がありましたらこちらも試してみてください。
http://flowplayer.org/tools/download/index.html


hiropon71さんのコメント
rouge_2008様 ご丁寧な回答ありがとうございます! まだ内容をテスト、確認していないのですが、 上記の内容では以下のことも可能なのでしょうか? ☆テキストボックスにマウスオーバーで、該当の画像に変更、マウスアウトでスライドショー再開。 いずれにしましても、基本を勉強中ですので試しながら進めていきます。 取り急ぎ、お礼申し上げます。

rouge_2008さんのコメント
すべて可能です。 ページャー(pager)=テキストボックスになります。 ページャーはデフォルトでは数値ですが、pagerAnchorBuilderでテキストボックスを自動作成するようにしています。 さらに「pagerEvent:'mouseover'」でトリガーをクリックからマウスオーバーに変更し、「pauseOnPagerHove:true」でページャーマウスオーバーによる一時停止を有効にしています。

hiropon71さんのコメント
rouge_2008様 ありがとうございます! まだ実際にサイトで動かしていませんが、 ひとつずつ確認しながら作業を進めていきます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ