Question

我正在尝试在具有响应宽度的页面上使用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对象是未定义的。还有其他想法吗？

Answer 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);
    });

Answer 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);
});

这显然非常密集，因为它会在每次调整大小时销毁并重新创建图库，但它确实解决了这个问题。

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

2 个答案: