jquery cycle pluginを使用して、画像のスライドをしています。
画像を画面中央に全画面表示をしたいのですが、
スライドする画像のサイズがそれぞれ異なるため、
画像の比率を固定して、縦横のサイズで大きい方を
画面に合わせて表示したいのです。
私が考えたのは、
(全文は載せられません。すみません。)
<div id="slideImage">
<img id="slide1" src="test01.gif">
<img id="slide2" src="test02.gif">
・・・
<img id="slide5" src="test05.gif">
</div>
↑のようにスライドする画像があるとして、
下記のjavascriptでスライドする画像分ループさせて、
id部分を変数にして、縦横どちらかが大きかったら・・・という
計算をしています。
function resize(){
for(var i=1; i<6; i++){
var slideNo = "slide" + i;
var w = document.getElementById(slideNo).width;
var h = document.getElementById(slideNo).height;
if(w >= h){
document.getElementById(slideNo).width = screen.width;
}else{
document.getElementById(slideNo).height = screen.height;
}
}
}
確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、
slide2以降をリサイズしてくれません。
ループは確かに回っているし、
if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、
なぜかscreen.width(screen.height)の値が入ってくれません。
jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。
みなさんお力お貸しください!!
No.3
- 回答日時:
>画像を画面中央に表示する方法を今度は探すことになりました。
。ああ、画面中央よりにしたいんですね。
>なんとなくモニタをたてがたのものに変えたところきれいに
>画面に収まりました。
CSS情報が一切ないので把握できづらいですが、
そもそもscreen.widthではなく、
BODYのサイズを測ったほうがいいのでは?
body,html{margin:0px;}
として、
$("body").width()
$("body").height()
で画像のサイズを決定。
スクロールバーは常に表示として、
width()を指定した時に、スクロールバーの幅を引いてあげる。
これで全体表示がうまくいくように思います。
この回答への補足
>ああ、画面中央よりにしたいんですね。
画像を縦横比で固定して表示すると、もし幅の方が大きい画像の場合、
高さは画面サイズに合わされないので、画面上寄りで
表示されますよね?
なので、それを中央にしたいのです。。
CSSでは
text-align:center;
margin-left: auto;
margin-right: auto;
を指定していましたが、やはり左側に200px程の余白が空きます。
ためしに
margin-left:-200px;を入れると
横長画像はきれいに画面におさまります。
(縦長画像はずれます。)
>$("body").width()
>$("body").height()
上記を試してみたのですが、
スクロールしてもやはり左側にだけ無駄な余白が残っていました。
1度、横長画像なら以下のように
var yohaku = (screen.height - document.getElementById(slideNo).height)/2;
document.getElementById(slideNo).vspace = yohaku;
画面の高さから画像の高さを引いて、
でた値を画像の余白で設定しようと思ったのですが、
画像を画面サイズで拡大しているので、
拡大後のサイズではなく、画像本来のサイズが取れてしまいます。
色々分かりにくくてすみません。
No.2
- 回答日時:
>けれど、どの画像も表示位置が右寄りになってしまい、
>左側に3cmくらいのスペースが必ず開くようになってしまいました。。
それはCSSの問題では?
すでにされているCSS指定に原因があるのでしょうが、
CSS部分は提示されていないので。
#slideImage{
text-align: left;
margin-left: 0;
}
この回答への補足
最初、cssには何も記載していなかったので、
上記のmarginをautoにしたり、margin-leftの設定を
色々変更したのですが変わらずでした。
なんとなくモニタをたてがたのものに変えたところきれいに
画面に収まりました。
これは一体(笑)
No.1
- 回答日時:
試してみましたが、サイズは変わりました。
resize()を呼び出してないだけってことはないですよねえ?
$(function() {
resize();
$('#slideImage').cycle('command');
});
この回答への補足
resize()をonloadイベントで呼び出していたため、
上記に変更したところ無事リサイズすることができました。
ありがとうございます!
けれど、どの画像も表示位置が右寄りになってしまい、
左側に3cmくらいのスペースが必ず開くようになってしまいました。。
画像を画面中央に表示する方法を今度は探すことになりました。。
解決、とした後ですがご報告します。
スライドが中心に寄らないということでしたが、
画像のリサイズ後に余白部分のピクセルを計算して、
vspace,hspaceとして入れることで無事中央寄せができるようになりました!
上記の過程で画像の左側のスペースの問題も解決できました!!
mikemike7様、本当にありがとうございました!!><
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
残像を残しながらjpg画像を自動...
-
JAVASCRIPTでアクセス毎に画像...
-
画像クリック→メッセージボック...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報