Question

I’m using the jQuery GalleryView plugin. I’ve use the plugin on one page and contained it in a div with the appropriate code which sends the div’s id to the external GalleryView .js file.

I’m also using jQuery to hide the div on document ready, so the users can toggle the visibility, but for some reason when the div is hidden innitially, the gallery does not load correctly. I believe this may be because the script inside the code is not being called due to it’s hidden status.

I hope I have explained this clearly enough. Does anyone have any ideas?

The plugin home page can be found here or I believ the jQuery page is more up to date but not as well documented.

Answer 1

Most likely, the gallery has issues calculating widths/height because the elemens are hidden ..

you should either hide the elements after the gallery has initialized, or move it off-screen by CSS (initially) and once the gallery initializes, hide it and bring it back to its position..

Update
(after comments and inspecting the plugin source code)

The issue is definitely the hiding of the containing div by you at document ready event.
The true problem is that the plugin executes its code at window load and not dom ready, meaning after the images have loaded..

If you hide it before it gets executed, the plugin fails to correctly identify some properties of the images like width/height etc..

If the space the gallery occupies is the same whether it is hidden or show, then i would suggest that instead of hiding the container, to set visibility:hidden. This does not skew the properties of the images like the display:none does (its is what .hide() uses)

so

$(document).ready(){
  // hide container
  $('#container').css('visibility','hidden');
  // plugin init call here
  $('#id').galleryView({...});
}

If you need the gallery to dissapear and also free its space when hidden, then you need to call the hiding, after the plugin has completed its initialization..

$(document).ready(){
  // plugin init call here 
  $('#id').galleryView({...});
}

$(window).load(){
  // your code to hide the container of the gallery
  // we use timeout to give some time for the gallery code to execute first..
  setTimeout(function(){ $('#containerid').hide(); }, 100 );
}