jQuery等で背景をフル表示＋スライドショー

解決済

質問者：mililin
質問日時：2012/02/07 12:07
回答数：2件

http://www.daichifive.com/
↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、
サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。
画像は３枚で、３枚目の画像だけ、縦長になっているので、
背景が３枚目になったときだけ縦スクロールバーを付けて、
上から下まで見れるようにしたいです。

サムネイルを出して、次の画像に切り替えるくらいですと、
jQueryを探せば何かあると思うのですが、
３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。

できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？

jQuery以外の方法でも、上記のような動きを実装できるやり方があれば
ご教授いただけないでしょうか。
よろしくおねがい致します。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： tracer
回答日時：2012/02/13 19:33

理屈はとても簡単です。

たとえば、HTML/CSSだけで画像を画面一杯に配置する技術はお持ちですか？
それができれば、javascriptでその要素を入れ替えるだけです。

「jQeruy=プラグインの利用」と考えるのは早計です。
自分のやりたいことに100%フィットしたプラグインを見つけるほうが大変だと思いますよ。
理屈はとても単純ですし、難易度としても高くないはずです。
HTML/CSS/JQueryの基本だけでできます。
基本をお持ちでないのであれば、カスタマイズを考えずに、どこかのプラグインの仕様に従うしかないと思います。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
HTML/CSSだけで画像を画面一杯に配置することはできるのですが
javascriptの知識がほぼありません。
今までは配布されているjQueryで事足りていたので
お恥ずかしい話、自分でスクリプトを組むという頭がありませんでした；；
これを機会に勉強しようと思います。
ありがとうございました。

通報する

お礼日時：2012/02/14 10:28

No.1

回答者： ORUKA1951
回答日時：2012/02/07 18:51

HTMLの内容によります。

示されたサイトは、文書の内容に関係ないあくまで背景ですね。
　(注)背景としてマークアップされるべきですが、このサイトはそうはなっていません。

しかし、「サムネイル出して、クリックすれば、次の画像に切り替えたい」となると、もはや背景ではなく、写真を見せるためのアルバム(写真集)です。
　だとすると、背景ではありません。
　そして、背景画像を表示領域に合わせて伸縮させる手軽な方法はありません。(後述)

　また、写真のサイズが異なるということですが、縦長の画像は画面内に収まるようにアスペクト比を固定して縮小するほうがユーザビリティ上は良いのでは？
　最近のディスプレイは縦置きのスマートフォン(450px)、スマートフォン横置きやi-padのように小さな画面から、1920pxというワイドディスプレイもあります。

　以上のことから、画像による画像の目次と、でっかい画像のsectionとしてマークアップすべきではないかと思います。
　ごく簡単な例ですが、スライドショー機能をなくして、画像をクリックして大きな画像をウィンド巾に合わせてアスペクト比固定で表示する方法です。自動的にスライドショーをさせる場合は、それぞれの<li>にjavascriptでfocusを移動させてください。

　HTMLは文書構造を示すためだけに使っているので、表示方法は自由に変更できるでしょう。
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
＿は、タブに戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿＿<ul id="index">
＿＿＿<li><a href="#main1"><img src="./images/thumbnail/1.jpg" width="64" height="48" alt="写真1"></a></li>
＿＿＿<li><a href="#main2"><img src="./images/thumbnail/2.jpg" width="64" height="48" alt="写真2"></a></li>
＿＿＿<li><a href="#main3"><img src="./images/thumbnail/3.jpg" width="64" height="48" alt="写真3"></a></li>
＿＿＿<li><a href="#main4"><img src="./images/thumbnail/7.jpg" width="48" height="64" alt="写真4"></a></li>
＿＿</ul>
＿</div>
＿<div class="section">
＿＿<h2>画像一覧</h2>
＿＿<ul>
＿＿＿<li id="main1"><img src="./images/1.jpg" width="640" height="480" alt="写真1"></li>
＿＿＿<li id="main2"><img src="./images/2.jpg" width="640" height="480" alt="写真2"></li>
＿＿＿<li id="main3"><img src="./images/3.jpg" width="640" height="480" alt="写真3"></li>
＿＿＿<li id="main4"><img src="./images/7.jpg" width="480" height="640" alt="写真4"></li>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>

背景画像の伸縮はCSS3で導入されるbackground-sizeを使うと伸縮できます。