- ベストアンサー
jQueryを使用して背景をフル表示＋スライドショーする方法
- jQueryを使用して、画面サイズに合わせて背景をフル表示し、サムネイルをクリックすると次の画像に切り替えるスライドショーを実装する方法を教えてください。
- 3枚の画像を使用し、3枚目の画像のみ縦長になっているため、背景が3枚目になったときに縦スクロールバーを表示して、上から下までスクロールできるようにしたいです。
- また、上記の要件を満たす他の方法があれば、それも教えていただけると助かります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
理屈はとても簡単です。 たとえば、HTML/CSSだけで画像を画面一杯に配置する技術はお持ちですか？ それができれば、javascriptでその要素を入れ替えるだけです。 「jQeruy=プラグインの利用」と考えるのは早計です。 自分のやりたいことに100%フィットしたプラグインを見つけるほうが大変だと思いますよ。 理屈はとても単純ですし、難易度としても高くないはずです。 HTML/CSS/JQueryの基本だけでできます。 基本をお持ちでないのであれば、カスタマイズを考えずに、どこかのプラグインの仕様に従うしかないと思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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_input ) で検証済み ＿は、タブに戻すこと。 <!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"> <!-- html,body{margin:0;padding:0;display:block;width:100%;height:100%;position:absolute;} div.section ul{position:absolute;top:0;padding:0;width:100%;height:100%;overflow:hidden;} #index,#indexli,div.section ul,div.section ul li{display:block;margin:0;padding:0;list-style:none;} #index{z-index:100;position:fixed;bottom:0;left:0;width:auto;background-color:black} #index li{display:inline-block;margin:5px;} div.section ul li{display:block;width:100%;height:100%;overflow:auto;} div.section ul li img{display:block;width:100%;height:auto;} --> ＿</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を使うと伸縮できます。
お礼
お礼が遅くなって申しわけありません。 コードまで付けていただいて、ご丁寧な回答ありがとうございます！ たしかに縦長の画像は画面に収まるようにしたほうがいいと思うのですが どうしても、ということだったので悩んでいました；； 勉強になりました。ありがとうございます。
お礼
ご回答ありがとうございます！ HTML/CSSだけで画像を画面一杯に配置することはできるのですが javascriptの知識がほぼありません。 今までは配布されているjQueryで事足りていたので お恥ずかしい話、自分でスクリプトを組むという頭がありませんでした；； これを機会に勉強しようと思います。 ありがとうございました。