ギャラは、あなたのウェブサイトに素敵な画像ビューアを持っているしたい場合は、ウェブ上でそこにいる多くのオプションの1つです。これは、"画像ギャラリー"であると主張するが、私はそれは、通常、"スライドショー"と呼ばれるもののように見えると言うでしょう。コードが簡単にセットアップされ、それが(ブラウザのロードに多くの努力をしていません)非常に軽量です。それが、私はいくつかの人々は、自分のサイトにこのツールを使用したいが、どのように(デザイナーいくつかの種類の)プログラムには全く考えを持っていると思うと述べた。これは従うだけで簡単にステップをあなたのサイトにそれを取得する方法のステップの説明が。私は後のセクションでいくつかのより高度なトピックに行くつもりです。
ギャラコアとテーマやアドオンの数は、100%は無料、コピーを使用して販売し、再配布になりますMITライセンスの下でライセンスオープンソース。 [1]これは、コードで遊んですることができますし、ニーズに合わせて、それを微調整することを意味します。それはナイスなことだが、インターフェイスは、実際にそれに関連付けられているたくさんのオプションを持っています。
さらに、それはライトのプログラムとの統合は非常に簡単と呼ばれる Fancybox 。その他のライトのアプリケーションは、同様の方法で動作しますが、それは私が作業しているものですので、私は私の目的のためにFancyboxに焦点を当てます。
手始めに、以下にいくつかの有用なリンクを見る:
- ホームページのガレリア : http://galleria.aino.se/
- ダウンロードギャラ: http://github.com/aino/galleria
- を参照してくださいデモ : http://galleria.aino.se/media/galleria/src/themes/classic/classic-demo.html
- Fancybox(オプション): http://fancybox.net/
ダウンロード前のセクションのリンクからコードを返します。解凍あなたが選んだのディレクトリに内容を表示します。
ダウンロードサイトにいくつかのフォルダにソースコード:例:/ツール/ガレリア/
このフォルダの下には、"プラグイン"と"テーマ"フォルダが作成されます。あなたの場所のソースコードを持っているので何もないよりは、それを実行する必要があります。これは、インストールされています。
あなたはギャラアプリを試すことができますので、サンプルのHTMLページを作成します。以下のセクションでは、どのようにサンプルページへのギャラを統合する方法を示します。
Webページ上にギャラのアプリを追加するには、次の操作を行います。
1。あなたの頭の'セクションに、次の2つの行を追加します。
未満スクリプト 鉄骨 = "ツール/ ガレリア / galleria.js " >未満 / スクリプト >
2。あなたのイメージにいくつかの参照を追加します。あなたがこれは画像のキャプションとして表示される画像に"alt"属性を追加することができます
未満スペース Altキーを押し = "リス!すべてであることを確認します。" 鉄骨 = "http://wiki.com/commons/thumb/0/02/Hofgarten_edit.jpg~~V" >
未満スペース 鉄骨 = "http://wiki.com/commons/thumb/Sea-otter-morro-bay_13.jpg~~V" >
未満スペース 鉄骨 = "http://wiki.com/commons/thumb/Kuznetsk_Alatau_3.jpg~~V" >
未満スペース Altキーを押し = "イチゴ、yumをyumを!輝いている赤い" 鉄骨 = "http://wiki.com/commons/thumb/d/de/strawberries_red_accent.jpg~~V" >
未満 / 部 >
3。リファレンスガレリアの画像のdiv。
ギャラ。 loadTheme ( '/ツール/ガレリア/テーマ/クラシック/ galleria.classic.js' ) ;
/ /ギャラを初期化します。
$ ( '#ガレリア' ) 。 ガレリア ( ) ;
つまり、このアプリケーションを使用する必要があることを実際にすべてを見る!私は、後のセクションでいるにもギャラの設定を変更して追加することができます余分な多くのオプションが、行くつもりです。
FancyBox画像を拡大すると、画像をクリックして背景を暗く素敵な画像ポップアップ機能("ライト"と呼ばれる)です。私はすべての機能fancyboxで利用可能なのかわからないんだけど、それは清潔で使いやすいです。ただ(または任意の場所に画像以外の)右上にある[X]をクリックしますと、画像のポップアップを閉じます。それは多くのライトアプリNOTはこの権利を得るかは驚くべきことです。
ご注文のおガレリア画像上fancyboxを使用する別の方法で行う必要があるいくつかの事をありません。ダウンロード上記の最初のセクションのリンクを使用して、最新のfancyboxソースコード。
1。ウェブページの'頭'のセクションでは、fancyboxスクリプトを含める必要があります
未満スクリプトタイプ = "テキスト/ JavaScriptを" 鉄骨 = "./tools/fancybox/fancybox/jquery.fancybox-1.3.2.js" > スクリプト >
未満リンクのrel = "スタイル" タイプ = "text / css"に HREFの = "./tools/fancybox/fancybox/jquery.fancybox-1.3.2.css" メディア = "画面" / a>を
2。画像の参照は、最後の例と同じしてください。
3。を参照するときにガレリアと画像のdivには、オプションとしてfancyboxを追加します。ここでは次のようになります:
拡張 : 関数 ( ) {
この 。 バインド ( ギャラ。 LOADFINISH 、 関数 ( 電子 ) {
$ ( 大腸菌 imageTarget ) 。 クリック ( この 。 プロキシ ( 関数 ( 電子 ) {
大腸菌のpreventDefault ( ) ; / /ごみを削除
VARの objが = この 。 のgetData ( ) ;
$。 fancybox ( {
の'href' : objが。 イメージ
} ) ;
} ) )
} ) ;
}
} ) ;
- ^Aino (2010), "Galleria — A JavaScript gallery for the Fastidious", Retrieved 29 October 2010