- ベストアンサー
背景色と連動するスライドショープラグインを探しています
- 背景色と連動するタイプのスライドショープラグインを探しています。中央部分がスライドショーになっており両サイドが背景となっているようです。画像や文字、背景色を変えることができるタイプのプラグインを探しています。
- インラインコンテンツそのものをスライドするタイプのスライドショープラグインを探しています。lightboxのようなイメージギャラリーではなく、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものを希望しています。
- もしくは簡単なjQueryで実装できるようなスライドショープラグインがあれば教えてください。背景色と連動するタイプのものを探しています。
- gellgugu
- お礼率55% (37/67)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞中央部分がスライドショーになっており両サイドが背景となっているようです。 背景と画像は同じ要素に設定されていて、背景に見えるところが背景色、画像に見えるところが背景画像になっているようです。 背景画像は、no-repeat top centerで配置されていますので、繰り返しが無く外側の部分は背景色が見えているだけです。 それなので、この部分の仕組みとしてはdiv要素をフェードインさせて切替えているだけとなります。 他に、メニュー部分を上下させたりクリックすると対応するものが表示されたりするなど、いろいろあるので複雑にはなっていますが、切替えの原理的としては（↑）のような比較的単純なものになっています。 ＞画像だけでなく文字や背景も変わっています。 切替えるdiv要素の中に全部記されているので、セットの親になっているdivを切替えることで、全部切替わるように構成されています。 ＞単純にフェードインアウトするスライドショーでインライン ＞コンテンツをスライドさせるものは無いでしょうか？ 探せばいろいろあるのではないかと思います。（文字通り『スライド』させるものや、フェードさせるものや両方同時のものなど） 直接画像要素を対象にしたものが多いかもしれませんが、div要素なども対象にできるものを探せばよろしいかと。 ＞もしくは簡単なjQueryで出来そうならご教授願いたいと思います。 一定時間で切替わるだけの、ごくシンプルなサンプルを… （jQueryを利用しているので、スクリプト自体は5行程度です） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #slides div.slide { height:300px; width:100%; background-repeat:no-repeat; background-position:top center; } #slides div.caption { position:relative; width:600px; height:300px; margin: 0 auto; } #slides div.content { position:absolute; right:0; bottom:0; width:200px; height:100px; background-color:#fff; border:4px solid #ddd; padding:30px; font-weight:bold; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> </head> <body> <div> <div id="slides"> <div class="slide" style="background-color:#776; background-image:url(img/photo01.jpg);"> <div class="caption"><div class="content">コメント1</div></div> </div> <div class="slide" style="background-color:#e84; background-image:url(img/photo02.jpg);"> <div class="caption"><div class="content">コメント2</div></div> </div> <div class="slide" style="background-color:#abb; background-image:url(img/photo03.jpg);"> <div class="caption"><div class="content">コメント3</div></div> </div> </div> </div> <script type="text/javascript"> <!-- $("#slides div.slide").hide().filter(":first-child").show(); var interval = setInterval(function(){ var elm = $("#slides div.slide:visible").hide().next(); (elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000); }, 4000); //--> </script> </body> </html>
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 ＞どういったわけか画像が読み込めません。 ＞パスが違ってるのかと思い見直しましたがそうではなさそうです 普通にstyle="～"で背景画像を指定しているだけですので、再度パス等を御確認ください。 リピートなしですので、ある程度のサイズのある画像でないと見えないのかも… （一応、表示サイズはサンプルサイトより小さめの600×300ピクセルで仮定しています。） ご提示の例が背景画像で処理していたので、そのまま背景画像の設定を行なう方法にしてありますが、背景画像の設定をやめて（背景色は生かしておいて）、 <div class="caption">内に通常の<img src="～" alt="">を入れるような方法でも、あるいはdiv.captionに背景画像を設定するような方法でも、そのままで同じように動作するはずです。 #1のサンプルでは、div.captionの要素が（↑）で書きましたように600×300ピクセルになっていて、表示位置がセンタリングされています。 div.slideの要素のほうは、ブラウザの幅に合うようにwidthを指定していません。 （そのままであれば100%になるはず。高さはcaptionに合わせて300ピクセル。）
お礼
完璧です！ 最後の最後まで本当にありがとうございました！
お礼
すみません。 出来ました！ 原因はよくわかりませんでしたが、サンプルではなくて実装してみたら出来ました。 やはりパスなのか？でもパス部分はコピペでしたし。。。 とにかく出来ました！ 本当にありがとうございました！
補足
ご返答ありがとうございます！ サンプルまで作成して頂き本当にありがとうございます。 試しにやってみたのですが、どういったわけか画像が読み込めません。 パスが違ってるのかと思い見直しましたがそうではなさそうです。 現在の状態は背景のみ切り替わっている状態です。 画像さえ表示出来れば完璧なのですが、何が原因かお分かりでしょうか？