現在、jQueryで画像のみのスライドショーは作成できているのですが、
画像と連動するテキストボックスの表示方法がわかりません。
参考サイト:
http://www.timeout.jp/ja/tokyo
上記のサイトのように、画像のスライドショーと同時に、テキストで表示させたリンクも連動させたいです。
作動させたい内容は以下の通りです。
☆画像のスライドショー
☆画像にマウスオーバーで、スライドショーが一時ストップ、マウスアウトで再開。
☆画像と一緒にテキストボックス(リンク)の背景等が変わる。
☆テキストボックスにマウスオーバーで、該当の画像に変更、マウスアウトでスライドショー再開。
※参考サイトとほぼ同じ動きができれば幸いです。
できればjQueryで作れるものだとありがたいです。
よろしくお願いいたします。
次の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
すべて可能です。
2012/01/12 21:36:21ページャー(pager)=テキストボックスになります。
ページャーはデフォルトでは数値ですが、pagerAnchorBuilderでテキストボックスを自動作成するようにしています。
さらに「pagerEvent:'mouseover'」でトリガーをクリックからマウスオーバーに変更し、「pauseOnPagerHove:true」でページャーマウスオーバーによる一時停止を有効にしています。
rouge_2008様
2012/01/13 15:46:58ありがとうございます!
まだ実際にサイトで動かしていませんが、
ひとつずつ確認しながら作業を進めていきます。