こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

jQueryリサイズ処理と記述でご指摘ください。

jQueryプラグインで、「mLivre」というプラグインを使っております。

※mLivre:[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html

「mLivre」は画像をめくるように表示してくれるプラグインです。
このプラグインをレスポンシブにしたいと思い、リサイズ命令でブラウザサイズに合わせて
大きさを変えていきたいと思っております。

現時点で画像の表示自体はリサイズ出来ておりますが、
ページをめくる動作でアニメーションの表示が上手くいきません。
一番初めの数値(ページを開いた時点での数値)を記憶しているのか、
一番初めに表示されていた場所から画像がめくられてしまいます。
(説明が下手で申し訳ございません)

素人で恐縮ですが、私の記述で間違っているところがあり
私自身、間違いに気付けない状態です。
下記にコードを記述いたしました。
ご指摘いただければと思います。

---------「mLivre」呼び出し部----------
jQuery(function() {
var imgWi;
var imgHi;
var winWi;
var scaleWi;
var setWi;
var setHi;
setSize();
jQuery('#slide').mLivre({
pageDefault:0,
over:true,
loader:true,
eventLoad:null,
eventOpen:null,
width:setWi,
height:setHi,
dossier:'http://URL/images/slide/', //画像
});
function setSize() {
//画像サイズ指定
imgWi = 500;
imgHi = 375;
winWi = jQuery( '#branding' ).width();
scaleWi = winWi / imgWi;
setWi = winWi;
setHi = imgHi * scaleWi;
jQuery("#slide img").width(setWi); //画像の大きさ
jQuery("#slide img").height(setHi);
}
});


------「mLivre」コア部----------
//11行目はじまり
(function(jQuery) {
jQuery.fn.mLivre = function(options,num) {
switch (options) {
//switch部 略
//
break;
}
//↓追加したリサイズ部
jQuery(window).resize(function(){
var imgWi;
var imgHi;
var winWi;
var scaleWi;
var setWi;
var setHi;
imgWi = 500;
imgHi = 375;
winWi = jQuery( '#branding' ).width();
scaleWi = winWi / imgWi;
setWi = winWi;
setHi = imgHi * scaleWi;
jQuery("#slide img").width(setWi); //画像の大きさ
jQuery("#slide img").height(setHi);
var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options);
jQuery(this).each(function() {
var $obj=jQuery(this);
opts.width = setWi;
opts.height = setHi;
jQuery(".mLivre").width(setWi); //プラグインの大きさ
jQuery(".mLivre").height(setHi);

});
});

//↓元々の記述、変更していません
var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options);
jQuery(this).each(function() {
var $obj=jQuery(this);
//省略

})(jQuery);
var mLivre={ //ここからが処理部(アニメーション)だと思います。(変更していません)
progress:false,

//省略

});
}
}

投稿日時 - 2013-02-18 11:08:02

QNo.7951410

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

styleのzoomとかを使ったらどうなりますか?

投稿日時 - 2013-03-16 07:19:05

あなたにオススメの質問