javascript - Galleria - hide thumbnail carousel div - Stack Overflow

admin管理员组

文章数量:1310415

We are using Galleria library (/) 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.

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.

• javascript
• css
• slideshow
• image-gallery
• galleria

Share Improve this question Follow asked Feb 16, 2012 at 12:29 MandarMandar 30366 silver badges1818 bronze badges 1

• Use case for this requirement would be to produce just a rolling set of images without any navigation controls. – Mandar Commented Feb 16, 2012 at 12:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 plex plugin for such a simple task? You can get a cleaner result by using the jQuery Cycle plugin.

I could not solve the problem with jquery / gallery.js -but this workaround does the job: overrride styles dynamicly (adapt to your values needed):

function fixcss()
     {
          // dynamic overides of styles because all ties to change css with jquery 
          //galleria.js unsucsessful...

          if  (! thumbnails)
          { 
            var sheet = document.createElement('style')
            sheet.innerHTML = ".galleria-stage {bottom: 60px !important; } \
                               .galleria-info {bottom: 0px !important } \
                               .galleria-thumbnails-container {height: 0px \ 
                                 !important;}";
            document.body.appendChild(sheet); 
          }                

          if ( ! showInfo ){
             var sheet = document.createElement('style')
             sheet.innerHTML = ".galleria-stage {bottom: 80px !important; } \
                                .galleria-info {bottom: 10px !important }";
             document.body.appendChild(sheet);
            }

       }; 
       $(document).ready(function() {
        Galleria.loadTheme('++resource++fgrcon.slideshow/galleria.classic.js');
        Galleria.configure({
           transition: 'fade',
           transitionSpeed: transitionSpeed,              
           autoplay:        galleryduration,
           lightbox:        lightbox    ,
           showInfo:        showInfo    ,
           showCounter:     showCounter ,
           showImagenav:    showImagenav,
           thumbnails:      thumbnails ,
           height:          galleryheight 

        });

           fixcss();   
           Galleria.run('#galleria');

        } 

      );

本文标签： javascriptGalleriahide thumbnail carousel divStack Overflow