1

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

4

2 回答 2

0

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

    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);
    });
于 2012-05-09T09:39:28.343 回答
0

不幸的是，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);
});

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

于 2014-04-09T13:32:50.257 回答