レスポンシブ幅のページで jquery GalleryView スライダー プラグイン (http://spaceforaname.com/galleryview/) を使用しようとしています。そのため、ウィンドウのサイズが変更されると、スライダーを含む列も変更されます。
ウィンドウのサイズが変更されたときに、スライダーのサイズを変更する必要があります。
このページはhttp://www.folknfuture.com/product.php?id_product=1で見ることができます。
これまで私はこれを行ってきました...
プラグイン内で、これを (約 220 行目で) 配置して、スライダーが含まれる div に収まるようにします。
var parentW = $('#pb-right-column').width();
// panels
dom.gv_panel.css({
width: parentW,//this.opts.panel_width,
height: this.opts.panel_height
});
dom.gv_panelWrap.css({
width: gv.outerWidth(dom.gv_panel),
height: gv.outerHeight(dom.gv_panel)
});
dom.gv_overlay.css({
width: parentW//this.opts.panel_width
});
そして、正常に動作するギャラリーを作成しますが、ウィンドウの幅が変更されたときに幅を変更する方法がわかりません。「gal」をnullに設定してから新しいギャラリーを作成しようとしましたが、最初の含まれているdivから画像が削除されているため、機能しません。
var gal;
$(document).ready(function(){
gal = $("#images").galleryView();
});
$(window).resize(function() {
//gal.init();
});
ギャラリーを再度初期化する必要がありますか? ブラウザでスクリプトを調べても、ギャラリー オブジェクトが見つかりません。助けていただければ幸いです。前もって感謝します..
ギャラリーが作成されたときに #images div が消えているため、うまくいきません。だから私は次のことを試しました:
var gal;
$(document).ready(function(){
gal = $("#images").galleryView();
});
function setGallery(width) {
gal.opts.panel_width = width; // panel_height:height
}
$(window).resize(function () {
//calculate relative height and width
var parentW = $('#pb-right-column').width();
setGallery(parentW);
});
しかし、ギャルオブジェクトが未定義であると言われているため、これも機能しません。他のアイデアはありますか?