如何在窗口調整大小/重製jQuery GalleryView滑塊？

我想在響應寬度的頁面上使用jQuery的GalleryView滑塊插件（http://spaceforaname.com/galleryview/） - 所以當窗口調整大小時，包含滑塊的列也會發生變化。如何在窗口調整大小/重製jQuery GalleryView滑塊？

我需要在調整窗口大小時調整滑塊大小。

您可以在http://www.folknfuture.com/product.php?id_product=1

到目前爲止，我已經做到了這一點看網頁...

我把這個（約線220）插件裏面，使滑塊適合其包含分區：

  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對象是未定義的。有沒有其他想法？

來源

2012-05-09 Finn Fitzsimons

我想你可以嘗試這樣的事情。代碼不作測試

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-09 09:39:28

阿努普達斯古普塔的回答不會遺憾的是工作，而是一個解決方案（我會承認是有點髒）是之前未摻雜列表的HTML存儲在一個變量galleryview改變了一切，然後你可以銷燬每個調整大小的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-09 13:32:50 PaulSkinner

如何在窗口調整大小/重製jQuery GalleryView滑塊？

回答

相關問題