2012-02-15 84 views
7

誰もが私は考えることができる唯一の方法は、テーマを切り替えることであるGalleria切り替えガレリアフルスクリーンモード

で全画面表示と通常モードを切り替える方法を知っている場合、私は疑問に思って:(デフォルト、およびフルスクリーンテーマた私から購入しました)

あなたがもっと良い方法を知っていれば、私はあなたの助けに感謝します。

答えて

12

私はちょうど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 
    }); 
}); 

あるいは、私が想定しています

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

あなたはIDが「fullscとのリンク/ボタンを持っている:あなたはギャラリーが初期化されていることがわかっている場合、あなたは$.dataオブジェクトを介してインスタンスにアクセスすることができますreen '、ギャラリーはID' galleria 'にあります。

+0

ありがとう! .data(..)がなくなっていたので、私はそれを呼び出すようになりました。どこかのスタイリングのバグがあります。このページをチェックしてください:http://alturl.com/ycfy4そしてfirebugを使って全画面を切り替えてみてください何か...何か魚がいる、私はあなたがそれを把握するのを助けることができることを願って:) –

+0

@DanyKhalife "ファイヤーバグを使用してフルスクリーンを切り替える"とはどういう意味ですか?あなたはリンクのようなトリガがクリックでそれをトグルする必要があります。 – David

+0

でも、FirebugのコンソールでJavascriptコマンドを実行できます。あなたがコードをコピーしてfirebugコンソールに貼り付けると(ギャラリーを含んでいるページで)、あなたは次のようになります: '$( '#galleria')data( 'galleria').toggleFullscreen();'クリックされたボタンによってトリガされたかのようにコードが実行されます –

1

ガレリアのドキュメント。

.enterFullscreen([callback]) 

これにより、ギャラリーがフルスクリーンモードに設定されます。それは一時的にいくつかの文書スタイルを操作し、ギャラリー画面を覆うためにギャラリーを爆破するでしょう。クライアントの画面ではなくブラウザのウィンドウにのみ表示されます(javascriptではできません)。

.toggleFullscreen([callback]) 

フルスクリーンモードを切り替えます。

これらの使用についてさらに説明が必要な場合は、お気軽にお問い合わせください。

+0

ありがとうございます、しかし、問題は私がこれを使用する方法を見ていない..言い換えれば、どこから呼び出す必要がありますか?ギャラリーのjqueryセレクターですか?私はそれを定義していないので...)それ以外のものは、私はgalleriaのホームページのように全画面ボタンを自動的に追加するものを探していました...どんな考えですか? –

+0

ドキュメントに説明されている使いやすさに基づく私の仮定は - > です。まず、トリガイベントが必要です。これにはjqueryを使用できます。私たちはクリックイベント、$( "element")を使うことができます。click()、またはドキュメントの読み込み$(function(){、いずれにしても、enterFullscreenはギャラリーの要素になります。もしギャラリーが#galleryのidを持っていれば、$( "element")になります。 ")は、あなたがトリガーアクションにしたいものであれば何でも構いません。#button1というidを持つ入力があれば、$("#button1 ")。 – Ohgodwhy

+1

@Ohgodwhynotかなり、あなたは' $( "#gallery" .data( 'galleria')。enterFullscreen(); ' – David

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 fullscreen.pngはあなたの選択の適切な画像である

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

4

私が使用しています:

lightbox: true,

Galleria.run()前に。これにより、ギャラリー内の画像をクリックした後、フルスクリーンオーバーレイを表示することができます。

2

リチャードからのアプローチは非常にうまくいっています。

またしてアウトレディ機能ガレリアを拡張することでそれを行うことができます:

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

<link rel="stylesheet" href="css/font-awesome.min.css">でfontAwesomeのスタイルシートを含めることに注意してください)

私はまだ最大化ボタンの一つの問題を抱えています。私がその上を浮遊しているなら、それは白くならず、灰色のままです。 IDLE状態のものが間違っているかもしれませんが、まだ解決策が見つかりませんでした。 (this.addIdleState(...)でコードラインを削除した場合、ここでさらにテストを行う必要があります)

画面がフルスクリーンで表示されるとアイコンを最大化から最小化アイコンに変更したいのですがそれをどうやってやるかわからない。それは私のtodoリストにもあります。

アップデート2014年2月7日

は、私はこれらの2つの問題を解決する方法を考え出し: "IDLE状態" の問題については

  • - 私はIDLE状態を削除しました。これらのコントロールが永久に存在するかどうかは気にしないので、現在ホバリングは期待通りに機能します。多分私は別の解決策を後でチェックします。

    :あなたのCSSなどで最大化アイコンのフィルタの前にまず下記のオーバーライドCSSルールを追加します

    1. :あなたはCSSとjQueryでそれを行うことができますクリック上のアイコンを変更するには

    2. .galleria-fscr.minimize:before{ 
          content: "\f066"; 
      } 
      
    3. gallery.toggleFullscreen()後にこれらのJSの行を追加します - スタイル前の通常の間のすべてのクリックやマイルでアイコンを切り替えますスタイル前nimize:

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

これは、再生/再開ボタンにも機能します(コードの残りの部分はフルスクリーンコードにsimillarです):

JS

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