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,
//省略
});
}
}
お礼
>Gottholdさん ありがとうございました。 大変勉強になりました。