« webサイトをリニューアル中 - サーバーの移転も計画中。 | トップページ

2017年7月 8日 (土)

fancyBox3 - 日本語化して導入予定。

webサイトをリニューアルするにあたり、「画像をクリック/タップするとページ内で拡大するようにしたい」と考え、それを実現するスクリプトの一つ fancyBox3 を導入することにしました。画像を表示する際のデザインとアニメーションが好みだったのと、HTMLファイルの書き換えが比較的簡単だったのが採用の理由です。

「閉じるボタン等のツールチップが英語」という海外プラグイン特有の問題もありましたが、それらの日本語化も意外と簡単だったので、それも併せて、自身の備忘録を兼ねて設置方法を紹介したいと思います。

なお、jQueryが必要(開発者は3以上を推奨)なので、jQueryを初めて導入する方は事前に用意してください。また、HTML文書はHTML5を、文字コードはUTF-8を想定しています。

  1. fancyBox3の公式サイトからファイルをダウンロードする。

  2. ダウンロードしたファイルを展開し、「dist」フォルダー内にある jquery.fancybox.min.css と jquery.fancybox.min.js をサイト内の任意の場所に置く。

  3. 以下の内容のJavaScriptファイル(ファイル名は仮に settings.js とします)を作成し、任意の場所に置く。

    $(function() {
    	$('[data-fancybox]').fancybox({
    		// 指定するオプションを以下に記述
    
    		// 日本語を追加
    		lang : 'ja',
    		i18n : {
    			// 英語、ドイツ語はデフォルトのまま
    			'en' : {
    				CLOSE       : 'Close',
    				NEXT        : 'Next',
    				PREV        : 'Previous',
    				ERROR       : 'The requested content cannot be loaded. <br/> Please try again later.',
    				PLAY_START  : 'Start slideshow',
    				PLAY_STOP   : 'Pause slideshow',
    				FULL_SCREEN : 'Full screen',
    				THUMBS      : 'Thumbnails'
    			},
    			'de' : {
    				CLOSE       : 'Schliessen',
    				NEXT        : 'Weiter',
    				PREV        : 'Zurück',
    				ERROR       : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
    				PLAY_START  : 'Diaschau starten',
    				PLAY_STOP   : 'Diaschau beenden',
    				FULL_SCREEN : 'Vollbild',
    				THUMBS      : 'Vorschaubilder'
    			},
    			// 追加分
    			// 文字列は用途に合わせて各自変更
    			'ja' : {
    				CLOSE       : '閉じる',
    				NEXT        : '次の画像',
    				PREV        : '前の画像',
    				ERROR       : '画像の読み込みに失敗しました。',
    				PLAY_START  : 'スライドショーを開始',
    				PLAY_STOP   : 'スライドショーを停止',
    				FULL_SCREEN : 'フルスクリーンで表示',
    				THUMBS      : 'サムネイル一覧'
    			}
    		}
    	});
    });
  4. HTML文書を開き、head要素内に以下のタグを追加する(パスは各自変更)。既にjQueryを使用していれば、2行目を削除する。

    <link rel="stylesheet" href="(jquery.fancybox.min.cssへのパス)" />
    <script src="(jQueryへのパス)"></script>
    <script src="(jquery.fancybox.min.jsへのパス)"></script>
    <script src="(settings.jsへのパス)"></script>
    
  5. 画像にリンクしているa要素に、以下のように data-fancybox 属性と data-caption 属性を追加する。

    <a href="(画像へのパス)" data-fancybox data-caption="(画像の説明)"><img src="(サムネイルへのパス)" alt="(代替テキスト)" /></a>
    
  6. 画像をグループ化する場合、data-fancybox 属性を data-fancybox="(グループ名)" とする。グループ名の同じ画像同士がグループ化され、画像の切り替えやスライドショーが可能となる。

  7. オプションを指定する際は、settings.js内に記述する。

  8. 商用利用する場合は、運用前にfancyBox3の公式サイトにてライセンスの発行手続きを行う(有料)。

« webサイトをリニューアル中 - サーバーの移転も計画中。 | トップページ

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/142759/71086149

この記事へのトラックバック一覧です: fancyBox3 - 日本語化して導入予定。:

« webサイトをリニューアル中 - サーバーの移転も計画中。 | トップページ