jquery cycleで画像リサイズ

質問

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.4

mikemike7 · ベストアンサー

>やはり左側に200px程の余白が空きます。

.cycle()を呼び出した時点でIMG要素に
position: absolute;
left: 0px;
が追加されるからではないでしょうか。

どういうスライドショーにしているかわかりませんが、
jquery cycle pluginでは目的の実装は難しそうですね。

お礼

そうなのですね。

あと少しだと思ったのですが、
悔しいですね。。

本当にありがとうございました。

回答No.3

mikemike7

>画像を画面中央に表示する方法を今度は探すことになりました。。
ああ、画面中央よりにしたいんですね。

>なんとなくモニタをたてがたのものに変えたところきれいに
>画面に収まりました。
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

mikemike7

>けれど、どの画像も表示位置が右寄りになってしまい、
>左側に３cmくらいのスペースが必ず開くようになってしまいました。。
それはCSSの問題では？
すでにされているCSS指定に原因があるのでしょうが、
CSS部分は提示されていないので。

#slideImage{
text-align: left;
margin-left: 0;
}

補足

最初、cssには何も記載していなかったので、
上記のmarginをautoにしたり、margin-leftの設定を
色々変更したのですが変わらずでした。
なんとなくモニタをたてがたのものに変えたところきれいに
画面に収まりました。
これは一体(笑)

回答No.1

mikemike7

試してみましたが、サイズは変わりました。

resize()を呼び出してないだけってことはないですよねえ？

$(function() {
resize();
$('#slideImage').cycle('command');
});

お礼

解決、とした後ですがご報告します。
スライドが中心に寄らないということでしたが、
画像のリサイズ後に余白部分のピクセルを計算して、
vspace,hspaceとして入れることで無事中央寄せができるようになりました！

上記の過程で画像の左側のスペースの問題も解決できました！！

mikemike7様、本当にありがとうございました！！＞＜

補足

resize()をonloadイベントで呼び出していたため、
上記に変更したところ無事リサイズすることができました。
ありがとうございます！

けれど、どの画像も表示位置が右寄りになってしまい、
左側に３cmくらいのスペースが必ず開くようになってしまいました。。

画像を画面中央に表示する方法を今度は探すことになりました。。