Galleria - скрыть миниатюру карусели div - PullRequest
Новая
       8

Galleria - скрыть миниатюру карусели div

2 голосов
/ 16 февраля 2012

Мы используем библиотеку Galleria (http://galleria.io/) для динамического создания слайд-шоу из набора выбранных пользователем изображений. Пользователь также может выбрать несколько параметров, таких как высота, ширина, скорость перехода, показать / скрыть карусель миниатюр и т. Д., И эти настройкиприменяются к параметрам Galleria.

Теперь, когда пользователь выбирает скрыть карусель, я устанавливаю соответствующие параметры, чтобы миниатюры в карусели исчезали, однако контейнер div (с классом css galleria-thumbnails-container) по-прежнему занимаетнекоторые пробелы. Я попытался изменить некоторые атрибуты CSS этого класса, а также контейнер Galleria без удачи.

Вещи, которые я пробовал:

  • После выбора div с классом "galleria-thumbnails-container ", измените высоту на 0. Изменений не наблюдается.
  • После выбора div с классом" galleria-thumbnails-container "измените отображение на none. Изменений не наблюдается.
  • После выбора элемента div с классом «galleria-container notouch» уменьшите высоту, скажем, на 70 пикселей. Это уменьшитвысота основного изображения в слайд-шоу.

Я просмотрел Galleria doc, но, похоже, у них нет возможности справиться с этим.Так что это должно быть взломать CSS.Есть идеи?

Спасибо.

Ответы [ 2 ]

7 голосов
/ 16 февраля 2012

Вы можете отключить миниатюры, используя следующую опцию в скрипте: 

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

Документация 

thumbnails

    type: Boolean or String
    default: true

Взглянул наВаша ссылка и пространство под ползунком созданы из-за того, что ваши изображения не масштабируются в соответствии с шириной / высотой, указанной вами в вашем скрипте, а также из-за некоторого расстояния в классе .galleria-stage.Попробуйте это исправить:

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 */
}

Просто примечание, нозачем использовать такой сложный плагин для такой простой задачи?Вы можете получить более чистый результат, используя плагин jQuery Cycle .

0 голосов
/ 03 ноября 2013

Я не могу решить проблему с jquery / gallery.js, но этот обходной путь делает работу: Переопределять стили динамически (адаптироваться к вашим нужным значениям): 

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

        } 

      );
...