切換廣場全屏模式

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

我假設你有ID爲「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()。這允許您在點擊圖庫中的圖像後顯示全屏疊加。

Answer 5

理查德的方法工作得很好。

你也可以做它用時的就緒功能擴展廣場：

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">樣式表）

我仍然有一個問題的最大化按鈕。如果我徘徊在它上面，它不會變白並保持灰色。也許有些空閒狀態是錯誤的，但我還沒有找到解決方案。 （如果我刪除了代碼行this.addIdleState(...)懸停的作品，我需要在這裏做更多的測試。）

我也想把圖標從最大化改爲最小化圖標，一旦屏幕全屏顯示，但我不知道該怎麼做。這也是我的待辦事項清單。

更新2014年2月7日

我想通了，如何解決這兩個問題：

• 對於「空閒狀態」的問題 - 我已經刪除了空閒狀態。因爲我不在乎這些控件是否永久存在，現在如預期的那樣懸停工作。也許我稍後再檢查另一個解

• 要更改的圖標上點擊一下，你可以用CSS和jQuery做到這一點：

  1. 的最大化圖標的過濾器之前添加下面的第一個壓倒一切的CSS規則在CSS如：

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

  2. 添加這些JS行之後gallery.toggleFullscreen() - 即切換風格和MI前與正常之間的每一次點擊的圖標nimize前風格：

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

這工作也爲播放/恢復按鈕（代碼的其餘部分是呈三角全屏代碼）：

JS

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