Galleria - hide thumbnail carousel div

Question

We are using Galleria library (http://galleria.io/) for dynamically generating slideshow from a set of user selected images. The user can also select a few options like height, width, transition speed, show/hide thumbnail carousel etc. and these settings are applied to Galleria options.

Now when user selects to hide carousel, I set relevant options which makes the thumbnails in the carousel disappear. However, the container div (with css class galleria-thumbnails-container) still occupies some whitespace. I tried changing a few css attributes of this class as well as galleria container w/o any luck.

Things I have tried:

• After selecting div with class "galleria-thumbnails-container", change height to 0. No change observed.
• After selecting div with class "galleria-thumbnails-container", change display to none. No change observed.
• After selecting div with class "galleria-container notouch", reduce height by say 70 px. This reduced the height of main image in the slideshow.

I have gone through Galleria doc but they do not seem to have an option to handle this. So it has be a css hack. Any ideas?

Thanks.

Answer 1

You can turn off the thumbnails by using the following option on the script:

$('#galleria').galleria({
    thumbnails: "false"
});

Documentation

thumbnails

    type: Boolean or String
    default: true

---

Took a look at your link and that space below your slider is made due to the fact that your images are not scaling according to the width/height you specified in your script, and also due to some spacing on the .galleria-stage class. Try this to fix it:

javascript

$('#slideshow_1749').galleria({
    data_source: mmod_slideshow_data,
    dummy: '/images/default.jpg',
    showCounter: false,
    width: 300, /* scale accordingly */
    height: 300, /* scale accordingly */
    autoplay: 3000,
    carousel: false,
    thumbnails: false,
    showImagenav: false,
    carousel: false,
    thumbFit: false,
    thumbMargin: 0,
    imageCrop: "height"
});

CSS

.galleria-stage { /* modify line 17 of your galleria.classic.css stylesheet */
    bottom:10px; /* define the bottom spacing, same as top/left/right */
}

Just a side note, but why use such a complex plugin for such a simple task? You can get a cleaner result by using the jQuery Cycle plugin.