Toggle Galleria Полноэкранный режим

Question

Мне интересно, знает ли кто-нибудь, как переключаться между полноэкранным и нормальным режимами в Galleria

Единственный способ, которым я могу придумать, - это переключаться между темами: по умолчанию и полноэкранной темой (которую я купил оттуда)

Если вы знаете еще лучший способ, я был бы признателен за вашу помощь.

Answer 1

Я просто добавлю к ответу @ Ohgodwhy:

Лучший способ получить экземпляр Galleria и использовать API - это использовать функцию Galleria.ready:

Galleria.ready(function() {
  var gallery = this; // galleria is ready and the gallery is assigned
  $('#fullscreen').click(function() {
    gallery.toggleFullscreen(); // toggles the fullscreen
  });
});

Или вы можете получить доступ к экземпляру через объект $.data, если знаете, что галерея инициализирована:

$('#fullscreen').click(function() {
  $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});

Я предполагаю, что у вас есть ссылка / кнопка с идентификатором 'fullscreen' и галереейнаходится на ID 'Galleria'.

Answer 2

Я использую:

lightbox: true,

до Galleria.run().Это позволяет отображать полноэкранный оверлей после нажатия на изображение в галерее.

Answer 3

Это должно работать:

JS

Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js');

$('#galleria').galleria();

Galleria.ready(function() {
    var gallery = this;
    this.addElement('fscr');
    this.appendChild('stage','fscr');
    var fscr = this.$('fscr')
        .click(function() {
            gallery.toggleFullscreen();
        });
    this.addIdleState(this.get('fscr'), { opacity:0 });
});

CSS

.galleria-fscr{
    width:20px;
    height:20px;
    position:absolute;
    bottom:0px;
    right:10px;
    background:url('fullscreen.png');
    z-index:4;
    cursor: pointer;
    opacity: .3;
}
.galleria-fscr:hover{
    opacity:1;
}

Где fullscreen.png - этоподходящее изображение на ваш выбор.

Answer 4

Подход Ричарда работает очень хорошо.

Вы также можете сделать это, расширив Galleria без функции готовности:

JS

    Galleria.run('.galleria', {

    // configure
    autoplay: true,
    lightbox: true,
    idleMode: true,

    // extend theme
    extend: function() {
        var gallery = this; // "this" is the gallery instance

        //fullscreen button
        this.addElement('fscr');
        this.appendChild('stage','fscr');
        var fscr = this.$('fscr').click(function() {
            gallery.toggleFullscreen();
        });

        // this.addIdleState(this.get('fscr'), { opacity:0 });
    }
  });`

И если вы хотите использовать значок fontAwesome для значка максимизации, вы можете реализовать его следующим образом (другие стили CSS см. В сообщении Ричарда):

CSS

    .galleria-fscr:before {
      content: "\f065"; /* char code for fa-expand */
      position: absolute;
      font-family: FontAwesome;
      color: #fff;
   }

(не забывайте включать таблицу стилей fontAwesome с <link rel="stylesheet" href="css/font-awesome.min.css">)

У меня все еще есть одна проблема с кнопкой максимизации.Если я парю над ним, он не становится белым и остается серым.Возможно, что-то с состоянием IDLE не так, но я пока не нашел решения.(Если я удаляю строку кода с помощью this.addIdleState(...), зависание работает. Мне нужно сделать больше тестов здесь.)

Я также хотел бы изменить значок с максимизировать на значок минимизации, когда экран включенна весь экран, но я пока не знаю, как это сделать.Это также в моем списке задач.

Обновление 07.02.2014

Я выяснил, как решить эти две проблемы:

• Для "состояния IDLE"проблема - я удалил состояние IDLE.Потому что мне все равно, есть ли эти элементы управления постоянно, и теперь парение работает, как и ожидалось.Возможно, я проверю другое решение позже.

• Чтобы изменить значок при нажатии, вы можете сделать это с помощью CSS и jQuery:

  1. Добавить переопределяющий CSSправило ниже первого до фильтра значка максимизации в вашей CSS например:

     .galleria-fscr.minimize:before{
         content: "\f066";
      }
     

  2. Добавьте эти строки JS после gallery.toggleFullscreen()- переключает значок при каждом щелчке между обычным стилем перед и стилем минимизации перед:

     $(".galleria-fscr").toggleClass("minimize");
     

Это также работает для кнопки воспроизведения / возобновления (остальная часть кода аналогична полноэкранному коду):

JS

    ...
    gallery.playToggle();
    $('.galleria-pauseResumeBtn').toggleClass("resume");

Answer 5

Из документации Galleria.

.enterFullscreen( [callback] )

Это позволит установить галерею в полноэкранном режиме. Он временно манипулирует некоторыми стилями документов и взрывает галерею, чтобы закрыть экран браузера. Обратите внимание, что он будет заполнять только окно браузера, а не экран клиента (javascript не может этого сделать).

.toggleFullscreen( [callback] )

Переключение в полноэкранный режим.

Если вам нужно какое-либо дальнейшее объяснение их использования, пожалуйста, не стесняйтесь спрашивать.