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

Question

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

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

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

Answer 1

Я просто хочу, чтобы добавить @ ответ Ohgodwhy в:

Лучший способ получить экземпляр Галерею и использовать 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 
}); 

Я предполагаю, что у вас есть ссылки/кнопки с fullsc идентификатор» reen ', а галерея находится в ID' galleria '.

Answer 2

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

.enterFullscreen([callback]) 

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

.toggleFullscreen([callback]) 

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

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

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

Я использую:

lightbox: true,

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

Answer 5

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

Вы также могли бы сделать это за счет расширения 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(...), то здесь нужно делать больше тестов.)

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

Update 07.02.2014

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

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

• Чтобы изменить значок мыши вы можете сделать это с CSS и JQuery:

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

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

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

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

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

JS

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