CODEWITHSUNDEEP
jquerypluginssliderresponsive-designgalleryview
Finn Fitzsimons
Finn Fitzsimons

Reputation: 324

How to resize/remake jQuery GalleryView slider on window resize?

I am trying to use the jquery GalleryView slider plugin (http://spaceforaname.com/galleryview/) on a page with a responsive width - so when the window is resized the column containing the slider changes too.

I need to resize the slider when the window is resized.

You can see the page at http://www.folknfuture.com/product.php?id_product=1

So far I have done this...

Inside the plugin I put this (at about line 220) to make the slider fit to its containing 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
            });

And then I create the gallery which works fine - but I have no clue how to make it change width when the window width changes. I tried setting 'gal' to null and then making a new gallery - but it doesnt work because the images have been removed from their initial containing div. 

var gal;
$(document).ready(function(){
    gal = $("#images").galleryView();
});

$(window).resize(function() {
    //gal.init();
});

Do I need to init the gallery again? I cant even find any gallery objects when I inspect the scripts in my browser. Help would be much appreciated. Thanks in advance..

Nope that doesnt work because the #images div has disappeared when the gallery is created. So I tried the following: 

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

But this doesnt work either because it says the gal object is undefined. Any other ideas?

Upvotes: 1

Views: 1867

Answers (2)

PaulSkinner
PaulSkinner

Reputation: 628

Anup Das Gupta's answer won't work unfortunately, but a solution to this (which I will admit is a little dirty) is to store the HTML of the unadulterated list in a variable before galleryview alters everything, then you can destroy the galleryview div on each resize and reinstate the old HTML version, which you can then re-apply galleryview to.

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

This is obviously pretty intensive as it destroys and recreates the gallery on every resize, but it nonetheless does solve the problem.

Upvotes: 0

Anup Das Gupta
Anup Das Gupta

Reputation: 771

I think you can try something like this. Code is not tested-

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

Upvotes: 0

Related Questions