重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

背景色と連動するスライドショープラグイン

解決済

  • 質問者：gellgugu
  • 質問日時：
  • 回答数：2件

お世話になります。

スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。
サンプルとして
http://elegantthemes.com/preview/eStore/
こちらのサイトの様な感じにしたいと思っています。

中央部分がスライドショーになっており両サイドが背景となっているようです。
ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。
画像だけでなく文字や背景も変わっています。
ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。

lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか？

もしくは簡単なjQueryで出来そうならご教授願いたいと思います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＞中央部分がスライドショーになっており両サイドが背景となっているようです。


背景と画像は同じ要素に設定されていて、背景に見えるところが背景色、画像に見えるところが背景画像になっているようです。
背景画像は、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>

この回答への補足

ご返答ありがとうございます！

サンプルまで作成して頂き本当にありがとうございます。
試しにやってみたのですが、どういったわけか画像が読み込めません。
パスが違ってるのかと思い見直しましたがそうではなさそうです。

現在の状態は背景のみ切り替わっている状態です。
画像さえ表示出来れば完璧なのですが、何が原因かお分かりでしょうか？

補足日時：2012/03/07 19:57
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

すみません。
出来ました！

原因はよくわかりませんでしたが、サンプルではなくて実装してみたら出来ました。
やはりパスなのか？でもパス部分はコピペでしたし。。。

とにかく出来ました！
本当にありがとうございました！

通報する
お礼日時：2012/03/07 21:03

No.2

  • 回答者： fujillin
  • 回答日時：

#1です。



＞どういったわけか画像が読み込めません。
＞パスが違ってるのかと思い見直しましたがそうではなさそうです
普通にstyle="～"で背景画像を指定しているだけですので、再度パス等を御確認ください。
リピートなしですので、ある程度のサイズのある画像でないと見えないのかも…
（一応、表示サイズはサンプルサイトより小さめの600×300ピクセルで仮定しています。）

ご提示の例が背景画像で処理していたので、そのまま背景画像の設定を行なう方法にしてありますが、背景画像の設定をやめて（背景色は生かしておいて）、
<div class="caption">内に通常の<img src="～" alt="">を入れるような方法でも、あるいはdiv.captionに背景画像を設定するような方法でも、そのままで同じように動作するはずです。


#1のサンプルでは、div.captionの要素が（↑）で書きましたように600×300ピクセルになっていて、表示位置がセンタリングされています。
div.slideの要素のほうは、ブラウザの幅に合うようにwidthを指定していません。
（そのままであれば100%になるはず。高さはcaptionに合わせて300ピクセル。）
    • good
    • 0
    • 件
通報する
この回答へのお礼

完璧です！
最後の最後まで本当にありがとうございました！

通報する
お礼日時：2012/03/07 21:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報