如何在窗口调整大小时调整/重新制作 jQuery GalleryView 滑块？答案

【问题标题】：How to resize/remake jQuery GalleryView slider on window resize?如何在窗口调整大小时调整/重新制作 jQuery GalleryView 滑块？
【发布时间】：2014-04-09 21:32:50
【问题描述】：

我正在尝试在具有响应宽度的页面上使用 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); 
});

但这也不起作用，因为它说 gal 对象未定义。还有其他想法吗？

【问题讨论】：

标签： jquery plugins slider responsive-design galleryview

【解决方案1】：

我认为你可以尝试这样的事情。代码未经测试-

    var gal;
    $(document).ready(function(){
        setGallery(300, 700)
    });
    var gal;
    function setGallery(height, width)
    {
        gal = $("#images").galleryView({
          panel_width:width,
          panel_height:height
        });
    }
    $(window).resize(function () {
        //calculate relative height and width
        setGallery(height, width);
    });

【讨论】：

【解决方案2】：

不幸的是，Anup Das Gupta 的回答不起作用，但解决方案（我承认这有点脏）是在 galleryview 更改所有内容之前将纯列表的 HTML 存储在一个变量中，然后您可以销毁每次调整galleryview div并恢复旧的HTML版本，然后您可以重新应用galleryview。

var old_html;
$(document).ready(function(){
    old_html = $('#containing-div').html();
    setGallery(300, 700);
});
function setGallery(height, width)
{
    $("#images").galleryView({
      panel_width:width,
      panel_height:height
    });
}
$(window).resize(function () {
    $('.gv_galleryWrap').remove(); //remove the galleryview butchered code
    $('#containing-div').html(old_html); //reinstate the original HTML
    //calculate relative height and width here
    setGallery(height, width);
});

这显然非常密集，因为它会在每次调整大小时破坏并重新创建画廊，但它确实解决了问题。

【讨论】：