jQueryを使用して背景をフル表示＋スライドショーする方法
- jQueryを使用して、画面サイズに合わせて背景をフル表示し、サムネイルをクリックすると次の画像に切り替えるスライドショーを実装する方法を教えてください。
- 3枚の画像を使用し、3枚目の画像のみ縦長になっているため、背景が3枚目になったときに縦スクロールバーを表示して、上から下までスクロールできるようにしたいです。
- また、上記の要件を満たす他の方法があれば、それも教えていただけると助かります。
- ベストアンサー
jQuery等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- mililin
- お礼率74% (43/58)
- CSS
- 回答数2
- ありがとう数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を使うと伸縮できます。
お礼
お礼が遅くなって申しわけありません。 コードまで付けていただいて、ご丁寧な回答ありがとうございます！ たしかに縦長の画像は画面に収まるようにしたほうがいいと思うのですが どうしても、ということだったので悩んでいました；； 勉強になりました。ありがとうございます。
関連するQ&A
- jQueryのスライドショーのカスタマイズについて
仕事であるサイトを作っているのですが、製品ページの所で製品画像をスライドショーにして実装しようと思っており、jQueryで理想に近いプラグイン(galleriaというものです)を発見したのですが、スライドショーの領域内でさらに拡大画像ができるようにしてほしいと言われ自分でカスタマイズしようとやってみましたがうまくできません。 皆様のお力をお貸しいただけないでしょうか。 ■galleriaのプラグインを使ってカスタマイズする内容 galleriaのサイトからファイルをダウンロードし(http://galleria.aino.se/download/)メイン画像(サムネイルの上にある画像)内、もしくは外に「拡大画像」というボタンを設置し、クリックするとモーダルウィンドウで拡大画像が表示されるようにしたい。 ■自分でうまくできないところ このプラグインはサムネイル、もしくは左右にある矢印をクリックすると画像が変わる仕様になっており、「拡大画像」ボタンに今表示されているメイン画像を判別させて拡大画像を表示させる処理が必要となると思うのですが、うまくいきません。 モーダルウィンドウはthick.box(http://jquery.com/demo/thickbox/)を使って表示させています。 その他に、もっと簡単にできる方法など教えていただければ助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- jquery.lightpopで背景が途切れる
jquery.lightpop-0.8.5を使用しています。 あまり高さのない記事の場合、サムネールをクリックして表示される元画像の方が、htmlよりも高さがあることがあります。 すると画面スクロールをすると背景（半透明の黒）が途切れてしまう現象が起きています。 このような現象を改善するには、どのような修正をすればいいでしょうか？ もしもjquery.lightpopを修正しても実現できない場合、このような現象が起きないlightbox系のスクリプトを教えてください。
- ベストアンサー
- JavaScript
- jquery(js)にて実装したいスライドショー
jquery(js)にて実装したいスライドショー機能があります。 参考サイト http://j-sen.jp/kanto/city_411_1.htm サムネイル画像下の "他の写真を見る"の左右の矢印をクリックでサムネイルが 切り替わる機能です。 写真のＵＲＬはシステムにより吐き出すため, 枚数は決め打ちではないので、配列に画像URLを入れていくとは思うのですが、 うまくソースがかけません。 地頭のある方、何卒力添え宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 背景画像のスライドショー
Jqueryのプラグインで背景画像をフルスクリーンでスライドショーを行うものはよく見かけますが、 フルスクリーンにしないで、設置した背景画像の大きさのままスライドショーを出来るプラグインなどをご存知でしたらご教授いただきたいです。 もしくは、 下記プラグインの利用などを検討していたのですが、 このプラグインのどこの設定を変更すれば、フルスクリーンにはならなくなるのか、 ご教授いただけたら幸いです。 利用を検討していたプラグイン http://srobbin.com/jquery-plugins/backstretch/
- ベストアンサー
- JavaScript
- jQueryスライドショーの設定
http://slidesjs.com/ Slides, A Slideshow Plugin for jQuery ここのjqueryを使って、左右の矢印(← →)をクリックすると div要素が順番に入れ替わっていくというものを導入しました。 そこで、例えばdivが３つあったとして、 １が表示されているときに→を押すと、当然２に行きますが ３が表示されているときに→を押すと、スクロール自体は右にスクロールしているのに １が表示されてループしてしまいます。 そこで、３が表示されているときは、→をクリックしても1に行かない、 そもそも→はクリックできず、←しかクリックできない状態にしたいのです。 矢印は消えなくていいです。 うまくストップさせることはできないでしょうか
- ベストアンサー
- JavaScript
- jQueryに関してアドバイス頂けますでしょうか
はじめまして、gumkucha_maxと申します。 jQueryに関して、どなたかご教授頂けますでしょうか。 ページ内に複数のスライダーを設けたいのですが、 現状、下記ページのような動きになってしまいます。 ▼現状のページ http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html やりたい事としては、各スライダーのサムネイル画像をクリックすると、 メインの画像が切り替わるという動きにしたいのですが、 現状はサムネイル画像をクリックすると、ページ内にある全てのスライダーのメインが切り替わってしまいます。 どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- jQueryのスライドショーについて
jQueryのスライドショー「Elastic Image Slideshow with Thumbnail Preview」に関して、 お分かりになる方がいらっしゃればご教授いただけますでしょうか？ ■Elastic Image Slideshow with Thumbnail Preview http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/ ご質問の内容ですが、 現在、スライドを autoplay: true, に設定し、自動で再生（スライド）しています。 ただ、スライドバーをクリックすると、自動再生が停止していまいます。 スライドバーをクリックしても、停止しないコード追加もしくは、削除箇所などをお教えいただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- イメージギャラリー系のjsを探しています。
写真画像を画面横幅いっぱいに画像を並べて、縦にスクロールできるjsがあればご紹介願います。 私のイメージ的には、下記サイトにほほ近いです。 http://superlover.com.au/ ・ブラウザの表示サイズを小さくしても、写真画像は常に横幅いっぱいに表示される ・スクロールバーが表示されなくても、スクロールできる 上記2点が重要な点になります。 自分で調べたところ、スクロールバーの非表示で興味深いjsがありました。 http://www.lifeisg.com/blog/jquery/jscrollpane/ 背景画像にスクロールバーを表示させることで、カスタマイズできるそうです。 つまり、スクロールバーのデザインを背景と同化させてしまえば、一見表示されていないように見えるかも。。。 その場合、右端にできるであろう空間が気になるところですが。。。 ご意見よろしくお願いいたします。
- ベストアンサー
- JavaScript
- (JQuery）スライダーのサンプル探しています
jquery初心者です・・。 クライアントからの要望がありましたので（http://shop.benesse.ne.jp/ ）のようなjqueryのサンプルをずっと探しているのですがありそうでなかなかありません・・ 画像が入れ替わる時の動きに決まりはありません。 右に各コンテンツのサムネイルが縦に並んでいて左のメインイメージが連動して入れ替わり 画像をクリックするとコンテンツへリンクする。 といった動きです。 どなたかご存知の方教えていただけますでしょうか・・！ 何卒よろしくお願いいたします・・・！
- ベストアンサー
- CSS
- jQuery背景画像動かすパララックス
http://yuki930.v-colors.com/ このサイトの背景画像を作りたいです。 ですが、まず画像背景の作り方がわかりません。 それとマウスを動かすと立体的に動く仕組みのやり方がわかりません。 (上のサイトは少し弧を描くように回転しています。) 検索で探しましたところこのようなものがヒットしました。 マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」 http://www.webopixel.net/javascript/381.html たぶんこれであってると思います。 一回違うやつを作ってみました。 jQuery/CSS3で雲をゆらゆらさせる http://www.webopixel.net/javascript/718.html しかし、背景が透明にならず重なってしまいました。（Javasucriptのほうはうまく組み込めました。） まず、背景画像を透明にするやり方が一点と 次に、マウスを動かすと背景が立体的に弧を描くようにするやり方 以上二点を教えて頂きたく存じます。何卒よろしくお願い申し上げますm(_ _)m
- 締切済み
- JavaScript
お礼
ご回答ありがとうございます！ HTML/CSSだけで画像を画面一杯に配置することはできるのですが javascriptの知識がほぼありません。 今までは配布されているjQueryで事足りていたので お恥ずかしい話、自分でスクリプトを組むという頭がありませんでした；； これを機会に勉強しようと思います。 ありがとうございました。