jQueryの記述についてご指摘ください。

質問

jQuery初心者で大変恐縮ですが、質問させていただきました。

「mLivre」というプラグインを使用しております。（下記URLを参照ください）

※参考サイト
雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
http://coliss.com/articles/build-websites/operation/javascript/jque...

このプラグインは本をめくるように画像を表示してくれるプラグインです。

レスポンシブでも動くようにしたいと思い、コードを記述してみました。
画像自体はレスポンシブになりましたが、プラグインの動作が少しおかしくなってしまいました。
リサイズすると、めくる様な動作をしてくれますが、画像が切り替わらなくなってしまいました。
原因は、リサイズ時に画像の枚数のカウントがおかしくなっているせいだと思いますが、
どう変えればいいのかわからずに困っております。

「mLivre.js」自体はいじっておりません。
スクリプト実行部分に記述を追記いたしました。
下記にコードを記述いたしましたので、もしよろしければご指摘いただければと
思います。
よろしくお願いいたします。
------------コード---------------
jQuery(document).ready(function() {
var imgW;
var imgH;
var winW;
var scaleW;
var setW;
var setH;
setSize();

//リサイズしたら実行
jQuery(window).resize(function(){
setSize();
});

function setSize() {
//元の画像サイズ指定
imgW = 500;
imgH = 375;

//横幅に合わせて縦幅の調整
winW = jQuery( '#page' ).width();
scaleW = winW / imgW;
setW = winW;
setH = imgH * scaleW;

//要素の画像サイズ
jQuery("#slide img").width(setW);
jQuery("#slide img").height(setH);

//実行部分
jQuery('#slide').mLivre({
width:setW,
height:setH,
dossier:'http:/画像のURL/images...
});
}
});

回答No.1

fujillin · ベストアンサー

mLivreは知りませんし内容を見たわけでもないので、想像だけでの回答ですが…

リサイズ時に再定義しようとなさっているようですが、その際に、ほとんどの変数等は上書きされるとは思いますが、イベント処理に関してはダブって設定されてしまう可能性が高いと想像されます。
その結果、動作がおかしくなっているのではないでしょうか？
先に設定されている処理内では、再定義前のサイズが生きている可能性もあります。

御提示のライブラリではAPIなどは開放されていないようなので、内容を解析してサイズの定義部分等を探し、リサイズ時に再定義するのではなく、その部分だけ修正するようにすれば動作するのではないかと想像します。
対象部分には外部から直接アクセスできない場合も考えられますが、その場合は、リサイズ時の処理自体をmLivreに付け加えてしまうとか。

あるいは、イベント処理だけが問題であるならば（違う可能性もありますが）、内部のイベント設定時に以前のイベントをクリアしてから新しく設定するように修正するとかでもいけるかも知れません。
いずれにしろ、リサイズに対応しようとするなら、内容の解析が必要そうです。

とりあえずの代替案として、初期設定時に画面サイズ等を取得して、それに合わせて表示するといったようにすれば、ご質問のような問題が生じることはないと想像します。

（御提示のリンク先は繋がっていないようです。）

お礼

fujillinさん

ご回答ありがとうございます。

私にはレベルが高すぎるようです。
もう少し勉強し、再度改めて質問するなりいたします。

どう対応していけばいいのかとても参考になりました。
ありがとうございました。

URLリンク念のため下記になります。
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html