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,
//省略
});
}
}
お礼
ご回答ありがとうございます。 どうもこのプラグインは、フォームの中の要素をdivやリストに変換して更にCSSでデザインを整えているようで、cssの削除だけではうまくいきませんでした。 jsの中の、その変換するように書いてある部分を消せば良いのだと思うのですが、jQueryの知識に疎く、なんとなくそれっぽい部分を消してみても他に不具合が出てしまいました。(多分消すところが間違っている…) もうちょっといろいろ試して見ようと思います。 ありがとうございました。
補足
jsのほうを修正で、なんとかなりました。 お騒がせしました。